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

body{

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

    background:#050816;

    color:white;

    overflow-x:hidden;
    scroll-behavior:smooth;

}

/* Hero */

.hero{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    text-align:center;

    padding:20px;

}

.small-text{

    color:#7dd3fc;

    font-size:28px;

    margin-bottom:20px;

}

#typing{

    font-size:60px;

    width:900px;

    max-width:90%;

    min-height:160px;

    line-height:80px;

}

.subtitle{

    margin-top:30px;

    width:700px;

    max-width:90%;

    font-size:20px;

    color:#ddd;

}

button{

    margin-top:50px;

    padding:18px 45px;

    border:none;

    border-radius:40px;

    font-size:20px;

    cursor:pointer;

    color:white;

    background:linear-gradient(45deg,#ff4d6d,#7dd3fc);

    transition:.4s;

}

button:hover{

    transform:scale(1.1);

    box-shadow:0 0 25px hotpink;

}

/* Stars */

/* ========================= */
/* PREMIUM BACKGROUND */
/* ========================= */

.background{

    position:fixed;

    width:100%;

    height:100%;

    top:0;

    left:0;

    z-index:-2;

    overflow:hidden;

    background:#050816;

}

/* Moon */

.moon{

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    top:80px;

    right:120px;

    background:white;

    box-shadow:

    0 0 30px white,

    0 0 80px white,

    0 0 120px #7dd3fc;

}

/* Stars */

.stars{

    position:absolute;

    width:100%;

    height:100%;

    background-image:

    radial-gradient(white 1px,transparent 1px);

    background-size:45px 45px;

    animation:twinkle 6s infinite alternate;

    opacity:.6;

}

@keyframes twinkle{

    0%{

        opacity:.25;

    }

    100%{

        opacity:.9;

    }

}

@keyframes moveStars{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-1000px);

    }

}

/* Floating Hearts */

.hearts{

    position:fixed;

    width:100%;

    height:100%;

    overflow:hidden;

    pointer-events:none;

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

.memories{

    min-height:100vh;

    padding:100px 50px;

    background:#08111f;

}

.section-title{

    text-align:center;

    font-size:50px;

    margin-bottom:70px;

}

.gallery{

    display:grid;

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

    gap:40px;

}

.memory-card{

    background:#152238;

    border-radius:20px;

    overflow:hidden;

    transition:.4s;

    transform:translateY(100px);

    opacity:0;

}

.memory-card.show{

    transform:translateY(0);

    opacity:1;

}

.memory-card:hover{

    transform:translateY(-15px);

    box-shadow:0 0 35px #38bdf8;

}

.memory-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.5s;

}

.memory-card:hover img{

    transform:scale(1.08);

}

.memory-card h3{

    padding:20px;

    color:#7dd3fc;

}

.memory-card p{

    padding:0 20px 25px;

    color:#ddd;

}
/* ================= Timeline ================= */

.timeline-section{

    background:#050816;

    padding:100px 20px;

}

.timeline{

    position:relative;

    max-width:1100px;

    margin:auto;

}

.timeline::after{

    content:"";

    position:absolute;

    width:6px;

    background:#38bdf8;

    top:0;

    bottom:0;

    left:50%;

    margin-left:-3px;

    box-shadow:0 0 20px #38bdf8;

}

.timeline-item{

    padding:20px 40px;

    position:relative;

    width:50%;

    opacity:0;

    transform:translateY(80px);

    transition:.8s;

}

.timeline-item.show{

    opacity:1;

    transform:translateY(0);

}

.left{

    left:0;

}

.right{

    left:50%;

}

.timeline-item::after{

    content:"";

    position:absolute;

    width:22px;

    height:22px;

    right:-11px;

    background:white;

    border:5px solid #38bdf8;

    top:35px;

    border-radius:50%;

    z-index:5;

}

.right::after{

    left:-11px;

}

.content{

    background:#152238;

    padding:25px;

    border-radius:15px;

    box-shadow:0 0 25px rgba(56,189,248,.25);

    transition:.4s;

}

.content:hover{

    transform:scale(1.03);

    box-shadow:0 0 35px #38bdf8;

}

.content h2{

    color:#7dd3fc;

    margin-bottom:10px;

}

.content h3{

    margin-bottom:15px;

}

.content p{

    color:#ddd;

    line-height:1.7;

}
@media(max-width:768px){

.timeline::after{

left:20px;

}

.timeline-item{

width:100%;

padding-left:60px;

padding-right:20px;

}

.left,
.right{

left:0;

}

.timeline-item::after{

left:9px;

}

}
/* ================= GRATITUDE ================= */

.gratitude-section{

    padding:100px 30px;

    background:#08111f;

}

.gratitude-container{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:35px;

}

.flip-card{

    height:280px;

    perspective:1000px;

}

.flip-card-inner{

    position:relative;

    width:100%;

    height:100%;

    transition:transform .8s;

    transform-style:preserve-3d;

    cursor:pointer;

}

.flip-card.active .flip-card-inner{

    transform:rotateY(180deg);

}

.flip-card-front,
.flip-card-back{

    position:absolute;

    width:100%;

    height:100%;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    padding:25px;

    backface-visibility:hidden;

}

.flip-card-front{

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

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.15);

    font-size:50px;

    transition:.4s;

}

.flip-card-front h3{

    margin-top:20px;

    font-size:24px;

    text-align:center;

}

.flip-card-front:hover{

    transform:translateY(-8px);

    box-shadow:0 0 30px #38bdf8;

}

.flip-card-back{

    background:linear-gradient(135deg,#1e3a8a,#2563eb);

    transform:rotateY(180deg);

    text-align:center;

    line-height:1.8;

    font-size:18px;

}
/* ================= FINAL ================= */

.final-section{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    text-align:center;

    background:linear-gradient(180deg,#020617,#08111f,#020617);

    position:relative;

    overflow:hidden;

}

.final-title{

    font-size:60px;

    color:#7dd3fc;

    animation:pulse 2s infinite;

}

.name{

    margin-top:20px;

    font-size:40px;

    color:#ff80ab;

}

#finalTyping{

    width:800px;

    max-width:90%;

    margin-top:40px;

    line-height:2;

    font-size:22px;

    color:#ffffff;

    min-height:180px;

}

#celebrateBtn{

    margin-top:40px;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

#fireworks{

    position:absolute;

    width:100%;

    height:100%;

    top:0;

    left:0;

    pointer-events:none;

}
/* ========================= */
/* LOADER */
/* ========================= */

#loader{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:#020617;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:opacity 1s ease;

}

.loader-content{

    text-align:center;

}

.loader-content h1{

    margin-top:30px;

    color:white;

    font-size:32px;

}

.heart-loader{

    font-size:70px;

    animation:heartbeat 1s infinite;
}

@keyframes heartbeat{

0%{

transform:scale(1);

}

50%{

transform:scale(1.3);

}

100%{

transform:scale(1);

}

}

/* ========================= */
/* PROGRESS BAR */
/* ========================= */

#progressBar{

    position:fixed;

    top:0;

    left:0;

    width:0%;

    height:5px;

    background:linear-gradient(
        90deg,
        #ff4d6d,
        #38bdf8
    );

    z-index:9999;

}

/* ========================= */
/* PAGE FADE */
/* ========================= */

body{

    animation:fadeIn 1.2s;
}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}
/* ========================= */
/* MUSIC CONTROLS */
/* ========================= */

.music-controls{

    position:fixed;

    top:20px;

    right:20px;

    display:flex;

    gap:12px;

    z-index:9999;

}

.music-controls button{

    width:55px;

    height:55px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    font-size:22px;

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

    color:white;

    backdrop-filter:blur(12px);

    transition:.3s;

}

.music-controls button:hover{

    transform:scale(1.15);

    box-shadow:0 0 20px #38bdf8;

}

/* ========================= */
/* CURSOR HEART */
/* ========================= */

.cursor-heart{

    position:fixed;

    pointer-events:none;

    font-size:18px;

    animation:heartFloat 1s linear forwards;

    z-index:99999;

}

@keyframes heartFloat{

    0%{

        opacity:1;

        transform:translateY(0) scale(1);

    }

    100%{

        opacity:0;

        transform:translateY(-40px) scale(0.4);

    }

}
/* ========================= */
/* SECTION ANIMATION */
/* ========================= */

.hero,
.memories,
.timeline-section,
.gratitude-section,
.final-section{

    animation:fadeSection 1.2s ease;

}

@keyframes fadeSection{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ========================= */
/* MOBILE RESPONSIVE */
/* ========================= */

@media(max-width:768px){

.hero{

padding:30px;

}

.small-text{

font-size:24px;

}

#typing{

font-size:34px;

line-height:50px;

}

.subtitle{

font-size:18px;

}

button{

font-size:18px;

padding:14px 30px;

}

.section-title{

font-size:34px;

}

.final-title{

font-size:38px;

}

.name{

font-size:28px;

}

#finalTyping{

font-size:18px;

}

.moon{

width:120px;

height:120px;

top:40px;

right:20px;

}

}