body{
margin:0;
font-family:'Poppins',sans-serif;
background:#fdfbf8;
color:#222;
}

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

html{
scroll-behavior:smooth;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* NAVBAR */

.navbar{
position:fixed;
width:100%;
top:20px;
z-index:100;
}

.navbar .container{
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(255,255,255,.15);
backdrop-filter:blur(20px);
padding:18px 35px;
border-radius:50px;
}

.logo{
color:white;
font-size:28px;
font-weight:700;
}

.logo span{
color:#ff4d8d;
}

.nav-links{
display:flex;
list-style:none;
gap:35px;
}

.nav-links a{
color:white;
text-decoration:none;
font-weight:500;
}

/* HERO */

.hero{
    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    padding-top:140px;     /* NEW */
    padding-bottom:60px;

    background:url("assets/hero/hero.jpg") center center/cover no-repeat;
}

.hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
}

.hero-container{
position:relative;
z-index:2;
width:90%;
max-width:1200px;
margin:auto;
}

.hero-content{
    max-width:720px;
    margin-top:20px;
}

.eyebrow{
color:white;
letter-spacing:8px;
font-size:14px;
margin-bottom:25px;
}

.hero h1{
    color:white;
    font-size:clamp(4rem,7vw,6.5rem);
    line-height:.95;
    font-family:'Playfair Display',serif;
    margin-bottom:28px;
}

.hero-description{
color:white;
font-size:22px;
line-height:1.8;
margin-bottom:45px;
}

.primary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 40px;

    background:white;
    color:#ff4d8d;

    border-radius:999px;

    text-decoration:none;
    font-weight:700;

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

    transition:.3s ease;
}

.primary-button:hover{
    transform:translateY(-5px);
    background:#ffe2ee;
}

.scroll-indicator{
margin-top:80px;
color:white;
letter-spacing:5px;
font-size:12px;
}
/* =====================================
   STORY SECTION
===================================== */

.coming-section{
    padding:140px 0;
}

.light{
    background:#fffaf7;
}

.coming-section h2{
    font-family:'Playfair Display',serif;
    font-size:64px;
    text-align:center;
    margin-bottom:20px;
    color:#222;
}

.coming-section p{
    text-align:center;
    max-width:700px;
    margin:auto;
    font-size:20px;
    color:#666;
    line-height:1.8;
}
/* ==========================================
   STORY TIMELINE
========================================== */

.story-section{
    background:#fffaf8;
    padding:140px 0;
}

.section-tag{
    text-align:center;
    color:#ff4d8d;
    letter-spacing:8px;
    font-size:13px;
    font-weight:600;
    margin-bottom:18px;
}

.story-section h2{
    font-family:'Playfair Display',serif;
    font-size:64px;
    text-align:center;
    color:#222;
    margin-bottom:20px;
}

.section-intro{
    max-width:720px;
    margin:0 auto 80px;
    text-align:center;
    font-size:20px;
    color:#666;
    line-height:1.8;
}

/* Vertical line */

.timeline{
    position:relative;
    max-width:900px;
    margin:auto;
}

.timeline::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:2px;
    background:#ffd5e4;
    transform:translateX(-50%);
}

/* Each item */

.timeline-item{
    position:relative;
    margin-bottom:90px;
}

.timeline-item::before{
    content:"";
    position:absolute;
    left:50%;
    top:35px;
    width:16px;
    height:16px;
    background:#ff4d8d;
    border-radius:50%;
    transform:translateX(-50%);
    box-shadow:0 0 0 8px #fff0f6;
}

.timeline-date{
    text-align:center;
    color:#ff4d8d;
    font-weight:600;
    margin-bottom:30px;
    letter-spacing:2px;
}

.timeline-content{
    width:44%;
    background:white;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.timeline-content img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.timeline-text{
    padding:28px;
}

.timeline-text h3{
    font-family:'Playfair Display',serif;
    font-size:30px;
    margin-bottom:15px;
}

.timeline-text p{
    color:#666;
    line-height:1.8;
}

/* Alternate cards */

.timeline-item:nth-child(odd) .timeline-content{
    margin-left:auto;
}

.timeline-item:nth-child(even) .timeline-content{
    margin-right:auto;
}

/* =======================================
   GALLERY SECTION
======================================= */

/* ==========================================
   OUR MEMORIES – SCRAPBOOK GALLERY
========================================== */

/* Gallery container for doodles */
.gallery-section{
    position:relative;
    overflow:hidden;
}

/* Floating doodles */
.gallery-doodle{
    position:absolute;
    font-size:28px;
    color:#ff7aa8;
    opacity:.35;
    pointer-events:none;
    animation:floatDoodle 6s ease-in-out infinite;
}

/* Individual positions */
.heart{
    top:140px;
    left:6%;
}

.sparkle{
    top:420px;
    right:8%;
    color:#f9b44d;
    animation-delay:1s;
}

.heart2{
    top:860px;
    left:10%;
    color:#ff5d8f;
    animation-delay:2s;
}

.flower{
    bottom:340px;
    right:6%;
    color:#ff8fb8;
    animation-delay:3s;
}

.star{
    bottom:120px;
    left:14%;
    color:#ffc857;
    animation-delay:4s;
}

@keyframes floatDoodle{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }
    50%{
        transform:translateY(-10px) rotate(8deg);
    }
}
/* ==========================================
   SCRAPBOOK GALLERY
========================================== */

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:28px;
    align-items:start;
    position:relative;
    z-index:2;
}

/* Polaroid card */

.gallery-item{
    background:#fff;
    padding:14px 14px 22px;
    border-radius:24px;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    overflow:hidden;
    cursor:pointer;
    transition:.35s ease;
}

/* Different photo heights */

.gallery-item.large img{
    height:380px;
}

.gallery-item.wide img{
    height:260px;
}

.gallery-item.portrait img{
    height:320px;
}

/* Image */

.gallery-item img{
    width:100%;
    object-fit:cover;
    border-radius:18px;
    display:block;
    transition:transform .5s ease;
}

/* Hover */

.gallery-item:hover{
    transform:translateY(-8px) rotate(0deg) scale(1.02);
    box-shadow:0 24px 55px rgba(255,77,141,.18);
}

.gallery-item:hover img{
    transform:scale(1.04);
}

/* Cute scrapbook rotations */

.tilt-left{
    transform:rotate(-1.8deg);
}

.tilt-right{
    transform:rotate(1.8deg);
}

/* Caption */

.memory-caption{
    margin-top:14px;
    text-align:center;
    font-family:'Caveat', cursive;
    font-size:24px;
    color:#444;
}

/* ======================================
   ROMANTIC LIGHTBOX
====================================== */

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(20,20,20,.65);
    backdrop-filter:blur(12px);

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;
    transition:.35s ease;
    z-index:9999;
}

.lightbox.show{
    opacity:1;
    visibility:visible;
}

/* Floating memory card */
.lightbox-content{
    position:relative;
    background:white;
    border-radius:28px;
    padding:18px;
    width:min(90vw,520px);
    box-shadow:0 35px 80px rgba(0,0,0,.35);
    animation:popUp .35s ease;
}

@keyframes popUp{
    from{
        transform:scale(.85);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

.lightbox img{
    width:100%;
    height:auto;
    max-height:68vh;
    object-fit:contain;
    border-radius:20px;
}

/* Caption */
.lightbox-caption{
    margin-top:16px;
    text-align:center;

    font-family:'Caveat', cursive;
    font-size:30px;
    color:#444;
}

/* Close button */
.close-lightbox{
    position:absolute;
    top:18px;
    right:22px;
    font-size:34px;
    color:#444;
    cursor:pointer;
}

/* Arrows */
.lightbox-prev,
.lightbox-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:rgba(255,255,255,.85);

    width:46px;
    height:46px;
    border-radius:50%;
    cursor:pointer;
    font-size:22px;
}

.lightbox-prev{ left:-22px; }
.lightbox-next{ right:-22px; }

.lightbox-prev:hover,
.lightbox-next:hover{
    background:#ff4d8d;
    color:white;
}
/* Make gallery cards clickable */
.gallery-item{
    cursor:pointer;
}

.gallery-item img{
    transition:transform .4s ease;
}

.gallery-item:hover img{
    transform:scale(1.04);
}
/* ======================================
   LOVE LETTERS
====================================== */

.letters-section{
    padding:140px 0;
    background:
        linear-gradient(to bottom,#fffaf8,#fff3f6);
}

.letters-grid{
    display:grid;
    gap:34px;
    max-width:760px;
    margin:70px auto 0;
}

.letter-card{
    cursor:pointer;
    perspective:1200px;
}

/* Envelope */

.letter-envelope{
    background:linear-gradient(135deg,#fff6f7,#ffe8ef);
    border:1px solid #ffd6e3;
    border-radius:26px;
    padding:34px;
    text-align:center;
    position:relative;
    transition:.35s ease;
    box-shadow:0 15px 40px rgba(255,77,141,.08);
}

.letter-envelope:hover{
    transform:translateY(-6px);
}

.seal{
    position:absolute;
    top:-16px;
    right:28px;
    background:#ff4d8d;
    color:white;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:18px;
    box-shadow:0 10px 25px rgba(255,77,141,.35);
}

.letter-envelope h3{
    font-family:'Playfair Display',serif;
    font-size:34px;
    margin-bottom:10px;
}

.letter-envelope p{
    color:#888;
}

/* Hidden Letter */

.letter-paper{
    display:none;
    margin-top:18px;
    background:#fffdf9;
    padding:38px;
    border-radius:24px;
    border:1px solid #f2e5d9;
    box-shadow:0 20px 50px rgba(0,0,0,.06);
    animation:letterOpen .45s ease;
}

.letter-paper p{
    line-height:2;
    color:#555;
    margin-bottom:18px;
    font-size:17px;
}

.letter-date{
    color:#ff4d8d;
    font-weight:600;
    letter-spacing:2px;
    margin-bottom:22px;
}

.signature{
    margin-top:30px;
    font-family:'Caveat',cursive;
    font-size:30px !important;
    color:#222;
}

/* Open state */

.letter-card.open .letter-paper{
    display:block;
}

.letter-card.open .letter-envelope{
    background:linear-gradient(135deg,#fff,#fff7fb);
}

/* Animation */

@keyframes letterOpen{
    from{
        opacity:0;
        transform:translateY(-18px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ==========================================
   WHY I LOVE YOU — FINAL
========================================== */

.reasons-section{
    padding:140px 0;
    background:linear-gradient(180deg,#fffaf8,#fff4f8);
    position:relative;
    overflow:hidden;
}

.reasons-section::before{
    content:"♡";
    position:absolute;
    top:70px;
    right:8%;
    font-size:150px;
    color:#ffd9e6;
    opacity:.28;
    font-family:"Playfair Display", serif;
    pointer-events:none;
}

/* Grid */

.reasons-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:28px;
    margin-top:70px;
}

/* =====================================
   LOVE ENVELOPE CARD
===================================== */

.envelope-card{
    background:#fff8fb;
    border:1px solid #ffd7e6;
    border-radius:30px;
    overflow:hidden;
    cursor:pointer;
    transition:.45s ease;
    box-shadow:0 12px 32px rgba(255,77,141,.08);
}

.envelope-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 50px rgba(255,77,141,.14);
}

/* ---------------- Front Envelope ---------------- */

.envelope-front{
    position:relative;
    height:210px;
    padding:32px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    background:#fff7fb;
    overflow:hidden;
}

/* Pink folded flap */

.envelope-front::before{
    content:"";
    position:absolute;
    inset:0 auto auto 0;
    width:100%;
    height:120px;
    background:#fde5ef;
    clip-path:polygon(0 0,100% 0,50% 78%);
    z-index:1;
}

/* Seal */

.envelope-seal{
    position:absolute;
    top:20px;
    right:20px;
    width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    background:#ff4d8d;
    color:#fff;
    font-size:22px;

    box-shadow:0 10px 24px rgba(255,77,141,.25);
    z-index:5;
}

.envelope-front h3,
.envelope-front p{
    position:relative;
    z-index:2;
}

.envelope-front h3{
    font-family:"Playfair Display", serif;
    font-size:38px;
    color:#ff4d8d;
    margin-bottom:10px;
}

.envelope-front p{
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#999;
}

/* ---------------- Letter Paper ---------------- */

.envelope-letter{
    max-height:0;
    opacity:0;
    overflow:hidden;

    transform:translateY(-35px);

    padding:0 34px;

    background:#fffdfb;
    border-top:1px dashed #ffd6e5;

    background-image:
      repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 35px,
        rgba(255,120,170,.08) 36px
      );

    transition:
      max-height .8s ease,
      opacity .5s ease,
      padding .5s ease,
      transform .5s ease;
}

/* Open animation */

.envelope-card.open .envelope-front{
    border-bottom:1px dashed #ffd6e5;
}

.envelope-card.open .envelope-letter{
    max-height:700px;
    opacity:1;
    padding:30px 34px 36px;
    transform:translateY(0);
}

/* Heart divider */

.envelope-letter::before{
    content:"♡";
    display:block;
    text-align:center;
    color:#ff7ca8;
    font-size:28px;
    margin-bottom:20px;
}

/* Header inside paper */

.letter-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;

    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#b57b92;
}

/* Letter text */

.envelope-letter p{
    font-family:"Caveat", cursive;
    font-size:26px;
    line-height:1.75;
    color:#5d4b53;
    margin-bottom:20px;
}

/* Signature */

.letter-signature{
    margin-top:26px;
    text-align:right;

    font-family:"Caveat", cursive;
    font-size:34px;
    color:#ff4d8d;
}

.letter-signature strong{
    font-weight:400;
}

/* Remove old flip cards */

.reason-card,
.reason-front,
.reason-back{
    display:none;
}
/* ======================================
   BEAUTIFUL LOVE LETTER PAPER
====================================== */

.envelope-letter{
    background:
      repeating-linear-gradient(
        to bottom,
        #fffdfb 0px,
        #fffdfb 33px,
        rgba(255,120,170,.08) 34px
      );

    border-top:1px dashed #ffd0e2;
}

.letter-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:26px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#b57b92;
}

.envelope-letter p{
    font-family:"Caveat", cursive;
    font-size:26px;
    line-height:1.7;
    color:#5d4b53;
    margin-bottom:18px;
}

.letter-signature{
    margin-top:26px;
    text-align:right;
    font-family:"Caveat",cursive;
    font-size:32px;
    color:#ff4d8d;
}

.letter-signature strong{
    font-weight:400;
}

/* Small finishing animation */
.envelope-card.open .envelope-letter{
    transform:translateY(0);
}

/* ==========================================
   FOREVER MUSIC PLAYER
========================================== */

.music-player{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    width:min(560px, calc(100% - 48px));
    max-width:560px;

    width:min(92%,540px);

    background:rgba(255,255,255,.85);
    backdrop-filter:blur(18px);

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

    border-radius:30px;

    padding:14px 18px;

    display:flex;
    align-items:center;
    gap:16px;

    box-shadow:
      0 18px 50px rgba(0,0,0,.08),
      0 8px 24px rgba(255,77,141,.12);

    z-index:9999;
}

/* Album cover */

.music-cover{

    width:66px;
    height:66px;

    border-radius:18px;
    overflow:hidden;

    flex-shrink:0;
}

.music-cover img{

    width:100%;
    height:100%;
    object-fit:cover;
    transition:8s linear;

}

/* Rotate while playing */

.music-player.playing .music-cover img{
    animation:spinAlbum 10s linear infinite;
}

@keyframes spinAlbum{

    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}

}

/* Song info */

.music-info{

    flex:1;
    min-width:0;

}

.music-info h4{

    margin:0;
    font-size:18px;
    color:#222;

    font-family:'Playfair Display',serif;
}

.music-info p{

    margin:4px 0 10px;
    color:#777;
    font-size:13px;
}

/* Progress */

#progress{

    width:100%;
    appearance:none;
    height:4px;
    border-radius:10px;
    background:#ffd4e4;
    cursor:pointer;

}

#progress::-webkit-slider-thumb{

    appearance:none;

    width:14px;
    height:14px;

    background:#ff4d8d;
    border-radius:50%;
}

/* Play Button */

.play-button{

    width:56px;
    height:56px;

    border:none;
    border-radius:50%;

    background:#ff4d8d;
    color:white;

    font-size:22px;
    cursor:pointer;

    transition:.3s;
}

.play-button:hover{

    transform:scale(1.08);
    box-shadow:0 10px 22px rgba(255,77,141,.25);

}
/* ==========================================
   FOREVER LOADING SCREEN
========================================== */

#loader{
    position:fixed;
    inset:0;
    background:#fffafc;
    z-index:20000;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:opacity .9s ease, visibility .9s ease;
}

#loader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.loader-content{
    text-align:center;
    animation:loaderFade 1.2s ease forwards;
}

.loader-heart{
    font-size:58px;
    color:#ff4d8d;
    animation:heartbeat 1.6s infinite;
}

.loader-content h1{
    font-family:"Playfair Display",serif;
    font-size:54px;
    margin:18px 0 10px;
    color:#222;
}

.loader-content span{
    color:#ff4d8d;
}

.loader-content p{
    letter-spacing:3px;
    color:#888;
    text-transform:uppercase;
    font-size:13px;
}

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

@keyframes loaderFade{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* ======================================
   HERO BUTTON
====================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 34px;
    margin-top:18px;

    background:#ff4d8d;
    color:#fff !important;

    border-radius:999px;
    text-decoration:none;
    font-weight:600;

    transition:.3s ease;
    box-shadow:0 12px 30px rgba(255,77,141,.25);
}

.btn:hover{
    transform:translateY(-3px);
    background:#ff3a7d;
}