/* ===========================
        FOR NILA 💖
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:linear-gradient(
        180deg,
        #ffd8ea 0%,
        #ffc0dc 25%,
        #ffe5f2 55%,
        #fff6fb 100%
    );

    color:#5c2a46;

    overflow-x:hidden;

    position:relative;

    transition:background 1.2s ease,color 1.2s ease;

}

body.ending-active{

    background:radial-gradient(circle at top,#7d2f6f 0%,#3f1747 35%,#12081f 100%);

    color:#fce7ff;

}

body.ending-active .hero,
body.ending-active .glass,
body.ending-active footer{

    filter:brightness(.72) saturate(.86);

    transition:filter 1.2s ease;

}
#musicToggle{

    position:fixed;

    bottom:25px;

    right:25px;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(10px);

    font-size:24px;

    cursor:pointer;

    z-index:9999;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    transition:.3s;

}

#musicToggle:hover{

    transform:scale(1.08);

}
/* Scrollbar */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#ffd7ea;
}

::-webkit-scrollbar-thumb{
    background:#ff6faf;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#ff4b9a;
}

/* ===========================
          Loader
=========================== */

#loader{

    position:fixed;

    inset:0;

    background:linear-gradient(
        135deg,
        #ffb8d8,
        #ffd8ea
    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:1s;
}

#loader h1{

    font-family:'Great Vibes',cursive;

    font-size:70px;

    color:white;

    margin-bottom:20px;

}

#loader p{

    color:white;

    font-size:20px;

    letter-spacing:2px;

}

/* ===========================
          Navigation
=========================== */

nav{
 
    position:fixed;
 
    top:0;
 
    left:0;
 
    width:100%;
 
    display:flex;
 
    justify-content:space-between;
 
    align-items:center;
 
    padding:20px 8%;
 
    backdrop-filter:blur(18px);
 
    background:rgba(255,255,255,.28);
 
    z-index:999;
 
    transition:opacity .8s ease,transform .8s ease,background .6s ease;
 
}

nav.is-hidden{

   opacity:0;

   transform:translateY(-12px);

   pointer-events:none;

}

.logo{

    font-size:34px;

    font-family:'Great Vibes',cursive;

    color:#ff2e8b;

}

nav ul{

    display:flex;

    list-style:none;

    gap:40px;

}

nav a{

    text-decoration:none;

    color:#a41d66;

    font-weight:600;

    transition:.3s;

}

nav a:hover{

    color:#ff4ba2;

}

/* ===========================
            Hero
=========================== */

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:120px 25px 80px;

    position:relative;

}

.hero-content{

    max-width:850px;

    animation:fadeUp 1.4s ease;

}

.hero h1{

    font-family:'Great Vibes',cursive;

    font-size:110px;

    color:#ff2f8e;

    margin-bottom:15px;

}

.hero p{

    font-size:24px;

    color:#7d4464;

    margin-bottom:45px;

    line-height:1.8;

}

.hero button{

    padding:18px 46px;

    border:none;

    border-radius:100px;

    background:#ff4b9f;

    color:white;

    font-size:20px;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 15px 35px rgba(255,75,159,.35);

}

.hero button:hover{

    transform:translateY(-5px) scale(1.05);

    box-shadow:0 20px 45px rgba(255,75,159,.45);

}

/* ===========================
         Scroll Arrow
=========================== */

.scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    font-size:35px;

    color:#ff5ca8;

    animation:bounce 1.8s infinite;

}

/* ===========================
        Glass Cards
=========================== */

.glass{

    width:min(950px,92%);

    margin:70px auto;

    padding:45px;

    border-radius:28px;

    background:rgba(255,255,255,.42);

    backdrop-filter:blur(18px);

    box-shadow:

        0 18px 45px rgba(0,0,0,.12);

}

.glass h2{

    text-align:center;

    margin-bottom:30px;

    color:#ff338f;

    font-size:38px;

}

/* ===========================
         Counter
=========================== */

#daysCounter{

    font-size:70px;

    text-align:center;

    color:#ff2d8b;

    font-weight:700;

    margin-bottom:15px;

}

.counter p{

    text-align:center;

    font-size:20px;

    color:#7a4d67;

}

/* ===========================
        Typewriter
=========================== */

#typedText{

    font-size:20px;

    line-height:2;

    white-space:pre-wrap;

    min-height:420px;

    color:#66334f;

}

/* Blinking cursor */

#typedText::after{

    content:"|";

    animation:blink .8s infinite;

    color:#ff3e95;

}


/* ========= Gallery ========= */

.gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

    margin-top:30px;

}

.photo{

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(255,105,180,.18);

    transition:.35s;

}

.photo:hover{

    transform:translateY(-8px) scale(1.03);

}

.photo img{

    width:100%;

    height:340px;

    object-fit:cover;

    display:block;

}

.caption{

    padding:18px;

    text-align:center;

    font-weight:600;

    color:#d63384;

}

/* ========= Reasons ========= */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    margin-top:25px;

}

.reason{

    background:rgba(255,255,255,.65);

    border-radius:20px;

    padding:30px;

    text-align:center;

    transition:.3s;

}

.reason:hover{

    transform:translateY(-8px);

    box-shadow:0 12px 30px rgba(255,105,180,.22);

}

.reason h3{

    font-size:48px;

    margin-bottom:15px;

}

.reason p{

    line-height:1.8;

    color:#6d3653;

}

/* ========= Surprise ========= */

.surprise{

    text-align:center;

}

.surprise p{

    font-size:20px;

    line-height:2;

}

#surpriseButton{

    margin-top:35px;

    padding:16px 40px;

    border:none;

    border-radius:999px;

    background:#ff4fa6;

    color:white;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

#surpriseButton:hover{

    transform:scale(1.05);

}

#secretMessage{

    display:none;

    margin-top:35px;

    padding:30px;

    border-radius:18px;

    background:white;

    color:#d63384;

    font-size:20px;

    line-height:1.8;

}

/* ========= Footer ========= */

footer{

    padding:50px 20px;

    text-align:center;

    color:#b0307a;

    font-weight:600;

}

/* ========= Cinematic Ending ========= */

.ending-section{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:clamp(2rem,4vw,4rem);

    overflow:hidden;

    isolation:isolate;

    margin-top:40px;

    background:transparent;

}

.ending-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 50% 12%, rgba(255,224,155,.4) 0%, rgba(255,175,112,.16) 22%, transparent 40%),
        linear-gradient(180deg, rgba(255,150,188,.88) 0%, rgba(255,144,100,.95) 34%, rgba(255,194,116,.98) 64%, rgba(138,68,74,.94) 100%);

    opacity:0;

    transition:opacity 1.1s ease;

    z-index:-3;

}

.ending-section::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,128,96,.08));

    opacity:0;

    transition:opacity 1.2s ease;

    z-index:-2;

}

.ending-section.is-active::before{

    opacity:1;

}

.ending-section.is-active::after{

    opacity:1;

}

.ending-sky,
.ending-sun,
.ending-horizon,
.ending-water,
.ending-waves{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.ending-sky{

    z-index:0;

    background:linear-gradient(180deg, #ffdce8 0%, #ffab87 28%, #ffc164 56%, #ff8d62 100%);

    animation:skyDrift 12s ease-in-out infinite alternate;

}

.ending-sun{

    z-index:1;

    inset:auto 50% 37% auto;

    width:min(24vw, 240px);

    height:min(24vw, 240px);

    transform:translateX(-50%);

    border-radius:50%;

    background:radial-gradient(circle, #fff7d6 0%, #ffd17c 35%, rgba(255,151,84,.8) 60%, transparent 74%);

    box-shadow:0 0 70px rgba(255,205,125,.55);

    animation:sunPulse 6.5s ease-in-out infinite;

}

.ending-horizon{

    z-index:1;

    inset:auto 0 24% 0;

    background:linear-gradient(180deg, rgba(255,176,120,.38), rgba(255,132,88,.04));

    clip-path:polygon(0 100%, 0 62%, 12% 58%, 22% 70%, 34% 55%, 48% 68%, 66% 52%, 82% 61%, 100% 48%, 100% 100%);

    animation:horizonGlow 8s ease-in-out infinite alternate;

}

.ending-water{

    z-index:1;

    inset:auto 0 0 0;

    height:32%;

    background:linear-gradient(180deg, rgba(112,34,78,.18), rgba(31,13,49,.74));

}

.ending-waves{

    z-index:2;

    inset:auto 0 0 0;

    height:32%;

    overflow:hidden;

}

.ending-waves span{

    position:absolute;

    left:-12%;

    bottom:0;

    width:124%;

    height:44px;

    border-radius:50%;

    border:2px solid rgba(255,244,214,.35);

    animation:waveMove 8s linear infinite;

}

.ending-waves span:nth-child(2){

    bottom:14px;

    opacity:.58;

    animation-duration:10s;

}

.ending-waves span:nth-child(3){

    bottom:28px;

    opacity:.4;

    animation-duration:12s;

}

.ending-sparkles-layer{

    z-index:3;

    overflow:hidden;

}

.ending-message-shell{

    position:relative;

    z-index:4;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:min(90vw,760px);

    text-align:center;

    color:#fff8ff;

    text-shadow:0 0 20px rgba(255,255,255,.16);

}

.ending-message{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:.2rem;

}

.ending-line{

    opacity:0;

    transform:translateY(24px);

    font-size:clamp(1.2rem, 2.4vw, 2rem);

    font-weight:600;

    letter-spacing:.03em;

    line-height:1.35;

    text-shadow:0 0 14px rgba(255,255,255,.16);

    transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);

}

.ending-section.is-active .ending-line{

    opacity:1;

    transform:translateY(0);

}

.ending-section.is-active .ending-line--spacer{

    opacity:0;

}

.ending-line--spacer{

    height:.85rem;

    opacity:0;

    pointer-events:none;

}

.ending-line--heart{

    font-size:clamp(2.2rem, 4vw, 3rem);

    margin-top:.25rem;

}

.ending-signature{

    margin-top:2.5rem;

    font-family:'Great Vibes',cursive;

    font-size:clamp(2rem, 4.1vw, 3.1rem);

    color:#fff1e6;

    opacity:0;

    transform:translateY(26px) scale(.97);

    letter-spacing:.04em;

    text-shadow:0 0 30px rgba(255,164,110,.25);

    transition:opacity .9s ease,transform .9s ease,text-shadow .9s ease;

    position:relative;

}

.ending-signature::before{

    content:"";

    position:absolute;

    inset:-18px -12px;

    border-radius:999px;

    background:radial-gradient(circle, rgba(255,175,107,.24), transparent 70%);

    filter:blur(16px);

    z-index:-1;

    opacity:0;

    transition:opacity .9s ease;

}

.ending-signature.is-visible{

    opacity:1;

    transform:translateY(0) scale(1);

}

.ending-signature.is-visible::before{

    opacity:1;

}

.ending-particle{

    position:absolute;

    left:50%;

    top:50%;

    font-size:1rem;

    color:#ff8a6b;

    text-shadow:0 0 8px rgba(255,181,103,.55);

    opacity:0;

    transform:translate(-50%,-50%) scale(.4);

    animation:heartBurst 2.8s ease-out forwards;

    pointer-events:none;

}

/* ========= Floating Hearts ========= */

#hearts{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:0;

}

.heart{

    position:absolute;

    bottom:-40px;

    animation:float linear forwards;

    opacity:.75;

    user-select:none;

}

/* ========= Stars ========= */

#stars{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

}

.star{

    position:absolute;

    width:3px;

    height:3px;

    border-radius:50%;

    background:white;

    animation:twinkle 2.5s infinite;

}

/* ========= Animations ========= */

@keyframes float{

    from{

        transform:
        translateY(0)
        rotate(0deg);

        opacity:.9;

    }

    to{

        transform:
        translateY(-120vh)
        rotate(360deg);

        opacity:0;

    }

}

@keyframes blink{

    50%{

        opacity:0;

    }

}

@keyframes bounce{

    50%{

        transform:
        translateX(-50%)
        translateY(-12px);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes twinkle{
 
    50%{
 
        opacity:.25;
 
        transform:scale(.5);
 
    }
 
}

@keyframes skyDrift{

   from{

       transform:translateY(0) scale(1);

   }

   to{

       transform:translateY(-18px) scale(1.03);

   }

}

@keyframes sunPulse{

   0%,100%{

       transform:translateX(-50%) scale(1);

   }

   50%{

       transform:translateX(-50%) scale(1.05);

   }

}

@keyframes horizonGlow{

   0%,100%{

       filter:brightness(.95);

   }

   50%{

       filter:brightness(1.2);

   }

}

@keyframes waveMove{

   from{

       transform:translateX(-8%) scaleX(1);

   }

   to{

       transform:translateX(8%) scaleX(1.04);

   }

}

@keyframes heartBurst{

   0%{

       opacity:0;

       transform:translate(-50%,-50%) scale(.35);

   }

   15%{

       opacity:1;

       transform:translate(-50%,-50%) scale(1);

   }

   100%{

       opacity:0;

       transform:translate(calc(-50% + var(--drift-x, 0px)), calc(-50% + var(--drift-y, 0px))) scale(.12);

   }

}
 
/* ========= Responsive ========= */

@media(max-width:900px){

.hero h1{

    font-size:72px;

}

.glass{

    padding:30px;

}

#daysCounter{

    font-size:54px;

}

}

@media(max-width:700px){

nav{

    flex-direction:column;

    gap:15px;

}

nav ul{

    gap:18px;

    flex-wrap:wrap;

    justify-content:center;

}

.hero{

    padding-top:170px;

}

.hero h1{

    font-size:58px;

}

.hero p{

    font-size:18px;

}

.hero button{

    width:90%;

    max-width:320px;

}

.glass h2{

    font-size:30px;

}

#typedText{

    font-size:17px;

    min-height:320px;

}

.photo img{

    height:260px;

}

#daysCounter{

    font-size:42px;

}

.reason{

    padding:24px;

}

.ending-line{

    font-size:clamp(1rem, 4vw, 1.6rem);

}

.ending-signature{

    font-size:clamp(1.7rem, 6vw, 2.4rem);

}

}

@media(max-width:450px){

.hero h1{

    font-size:48px;

}

.logo{

    font-size:28px;

}

nav a{

    font-size:14px;

}

.glass{

    width:95%;

    padding:22px;

}

footer{

    font-size:14px;

}

}