@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800;900&family=Montserrat:wght@300;400;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Montserrat', sans-serif;
    overflow-x:hidden;
}

#wrapper{
    min-height:100vh;
    position:relative;
    isolation:isolate;
    display:flow-root;
    padding-bottom:40px;
    background-image:url("../images/valentines.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:white;
}

main img{
    display:none;
}

#wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:linear-gradient(
        120deg,
        rgba(0,0,0,.62),
        rgba(255,77,141,.22),
        rgba(0,0,0,.62)
    );
    background-size:300% 300%;
    animation:gradientShift 10s ease-in-out infinite;
}

#wrapper::after{
    content:"";
    position:absolute;
    inset:-120px;
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,77,141,.28), transparent 55%),
        radial-gradient(circle at 80% 30%, rgba(255,182,193,.22), transparent 60%),
        radial-gradient(circle at 50% 85%, rgba(255,77,141,.16), transparent 60%);
    filter:blur(10px);
}

header{
    position:sticky;
    top:18px;
    z-index:50;
    width:min(920px, 90%);
    margin:18px auto 0 auto;
    border-radius:22px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 10px 35px rgba(0,0,0,.45);
    padding:16px 0;
}

nav ul{
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    list-style:none;
    padding:0;
    margin:0;
}

nav li{
    flex:1;
    text-align:center;
    font-weight:700;
    letter-spacing:1px;
    font-size:1.05rem;
    cursor:pointer;
    position:relative;
    transition:.35s;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.45rem;
}

nav li:nth-child(1)::before{ content:"🃏"; }
nav li:nth-child(2)::before{ content:"🍫"; }
nav li:nth-child(3)::before{ content:"🎀"; }
nav li:nth-child(4)::before{ content:"🎁"; }

nav li::before{
    font-size:1.1rem;
    filter:drop-shadow(0 2px 6px rgba(255,105,180,.5));
    transform:translateY(-1px);
}

nav li::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-12px;
    width:0%;
    height:2px;
    background:linear-gradient(90deg, #ff4d8d, #ffb3c6);
    box-shadow:0 0 14px rgba(255,77,141,.65);
    transform:translateX(-50%);
    transition:.35s;
}

nav li:hover{
    color:#ffd6e4;
    text-shadow:0 0 14px rgba(255,77,141,.65);
    transform:translateY(-2px);
}

nav li:hover::after{
    width:58%;
}

main{
    width:min(980px, 92%);
    margin:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:110px 0 60px 0;
}

h1{
    font-family:'Playfair Display', serif;
    font-size:clamp(3.2rem, 6vw, 6.2rem);
    font-weight:900;
    letter-spacing:2px;
    margin-bottom:34px;
    text-shadow:0 14px 40px rgba(0,0,0,.95);
    background:linear-gradient(90deg, #ffffff, #ffd6e4, #ffffff);
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:titleFloat 4s ease-in-out infinite,
              titleShimmer 6s ease-in-out infinite;
}

section{
    width:min(760px, 100%);
    margin:18px 0;
    padding:26px;
    border-radius:24px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 14px 60px rgba(0,0,0,.50);
    transform:translateY(20px);
    opacity:0;
    animation:reveal .9s ease forwards;
    overflow:hidden;
}

section:nth-of-type(1){ animation-delay:.15s; }
section:nth-of-type(2){ animation-delay:.35s; }
section:nth-of-type(3){ animation-delay:.55s; }

section:hover{
    transform:translateY(-8px) scale(1.02);
    background:rgba(255,255,255,.18);
    box-shadow:0 20px 75px rgba(0,0,0,.62);
}

h2{
    font-family:'Playfair Display', serif;
    font-size:clamp(1.8rem, 2.4vw, 2.4rem);
    margin-bottom:12px;
    background:linear-gradient(90deg, #ff8fab, #ffd6e4, #ff8fab);
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 10px 20px rgba(0,0,0,.75);
    animation:h2Shimmer 5.5s ease-in-out infinite;
}

h2::after{
    content:" ♥";
    margin-left:6px;
    color:#ff6b9d;
    filter:drop-shadow(0 2px 6px rgba(255,105,180,.5));
    animation:heartBeat 1.8s ease-in-out infinite;
}

p{
    font-size:1.02rem;
    line-height:1.75;
    font-weight:300;
    color:rgba(255,255,255,.95);
    text-shadow:0 6px 18px rgba(0,0,0,.85);
}

footer{
    width:min(920px, 90%);
    margin:70px auto 0 auto;
    text-align:center;
    padding:20px;
    border-radius:20px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 10px 35px rgba(0,0,0,.45);
    color:rgba(255,255,255,.92);
    text-shadow:0 6px 18px rgba(0,0,0,.85);
}

@keyframes gradientShift{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

@keyframes titleFloat{
    0%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
    100%{transform:translateY(0);}
}

@keyframes titleShimmer{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

@keyframes reveal{
    to{
        transform:translateY(0);
        opacity:1;
    }
}

@keyframes heartBeat{
    0%, 100%{transform:scale(1);}
    50%{transform:scale(1.18);}
}

@keyframes h2Shimmer{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

@media (max-width:520px){
    header{
        top:10px;
        padding:14px 0;
    }

    nav li{
        font-size:.95rem;
        letter-spacing:.5px;
    }

    main{
        padding-top:90px;
    }

    section{
        padding:22px;
        border-radius:20px;
    }
}