/* ============================================================
   BIRTHDAY LOVE WEBSITE — style.css  (Enhanced v2)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600;700&family=Poppins:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --pink:#ffb6c1; --pink-deep:#e8829a; --pink-mid:#f4a0b5;
  --pink-light:#ffe4e8; --navy:#4b2e83; --navy-light:#6b4aa0;
  --navy-deep:#2d1a52; --gold:#f0c060; --dark:#0d0618;
  --dark2:#130920; --dark3:#1a0d2e;
  --glow: 0 0 40px rgba(255,182,193,.35);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--dark);color:#fff;overflow-x:hidden;font-family:'Poppins',sans-serif;cursor:none}
button{font-family:'Poppins',sans-serif;cursor:pointer;border:none}
img{display:block;max-width:100%}

/* ── CURSOR ── */
#cursor{position:fixed;width:24px;height:24px;border:2px solid var(--pink);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;mix-blend-mode:screen}
#cursor-dot{position:fixed;width:5px;height:5px;background:var(--pink);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
body:has(button:hover) #cursor,body:has(a:hover) #cursor{width:44px;height:44px;background:rgba(255,182,193,.1)}

/* ── LOADING ── */
#loading{position:fixed;inset:0;background:var(--dark);z-index:8000;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 1.2s ease}
#loading.fade{opacity:0;pointer-events:none}
.ld-ring{width:80px;height:80px;border:3px solid rgba(255,182,193,.15);border-top-color:var(--pink);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}
.ld-heart{font-size:36px;position:absolute;animation:heartbeat .85s ease-in-out infinite}
.ld-text{font-family:'Dancing Script',cursive;font-size:1.8rem;color:var(--pink);margin-top:10px;opacity:0;animation:fadeInUp .8s ease .5s forwards}
.ld-bar-wrap{width:220px;height:3px;background:rgba(255,182,193,.12);border-radius:2px;margin-top:24px;overflow:hidden}
.ld-bar{height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--navy-light),var(--pink));background-size:200%;animation:barFill 2.7s ease forwards,barShimmer 1.6s linear infinite}
.ld-dots{display:flex;gap:8px;margin-top:20px}
.ld-dot{width:8px;height:8px;background:var(--pink);border-radius:50%;animation:dotBounce .6s ease-in-out infinite}
.ld-dot:nth-child(2){animation-delay:.1s}.ld-dot:nth-child(3){animation-delay:.2s}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:700;padding:13px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(13,6,24,.8);backdrop-filter:blur(24px) saturate(160%);border-bottom:1px solid rgba(255,182,193,.1);transition:background .4s}
nav.scrolled{background:rgba(13,6,24,.96)}
.nav-logo{font-family:'Dancing Script',cursive;font-size:1.45rem;color:var(--pink);cursor:pointer;white-space:nowrap;text-shadow:0 0 20px rgba(255,182,193,.5)}
.nav-links{display:flex;gap:5px;flex-wrap:wrap}
.nav-link{padding:5px 13px;border-radius:20px;font-size:.76rem;font-weight:500;border:1px solid rgba(255,182,193,.2);color:rgba(255,255,255,.7);background:transparent;transition:all .3s;white-space:nowrap}
.nav-link:hover,.nav-link.active{background:var(--pink);color:var(--dark);border-color:var(--pink);box-shadow:0 0 16px rgba(255,182,193,.4)}
.music-btn{background:rgba(255,182,193,.1);border:1px solid var(--pink);color:var(--pink);border-radius:20px;padding:5px 16px;font-size:.82rem;display:flex;align-items:center;gap:6px;transition:all .3s;white-space:nowrap}
.music-btn:hover,.music-btn.playing{background:var(--pink);color:var(--dark);box-shadow:0 0 20px rgba(255,182,193,.4)}
.nav-right{display:flex;align-items:center;gap:10px}

/* ── SHARED ── */
section{position:relative;overflow:hidden}
.section-inner{max-width:1100px;margin:0 auto;padding:110px 24px 70px}
.section-title{font-family:'Dancing Script',cursive;font-size:clamp(2rem,5vw,3.4rem);text-align:center;margin-bottom:14px;background:linear-gradient(135deg,var(--pink-light),var(--pink),var(--pink-mid));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 20px rgba(255,182,193,.3))}
.section-divider{width:90px;height:3px;margin:0 auto 52px;background:linear-gradient(90deg,transparent,var(--pink),transparent);border-radius:2px;position:relative}
.section-divider::after{content:'💕';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.8rem}
.section-hint{text-align:center;color:rgba(255,255,255,.4);font-size:.83rem;margin-top:-36px;margin-bottom:36px}

/* glass */
.glass{background:rgba(255,255,255,.04);backdrop-filter:blur(22px);border:1px solid rgba(255,182,193,.15);border-radius:20px;transition:border-color .4s,background .4s,transform .4s,box-shadow .4s}
.glass:hover{border-color:rgba(255,182,193,.4);background:rgba(255,255,255,.07);box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 30px rgba(255,182,193,.1)}

/* orbs */
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;animation:shimmer 5s ease-in-out infinite}

/* stars */
.stars-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.star{position:absolute;border-radius:50%;background:#fff;animation:shimmer ease-in-out infinite}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .85s ease,transform .85s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}.reveal.d4{transition-delay:.48s}

/* hearts bg */
#hearts-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fheart{position:absolute;bottom:0;pointer-events:none;animation:floatUp linear infinite;opacity:0}
#particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pdot{position:absolute;border-radius:50%;animation:particleDrift linear infinite}

/* ── HERO ── */
#hero{min-height:100vh;background:radial-gradient(ellipse at 60% 40%,#2d1a52 0%,#0d0618 65%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 24px 70px}
.hero-title{font-family:'Dancing Script',cursive;font-size:clamp(2.8rem,7vw,5.5rem);line-height:1.15;margin-bottom:10px;background:linear-gradient(135deg,#ffe4e8,var(--pink),#c990b8,var(--pink));background-size:300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:0;animation:fadeInDown 1s ease .6s forwards,barShimmer 6s linear 1.6s infinite;filter:drop-shadow(0 0 30px rgba(255,182,193,.4))}
.hero-sub{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(1rem,2.5vw,1.35rem);color:rgba(255,182,193,.8);margin-bottom:38px;opacity:0;animation:fadeInDown 1s ease .95s forwards}
.hero-quote{max-width:530px;font-size:.93rem;color:rgba(255,255,255,.6);line-height:1.85;font-style:italic;border-left:3px solid var(--pink);padding-left:22px;text-align:left;margin-bottom:52px;opacity:0;animation:fadeInUp 1s ease 1.25s forwards;position:relative}
.hero-quote::before{content:'"';font-family:'Dancing Script',cursive;font-size:4rem;color:rgba(255,182,193,.15);position:absolute;top:-20px;left:-10px;line-height:1}
.hero-btn{padding:16px 44px;background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:var(--dark);border-radius:50px;font-size:1rem;font-weight:600;box-shadow:0 0 36px rgba(255,182,193,.45),inset 0 1px 0 rgba(255,255,255,.3);opacity:0;animation:fadeInUp 1s ease 1.55s forwards;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.hero-btn::after{content:'';position:absolute;inset:-50%;background:rgba(255,255,255,.15);transform:rotate(30deg) translateX(-200%);transition:transform .5s ease}
.hero-btn:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 0 60px rgba(255,182,193,.65)}
.hero-btn:hover::after{transform:rotate(30deg) translateX(300%)}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;color:rgba(255,182,193,.4);font-size:.74rem;letter-spacing:1.5px;animation:shimmer 2.5s ease-in-out infinite}
.scroll-arrow{animation:bounce 1.5s ease-in-out infinite}

/* ── WISHES ── */
#wishes{background:linear-gradient(180deg,#0d0618 0%,#130920 100%)}
.wishes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin-bottom:72px}
.wish-card{padding:32px;position:relative;overflow:hidden}
.wish-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--pink),transparent);opacity:0;transition:opacity .4s}
.wish-card:hover{transform:translateY(-9px)}
.wish-card:hover::before{opacity:1}
.wish-emoji{font-size:2.5rem;margin-bottom:14px;display:block;animation:heartbeat 3s ease-in-out infinite}
.wish-title{font-family:'Dancing Script',cursive;font-size:1.55rem;color:var(--pink);margin-bottom:11px;text-shadow:0 0 20px rgba(255,182,193,.3)}
.wish-text{font-size:.9rem;color:rgba(255,255,255,.7);line-height:1.75}
.wish-card:hover .wish-emoji{animation:heartbeat .6s ease-in-out infinite}

/* timeline */
.tl-label{font-family:'Dancing Script',cursive;font-size:1.9rem;text-align:center;color:var(--pink);margin-bottom:12px;text-shadow:0 0 20px rgba(255,182,193,.3)}
.timeline{position:relative;padding:10px 0}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,var(--pink) 20%,var(--pink) 80%,transparent);transform:translateX(-50%);box-shadow:0 0 10px rgba(255,182,193,.3)}
.tl-item{display:flex;align-items:center;gap:30px;margin-bottom:54px}
.tl-item:nth-child(even){flex-direction:row-reverse}
.tl-body{flex:1;padding:26px;border-radius:20px}
.tl-item:nth-child(odd) .tl-body{text-align:right}
.tl-item:nth-child(even) .tl-body{text-align:left}
.tl-dot{width:54px;height:54px;min-width:54px;background:linear-gradient(135deg,var(--pink),var(--navy-light));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 0 24px rgba(255,182,193,.5),0 0 0 4px rgba(255,182,193,.1);position:relative;z-index:1;transition:transform .3s}
.tl-item:hover .tl-dot{transform:scale(1.15)}
.tl-date{font-size:.74rem;color:var(--pink);font-weight:500;letter-spacing:1.2px;margin-bottom:8px;text-transform:uppercase}
.tl-title{font-family:'Dancing Script',cursive;font-size:1.35rem;color:#fff;margin-bottom:7px}
.tl-desc{font-size:.85rem;color:rgba(255,255,255,.62);line-height:1.65}

/* ── GALLERY ── */
#gallery{background:linear-gradient(180deg,#130920 0%,#0f0820 100%)}
.gallery-grid{columns:3;column-gap:16px}
.g-item{break-inside:avoid;margin-bottom:16px;border-radius:16px;overflow:hidden;position:relative;cursor:pointer;transition:transform .4s,box-shadow .4s}
.g-item:hover{transform:scale(1.025);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 2px rgba(255,182,193,.3)}
.g-item:hover .g-overlay{opacity:1}
.g-item img{width:100%;object-fit:cover;display:block;border-radius:16px;transition:transform .5s}
.g-item:hover img{transform:scale(1.05)}
.g-placeholder{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:16px;padding:24px;font-size:.82rem;color:rgba(255,255,255,.5);text-align:center}
.g-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,6,24,.95) 0%,transparent 55%);opacity:0;transition:opacity .35s;border-radius:16px;display:flex;align-items:flex-end;padding:16px}
.g-overlay-text{font-family:'Dancing Script',cursive;font-size:1.1rem;color:#fff}

/* lightbox */
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.97);z-index:800;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(10px)}
#lightbox.open{display:flex;animation:fadeIn .3s ease}
.lb-close{position:fixed;top:18px;right:20px;font-size:1.4rem;color:var(--pink);z-index:801;background:rgba(255,182,193,.1);border:1px solid rgba(255,182,193,.3);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;transition:all .3s}
.lb-close:hover{background:var(--pink);color:var(--dark);transform:rotate(90deg)}
#lb-inner{max-width:90vw;max-height:88vh;border-radius:16px;overflow:hidden}
#lb-inner img{max-width:88vw;max-height:84vh;object-fit:contain;border-radius:14px;display:block}

/* ── VIDEOS ── */
#videos{background:linear-gradient(180deg,#0f0820 0%,#0d0618 100%)}
.videos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:28px}
.v-card{overflow:hidden;transition:transform .4s,border-color .4s,box-shadow .4s}
.v-card:hover{transform:translateY(-7px);border-color:rgba(255,182,193,.45);box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 30px rgba(255,182,193,.1)}
.v-thumb{aspect-ratio:16/9;position:relative;cursor:pointer;overflow:hidden;background:#1a0d2e;display:flex;align-items:center;justify-content:center}
.v-thumb::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.25);transition:background .3s;z-index:1}
.v-thumb:hover::before{background:rgba(0,0,0,.05)}
.v-thumb video,.v-thumb iframe{width:100%;height:100%;object-fit:cover}
.v-ripple{position:absolute;width:68px;height:68px;border:2px solid var(--pink);border-radius:50%;animation:rippleOut 2s ease-in-out infinite;z-index:2}
.v-play{width:68px;height:68px;position:relative;z-index:3;background:rgba(255,182,193,.18);border:2px solid var(--pink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all .35s;backdrop-filter:blur(10px);color:#fff}
.v-thumb:hover .v-play{background:var(--pink);transform:scale(1.12);box-shadow:0 0 40px rgba(255,182,193,.6)}
.v-info{padding:22px 24px}
.v-title{font-family:'Dancing Script',cursive;font-size:1.35rem;color:var(--pink);margin-bottom:8px;text-shadow:0 0 15px rgba(255,182,193,.2)}
.v-desc{font-size:.85rem;color:rgba(255,255,255,.62);line-height:1.65}
.v-date{font-size:.75rem;color:rgba(255,182,193,.45);margin-top:10px}
.v-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:.72rem;font-weight:500;letter-spacing:.5px;background:rgba(255,182,193,.1);color:var(--pink);border:1px solid rgba(255,182,193,.22);margin-top:10px}

/* ── LETTER ── */
#letter{background:linear-gradient(180deg,#0d0618 0%,#130920 100%)}
.letter-wrap{max-width:720px;margin:0 auto;position:relative}
.letter-paper{background:linear-gradient(160deg,#fdf7ef 0%,#fff9f2 50%,#fdf3eb 100%);border-radius:14px;padding:64px;color:#3a2515;box-shadow:0 50px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,182,193,.3),inset 0 0 80px rgba(255,182,193,.06);position:relative;overflow:hidden;animation:glowPulse 3.5s ease-in-out infinite}
.letter-paper::before{content:'';position:absolute;inset:60px;background-image:repeating-linear-gradient(transparent,transparent 27px,rgba(75,46,131,.07) 27px,rgba(75,46,131,.07) 28px);pointer-events:none}
.letter-paper::after{content:'';position:absolute;top:0;left:44px;right:44px;height:4px;background:linear-gradient(90deg,transparent,var(--pink),transparent)}
.wax-seal{position:absolute;top:24px;right:30px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--pink-deep),#9b3060);display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 4px 14px rgba(155,48,96,.5);animation:heartbeat 2s ease-in-out infinite}
.letter-greeting{font-family:'Dancing Script',cursive;font-size:2.1rem;color:var(--navy);margin-bottom:28px;position:relative;z-index:1}
.letter-body{font-family:'Playfair Display',serif;font-size:.98rem;line-height:2;color:#4a3218;position:relative;z-index:1;margin-bottom:28px}
.letter-body p{margin-bottom:20px}
.letter-body em{font-style:italic;color:#7a3a60}
.hb-wrap{display:flex;justify-content:center;margin:28px 0;position:relative;z-index:1}
.hb-svg{width:220px;overflow:visible}
.hb-path{fill:none;stroke:var(--pink-deep);stroke-width:2.2;stroke-dasharray:550;stroke-dashoffset:550;animation:drawLine 3.5s ease forwards .6s}
.letter-closing{font-family:'Dancing Script',cursive;font-size:1.9rem;color:var(--navy);text-align:right;position:relative;z-index:1}
.letter-closing small{font-size:.9rem;font-family:'Poppins',sans-serif;font-style:italic;display:block;color:rgba(75,46,131,.6);margin-top:4px}
.petal{position:absolute;pointer-events:none;animation:floatUp linear infinite;font-size:1rem;opacity:0}

/* ── SURPRISE ── */
#surprise{min-height:100vh;background:radial-gradient(ellipse at 50% 50%,#2d1a52 0%,#0d0618 70%);display:flex;align-items:center;justify-content:center}
.surprise-inner{text-align:center;padding:80px 24px}
.surprise-pre{font-size:.78rem;letter-spacing:3px;color:rgba(255,182,193,.5);text-transform:uppercase;margin-bottom:14px}
.surprise-title{font-family:'Dancing Script',cursive;font-size:clamp(2rem,5vw,3.2rem);color:var(--pink);margin-bottom:48px;display:block;text-shadow:0 0 30px rgba(255,182,193,.4)}
.cd-grid{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:62px}
.cd-box{min-width:105px;padding:24px 18px;text-align:center;animation:countBeat 2s ease-in-out infinite;position:relative;overflow:hidden}
.cd-box::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,182,193,.05),transparent);border-radius:20px}
.cd-box:nth-child(2){animation-delay:.25s}.cd-box:nth-child(3){animation-delay:.5s}.cd-box:nth-child(4){animation-delay:.75s}
.cd-num{font-size:clamp(2.2rem,6vw,3.6rem);font-weight:600;display:block;line-height:1;background:linear-gradient(135deg,var(--pink-light),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 15px rgba(255,182,193,.5))}
.cd-label{font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,182,193,.55);margin-top:8px}
.icon-strip{display:flex;gap:18px;justify-content:center;font-size:1.9rem;margin-bottom:38px;animation:shimmer 3s ease-in-out infinite}
.final-love{font-family:'Dancing Script',cursive;font-size:clamp(2.4rem,7vw,4.5rem);line-height:1.15;margin-bottom:22px;background:linear-gradient(135deg,var(--pink-light),var(--pink),var(--gold),var(--pink));background-size:300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:letterFloat 3.5s ease-in-out infinite,barShimmer 5s linear infinite;filter:drop-shadow(0 0 30px rgba(255,182,193,.4))}
.final-sub{font-size:1.05rem;color:rgba(255,255,255,.68);max-width:500px;margin:0 auto 48px;line-height:1.85}
.final-sub strong{color:var(--pink);text-shadow:0 0 15px rgba(255,182,193,.4)}
.celebrate-btn{padding:18px 52px;background:linear-gradient(135deg,var(--pink),#c860a0,var(--navy-light));background-size:200%;color:#fff;border-radius:50px;font-size:1.05rem;font-weight:600;box-shadow:0 0 44px rgba(255,182,193,.4);transition:all .35s;position:relative;overflow:hidden}
.celebrate-btn:hover{transform:translateY(-5px) scale(1.06);box-shadow:0 0 70px rgba(255,182,193,.65);background-position:100%}
.celebrate-btn::after{content:'';position:absolute;inset:-50%;background:rgba(255,255,255,.12);transform:rotate(30deg) translateX(-200%);transition:transform .6s ease}
.celebrate-btn:hover::after{transform:rotate(30deg) translateX(300%)}

/* ── ANIMATIONS ── */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes heartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes shimmer{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes barFill{from{width:0}to{width:100%}}
@keyframes barShimmer{from{background-position:0%}to{background-position:200%}}
@keyframes floatUp{0%{transform:translateY(0) rotate(0deg);opacity:.9}100%{transform:translateY(-105vh) rotate(400deg);opacity:0}}
@keyframes particleDrift{0%{transform:translateY(100vh);opacity:0}8%{opacity:.4}92%{opacity:.4}100%{transform:translateY(-120px);opacity:0}}
@keyframes letterFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 30px rgba(255,182,193,.25),inset 0 0 30px rgba(255,182,193,.04),0 50px 100px rgba(0,0,0,.6)}50%{box-shadow:0 0 60px rgba(255,182,193,.5),inset 0 0 60px rgba(255,182,193,.09),0 50px 100px rgba(0,0,0,.6)}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes countBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(105vh) rotate(720deg);opacity:0}}
@keyframes rippleOut{0%{transform:scale(0);opacity:.8}100%{transform:scale(3.5);opacity:0}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes dotBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .gallery-grid{columns:2}
  .timeline::before{left:27px}
  .tl-item,.tl-item:nth-child(even){flex-direction:column;align-items:flex-start}
  .tl-body,.tl-item:nth-child(odd) .tl-body,.tl-item:nth-child(even) .tl-body{text-align:left}
  .letter-paper{padding:34px 26px}
  .nav-links{gap:3px}
  .nav-link{padding:4px 10px;font-size:.72rem}
  .cd-box{min-width:82px;padding:18px 12px}
}
@media(max-width:480px){
  .gallery-grid{columns:1}
  .wishes-grid{grid-template-columns:1fr}
  .videos-grid{grid-template-columns:1fr}
  .cd-grid{gap:10px}
  .cd-box{min-width:70px;padding:14px 9px}
  nav{padding:11px 14px}
  .nav-logo{font-size:1.2rem}
}

/* ══════════════════════════════════════════════════════════
   DROP ZONE — Photo & Video Upload Area
   ══════════════════════════════════════════════════════════ */
.drop-zone {
  border: 2px dashed rgba(255,182,193,.35);
  border-radius: 24px;
  padding: 52px 32px;
  text-align: center;
  cursor: pointer;
  transition: all .35s;
  background: rgba(255,182,193,.03);
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
}
.drop-zone::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,182,193,.06), transparent 70%);
  pointer-events: none;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--pink);
  background: rgba(255,182,193,.07);
  transform: scale(1.01);
  box-shadow: 0 0 60px rgba(255,182,193,.15), inset 0 0 40px rgba(255,182,193,.05);
}
.drop-zone.drag-over {
  border-style: solid;
  border-color: var(--pink);
  animation: glowPulse .8s ease-in-out infinite;
}
.drop-icon {
  font-size: 3.5rem;
  margin-bottom: 14px;
  animation: heartbeat 3s ease-in-out infinite;
}
.drop-title {
  font-family: 'Dancing Script', cursive;
  font-size: 1.8rem;
  color: var(--pink);
  margin-bottom: 8px;
  text-shadow: 0 0 20px rgba(255,182,193,.3);
}
.drop-sub {
  font-size: .88rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 24px;
  line-height: 1.6;
}
.drop-btn {
  padding: 12px 32px;
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color: var(--dark);
  border-radius: 30px;
  font-size: .9rem;
  font-weight: 600;
  transition: all .3s;
  box-shadow: 0 0 24px rgba(255,182,193,.3);
  display: inline-block;
  margin-bottom: 16px;
}
.drop-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 40px rgba(255,182,193,.5);
}
.drop-hint {
  font-size: .75rem;
  color: rgba(255,182,193,.4);
  letter-spacing: .5px;
}
.clear-btn {
  padding: 10px 26px;
  background: rgba(255,100,100,.1);
  border: 1px solid rgba(255,100,100,.25);
  color: rgba(255,150,150,.8);
  border-radius: 20px;
  font-size: .82rem;
  transition: all .3s;
}
.clear-btn:hover {
  background: rgba(255,100,100,.2);
  border-color: rgba(255,100,100,.5);
}

/* ══════════════════════════════════════════════════════════
   FLOATING PHOTO FRAMES
   ══════════════════════════════════════════════════════════ */
.frames-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 0 40px;
  min-height: 0;
}
.frames-stage:empty { display: none; }

.photo-frame {
  width: var(--size, 240px);
  flex-shrink: 0;
  position: relative;
  animation: frameFloat 1s ease both;
  transform-origin: center bottom;
}
.photo-frame:hover { z-index: 10; }
.photo-frame:hover .frame-border {
  transform: rotate(0deg) scale(1.06);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(255,182,193,.4);
}

.frame-border {
  border-radius: 14px;
  padding: 10px 10px 36px;
  transform: rotate(var(--rot, 0deg));
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1);
  cursor: pointer;
}
.frame-inner {
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  line-height: 0;
}
.frame-inner img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform .4s;
}
.photo-frame:hover .frame-inner img { transform: scale(1.04); }

.frame-caption {
  text-align: center;
  margin-top: 8px;
  font-family: 'Dancing Script', cursive;
  font-size: .95rem;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.frame-delete {
  position: absolute;
  top: -8px; right: -8px;
  width: 26px; height: 26px;
  background: rgba(255,80,80,.85);
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 50%;
  font-size: .65rem;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: all .2s;
}
.photo-frame:hover .frame-delete { display: flex; }
.frame-delete:hover { background: #ff3333; transform: scale(1.15); }

@keyframes frameFloat {
  0%   { opacity: 0; transform: translateY(40px) rotate(var(--rot,0deg)) scale(.8); }
  60%  { opacity: 1; transform: translateY(-8px) rotate(var(--rot,0deg)) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--rot,0deg)) scale(1); }
}

/* ══════════════════════════════════════════════════════════
   VIDEO CARDS GRID
   ══════════════════════════════════════════════════════════ */
.video-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.vcard {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,182,193,.15);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .4s, border-color .4s, box-shadow .4s;
}
.vcard:hover {
  transform: translateY(-7px);
  border-color: rgba(255,182,193,.45);
  box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 30px rgba(255,182,193,.1);
}
.vcard-thumb {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.vcard-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
  z-index: 2;
}
.vcard-thumb:hover .vcard-overlay { background: rgba(0,0,0,.05); }
.vcard-ripple {
  position: absolute;
  width: 64px; height: 64px;
  border: 2px solid var(--pink); border-radius: 50%;
  animation: rippleOut 2s ease-in-out infinite;
}
.vcard-play {
  width: 64px; height: 64px; position: relative; z-index: 1;
  background: rgba(255,182,193,.18);
  border: 2px solid var(--pink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
  transition: all .35s; backdrop-filter: blur(10px);
}
.vcard-thumb:hover .vcard-play {
  background: var(--pink);
  transform: scale(1.12);
  box-shadow: 0 0 40px rgba(255,182,193,.6);
}
.vcard-info {
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.vcard-title {
  font-family: 'Dancing Script', cursive;
  font-size: 1.2rem; color: var(--pink);
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vcard-delete {
  background: rgba(255,100,100,.1);
  border: 1px solid rgba(255,100,100,.2);
  color: rgba(255,150,150,.7);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: .72rem;
  transition: all .3s; white-space: nowrap;
}
.vcard-delete:hover {
  background: rgba(255,100,100,.25);
  border-color: rgba(255,100,100,.5);
  color: #ff9090;
}

/* responsive frames */
@media(max-width: 600px) {
  .frames-stage { gap: 18px; }
  .photo-frame  { width: calc(50% - 9px) !important; }
  .frame-inner img { height: 140px; }
}
@media(max-width: 380px) {
  .photo-frame { width: 100% !important; }
}