/* =========================================================
   HAPPY BIRTHDAY — ROMANTIC SURPRISE WEBSITE
   Fonts: Playfair Display (display), Poppins (body),
          Great Vibes / Dancing Script (handwriting)
   ========================================================= */

:root{
  --pink:        #ff8fc7;
  --pink-soft:   #ffc3e0;
  --purple:      #a78bfa;
  --purple-deep: #7c3aed;
  --gold:        #f5c451;
  --gold-soft:   #ffe9b0;
  --white:       #fff8fb;
  --bg-deep:     #0d0221;
  --bg-mid:      #1a0b2e;
  --bg-soft:     #2a1246;

  --glass-bg:      rgba(255,255,255,0.07);
  --glass-bg-2:    rgba(255,255,255,0.11);
  --glass-border:  rgba(255,255,255,0.18);
  --glass-shadow:  0 8px 32px rgba(0,0,0,0.35);

  --grad-primary: linear-gradient(135deg, var(--pink) 0%, var(--purple) 55%, var(--purple-deep) 100%);
  --grad-gold:    linear-gradient(135deg, var(--gold) 0%, #ffb677 100%);
  --grad-text:    linear-gradient(90deg, var(--pink-soft), var(--gold-soft), var(--purple));

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hand:    'Great Vibes', 'Brush Script MT', cursive;
  --font-hand2:   'Dancing Script', cursive;

  --ease-soft: cubic-bezier(.22,.8,.32,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);

  --nav-h: 78px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
::selection{ background: var(--purple-deep); color:#fff; }

body{
  margin:0;
  min-height:100vh;
  background: var(--bg-deep);
  color: var(--white);
  font-family: var(--font-body);
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none){ body{ cursor:auto; } }

img{ max-width:100%; display:block; }
button{ font-family:inherit; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); margin:0; }
p{ margin:0; }

.reveal-el{ opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.reveal-el.in-view{ opacity:1; transform:translateY(0); }
.reveal-el.zoom-in{ transform:scale(.85); }
.reveal-el.zoom-in.in-view{ transform:scale(1); }
.reveal-el.slide-left{ transform:translateX(-60px); }
.reveal-el.slide-left.in-view{ transform:translateX(0); }
.reveal-el.slide-right{ transform:translateX(60px); }
.reveal-el.slide-right.in-view{ transform:translateX(0); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* =========================== NOISE ============================ */
.noise-overlay{
  position:fixed; inset:0; z-index:9995; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ========================= CURSOR ============================= */
.cursor-dot,.cursor-glow{ position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; transform:translate(-50%,-50%); }
.cursor-dot{ width:9px; height:9px; background:var(--pink); box-shadow:0 0 10px var(--pink); transition:transform .12s var(--ease-soft), background .3s; }
.cursor-glow{ width:34px; height:34px; border:1.5px solid rgba(255,143,199,.55); transition:transform .28s var(--ease-soft), width .3s, height .3s, opacity .3s; }
.cursor-glow.grow{ width:60px; height:60px; background:rgba(255,143,199,.12); }
@media (hover:none){ .cursor-dot,.cursor-glow{ display:none; } }

/* ========================= PRELOADER =========================== */
#preloader{
  position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 30%, #2a1246 0%, #150726 55%, #0d0221 100%);
  transition: opacity .9s var(--ease-soft), visibility .9s;
  gap:14px; text-align:center; padding:20px;
}
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-hearts{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.preloader-hearts span{ position:absolute; bottom:-10%; font-size:22px; opacity:.6; animation:floatUp 6s linear infinite; }
.preloader-hearts span:nth-child(1){ left:10%; animation-delay:0s; }
.preloader-hearts span:nth-child(2){ left:28%; animation-delay:1.1s; font-size:16px; }
.preloader-hearts span:nth-child(3){ left:50%; animation-delay:2s; font-size:26px; }
.preloader-hearts span:nth-child(4){ left:70%; animation-delay:.6s; font-size:18px; }
.preloader-hearts span:nth-child(5){ left:87%; animation-delay:2.6s; font-size:20px; }
@keyframes floatUp{ 0%{ transform:translateY(0) rotate(0); opacity:0; } 10%{ opacity:.7; } 90%{ opacity:.5; } 100%{ transform:translateY(-115vh) rotate(25deg); opacity:0; } }
.preloader-heart{ font-size:52px; animation:heartbeatSoft 1.15s ease-in-out infinite; filter:drop-shadow(0 0 18px rgba(255,143,199,.7)); }
@keyframes heartbeatSoft{ 0%,100%{ transform:scale(1);} 15%{ transform:scale(1.22);} 30%{ transform:scale(.96);} 45%{ transform:scale(1.14);} 60%{ transform:scale(1);} }
.preloader-title{ font-size:clamp(28px,5vw,42px); background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.5px; }
.preloader-quote{ opacity:.75; font-size:14px; letter-spacing:.5px; min-height:20px; }
.preloader-bar-track{ width:min(280px,70vw); height:6px; border-radius:10px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:6px; }
.preloader-bar-fill{ height:100%; width:0%; border-radius:10px; background:var(--grad-primary); box-shadow:0 0 14px var(--pink); transition:width .25s var(--ease-soft); }
.preloader-percent{ font-size:12px; opacity:.6; letter-spacing:1px; }

/* ====================== BACKGROUND LAYERS ======================= */
.bg-layer{ position:fixed; inset:0; z-index:-1; overflow:hidden; }
.bg-sky{
  position:absolute; inset:0;
  background: linear-gradient(180deg, #0d0221 0%, #1a0b2e 40%, #2a1246 75%, #1a0b2e 100%);
  background-size:100% 220%;
  animation:skyDrift 40s ease-in-out infinite alternate;
}
@keyframes skyDrift{ 0%{ background-position:50% 0%; } 100%{ background-position:50% 100%; } }

.bg-aurora{ position:absolute; width:140%; height:60%; left:-20%; filter:blur(60px); opacity:.55; mix-blend-mode:screen; border-radius:50%; }
.aurora-1{ top:-10%; background:radial-gradient(ellipse at center, rgba(255,143,199,.55), transparent 70%); animation:auroraMove1 22s ease-in-out infinite; }
.aurora-2{ top:15%; background:radial-gradient(ellipse at center, rgba(167,139,250,.5), transparent 70%); animation:auroraMove2 28s ease-in-out infinite; }
.aurora-3{ top:40%; background:radial-gradient(ellipse at center, rgba(245,196,81,.32), transparent 70%); animation:auroraMove1 34s ease-in-out infinite reverse; }
@keyframes auroraMove1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(6%,4%) scale(1.15); } }
@keyframes auroraMove2{ 0%,100%{ transform:translate(0,0) scale(1.05); } 50%{ transform:translate(-8%,-3%) scale(1); } }

.bg-moon{
  position:absolute; top:8%; right:9%; width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff9e8, var(--gold-soft) 55%, #e8c877 100%);
  box-shadow:0 0 60px 18px rgba(245,196,81,.45), 0 0 140px 40px rgba(245,196,81,.18);
  animation:moonFloat 12s ease-in-out infinite;
}
.moon-crater{ position:absolute; border-radius:50%; background:rgba(180,150,90,.35); }
.c1{ width:14px; height:14px; top:20px; left:18px; }
.c2{ width:9px; height:9px; top:48px; left:50px; }
.c3{ width:6px; height:6px; top:60px; left:22px; }
@keyframes moonFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
@media (max-width:640px){ .bg-moon{ width:56px; height:56px; top:6%; right:6%; } }

#starCanvas, #fireworksCanvas{ position:absolute; inset:0; width:100%; height:100%; }
#fireworksCanvas{ z-index:3; }

.fireflies-layer,.falling-layer,.balloon-layer,.floating-text-layer{ position:absolute; inset:0; overflow:hidden; z-index:2; }
.firefly{ position:absolute; width:5px; height:5px; border-radius:50%; background:var(--gold-soft); box-shadow:0 0 10px 3px rgba(245,196,81,.8); animation:fireflyMove linear infinite, fireflyGlow 2.4s ease-in-out infinite; }
@keyframes fireflyGlow{ 0%,100%{ opacity:.3;} 50%{ opacity:1;} }
@keyframes fireflyMove{ from{ transform:translate(0,0);} to{ transform:translate(var(--fx,40px),var(--fy,-60px)); } }

.fall-item{ position:absolute; top:-40px; will-change:transform, opacity; user-select:none; pointer-events:none; }

.balloon{ position:absolute; bottom:-140px; width:46px; height:58px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; cursor:pointer; pointer-events:auto; will-change:transform; animation:balloonRise linear forwards; box-shadow:inset -8px -8px 16px rgba(0,0,0,.2), inset 8px 8px 16px rgba(255,255,255,.25); }
.balloon::after{ content:''; position:absolute; left:50%; top:100%; width:1px; height:60px; background:rgba(255,255,255,.35); transform:translateX(-50%); }
.balloon::before{ content:''; position:absolute; left:50%; bottom:-9px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:9px solid inherit; transform:translateX(-50%); }
@keyframes balloonRise{ 0%{ transform:translateY(0) translateX(0) rotate(0deg);} 25%{ transform:translateY(-30vh) translateX(var(--sway,20px)) rotate(6deg);} 50%{ transform:translateY(-60vh) translateX(calc(var(--sway,20px) * -1)) rotate(-6deg);} 75%{ transform:translateY(-95vh) translateX(var(--sway,20px)) rotate(5deg);} 100%{ transform:translateY(-135vh) translateX(0) rotate(0deg);} }
.balloon.pop{ animation:balloonPop .45s var(--ease-soft) forwards !important; }
@keyframes balloonPop{ 0%{ transform:scale(1); opacity:1;} 60%{ transform:scale(1.5); opacity:.6;} 100%{ transform:scale(2.2); opacity:0;} }

.toast-layer{ position:fixed; inset:0; z-index:9990; pointer-events:none; }
.toast{
  position:absolute; padding:10px 18px; border-radius:40px; background:var(--glass-bg-2); backdrop-filter:blur(14px);
  border:1px solid var(--glass-border); font-size:13px; letter-spacing:.3px; box-shadow:var(--glass-shadow);
  animation:toastPop 3.2s var(--ease-soft) forwards;
}
@keyframes toastPop{ 0%{ opacity:0; transform:translateY(14px) scale(.9);} 12%{ opacity:1; transform:translateY(0) scale(1);} 85%{ opacity:1;} 100%{ opacity:0; transform:translateY(-14px) scale(.95);} }

.floating-text-layer span{ position:absolute; font-family:var(--font-hand2); font-size:22px; color:rgba(255,255,255,.16); white-space:nowrap; animation:driftAcross 26s linear forwards; }
@keyframes driftAcross{ from{ transform:translateX(-10vw) translateY(0) rotate(-4deg);} to{ transform:translateX(110vw) translateY(-40px) rotate(3deg);} }

/* ========================= SCROLL PROGRESS ======================= */
.scroll-progress{ position:fixed; top:0; left:0; width:100%; height:3px; z-index:9998; background:rgba(255,255,255,.06); }
#scrollProgressFill{ height:100%; width:0%; background:var(--grad-primary); box-shadow:0 0 10px var(--pink); }

/* ============================ NAV ================================ */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; padding:0 clamp(18px,5vw,60px);
  background:linear-gradient(180deg, rgba(13,2,33,.75), rgba(13,2,33,0));
  backdrop-filter:blur(6px);
  transition:transform .5s var(--ease-soft);
}
.site-nav.nav-hidden{ transform:translateY(-100%); }
.nav-logo{ background:none; border:none; color:var(--white); display:flex; align-items:center; gap:8px; cursor:pointer; padding:8px; border-radius:12px; }
.nav-logo:hover{ background:rgba(255,255,255,.06); }
.logo-heart{ font-size:20px; filter:drop-shadow(0 0 6px var(--pink)); }
.logo-text{ font-family:var(--font-display); font-style:italic; font-size:16px; letter-spacing:.4px; }
.nav-links{ display:flex; gap:28px; font-size:14px; }
.nav-links a{ position:relative; opacity:.85; transition:opacity .3s; padding:6px 2px; }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--grad-gold); transition:width .35s var(--ease-soft); }
.nav-links a:hover{ opacity:1; } .nav-links a:hover::after{ width:100%; }
@media (max-width:820px){ .nav-links{ display:none; } }

/* ========================= MUSIC PLAYER =========================== */
.music-player{ position:fixed; bottom:22px; left:22px; z-index:200; display:flex; align-items:center; gap:10px; }
.music-toggle{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass-bg-2);
  backdrop-filter:blur(14px); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--glass-shadow); transition:transform .3s var(--ease-bounce), box-shadow .3s;
}
.music-toggle:hover{ transform:scale(1.08); box-shadow:0 0 24px rgba(255,143,199,.5); }
.music-visualizer{ display:flex; align-items:flex-end; gap:3px; height:20px; }
.music-visualizer span{ width:3px; background:var(--grad-primary); border-radius:2px; height:4px; transition:height .18s; }
.music-player.playing .music-visualizer span{ animation:vizBar 1s ease-in-out infinite; }
.music-visualizer span:nth-child(1){ animation-delay:.0s;} .music-visualizer span:nth-child(2){ animation-delay:.1s;}
.music-visualizer span:nth-child(3){ animation-delay:.2s;} .music-visualizer span:nth-child(4){ animation-delay:.3s;}
.music-visualizer span:nth-child(5){ animation-delay:.4s;}
@keyframes vizBar{ 0%,100%{ height:4px;} 50%{ height:18px;} }
.music-panel{
  display:flex; flex-direction:column; gap:6px; background:var(--glass-bg-2); border:1px solid var(--glass-border);
  backdrop-filter:blur(14px); padding:10px 14px; border-radius:16px; box-shadow:var(--glass-shadow);
  max-width:0; overflow:hidden; opacity:0; transition:max-width .4s var(--ease-soft), opacity .3s, padding .4s;
}
.music-player:hover .music-panel, .music-player:focus-within .music-panel{ max-width:220px; opacity:1; }
.music-track-name{ font-size:11px; white-space:nowrap; opacity:.8; }
.volume-row{ display:flex; align-items:center; gap:8px; }
.mute-btn{ background:none; border:none; color:var(--white); cursor:pointer; font-size:14px; }
#volumeSlider{ width:110px; accent-color:var(--pink); }
@media (max-width:640px){ .music-panel{ display:none; } }

/* ======================= SCROLL TO TOP =========================== */
.scroll-top-btn{
  position:fixed; bottom:22px; right:22px; z-index:200; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--glass-border); background:var(--glass-bg-2); backdrop-filter:blur(14px); color:var(--white);
  font-size:18px; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(14px);
  transition:opacity .4s, transform .4s var(--ease-soft); box-shadow:var(--glass-shadow);
}
.scroll-top-btn.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.scroll-top-btn:hover{ background:var(--grad-primary); }

/* ============================ BUTTONS ============================= */
.btn{
  border:none; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:15px; letter-spacing:.3px;
  padding:16px 34px; border-radius:50px; display:inline-flex; align-items:center; gap:10px; position:relative;
  transition:transform .35s var(--ease-bounce), box-shadow .35s; overflow:hidden;
}
.btn:active{ transform:scale(.96); }
.btn-primary{ background:var(--grad-primary); color:#fff; box-shadow:0 8px 26px rgba(167,139,250,.4); }
.btn-primary:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 14px 34px rgba(255,143,199,.55); }
.btn-secondary{ background:var(--glass-bg-2); color:var(--white); border:1px solid var(--glass-border); backdrop-filter:blur(10px); }
.btn-secondary:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.4); }
.btn-outline:hover{ background:rgba(255,255,255,.08); }
.btn-gold{ background:var(--grad-gold); color:#2a1246; box-shadow:0 8px 26px rgba(245,196,81,.4); font-weight:700; }
.btn-gold:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 16px 36px rgba(245,196,81,.6); }

/* ============================= HERO =============================== */
.hero{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:120px 20px 60px; position:relative;
}
.hero-glow{ position:absolute; top:30%; left:50%; width:70vw; height:70vw; max-width:800px; max-height:800px;
  transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,143,199,.18), transparent 65%); filter:blur(10px); z-index:-1; }
.hero-eyebrow{ font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-soft); margin-bottom:18px; }
.hero-title{ font-size:clamp(38px,8vw,84px); font-weight:800; line-height:1.15; margin-bottom:22px; }
.type-line{ display:block; min-height:1.2em; }
.gradient-text{ background:var(--grad-text); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradShift 6s linear infinite; }
@keyframes gradShift{ to{ background-position:200% center; } }
.type-caret{ display:inline-block; width:3px; background:var(--pink-soft); margin-left:4px; animation:caretBlink .9s steps(1) infinite; }
@keyframes caretBlink{ 50%{ opacity:0; } }
.hero-subtitle{ max-width:560px; font-size:clamp(15px,2.4vw,19px); opacity:.85; margin-bottom:36px; }
.hero-continue{ margin-bottom:60px; }
.scroll-hint{ position:absolute; bottom:26px; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; opacity:.6; letter-spacing:1px; }
.scroll-hint span{ width:1px; height:34px; background:linear-gradient(var(--pink),transparent); position:relative; overflow:hidden; }
.scroll-hint span::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--white); animation:scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ========================== SECTIONS GENERIC ======================= */
.section{ position:relative; max-width:1180px; margin:0 auto; padding:120px 24px; text-align:center; }
.section-eyebrow{ font-size:13px; letter-spacing:2.5px; text-transform:uppercase; color:var(--pink-soft); margin-bottom:12px; }
.section-title{ font-size:clamp(28px,5vw,46px); margin-bottom:16px; }
.section-sub{ max-width:560px; margin:0 auto 50px; opacity:.78; font-size:15px; }

/* ============================ GLASS CARD BASE ======================= */
.glass{ background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(16px) saturate(140%); box-shadow:var(--glass-shadow); }

/* ============================ BIG HEART ============================= */
.heart-section{ padding-top:80px; }
.big-heart-wrap{ display:flex; justify-content:center; margin:24px 0; }
.big-heart{ position:relative; width:180px; height:160px; }
.heart-shape{
  position:absolute; inset:0; margin:auto; width:120px; height:120px; background:var(--grad-primary); transform:rotate(-45deg);
  animation:heartBeatBig 1.15s ease-in-out infinite; filter:drop-shadow(0 0 30px rgba(255,143,199,.65));
}
.heart-shape::before,.heart-shape::after{ content:''; position:absolute; width:120px; height:120px; background:inherit; border-radius:50%; }
.heart-shape::before{ top:-60px; left:0; }
.heart-shape::after{ left:60px; top:0; }
@keyframes heartBeatBig{ 0%,100%{ transform:rotate(-45deg) scale(1);} 15%{ transform:rotate(-45deg) scale(1.18);} 30%{ transform:rotate(-45deg) scale(.94);} 45%{ transform:rotate(-45deg) scale(1.12);} 60%{ transform:rotate(-45deg) scale(1);} }
.heart-glow{ position:absolute; inset:-40px; border-radius:50%; background:radial-gradient(circle, rgba(255,143,199,.35), transparent 70%); animation:glowPulse 1.15s ease-in-out infinite; }
@keyframes glowPulse{ 0%,100%{ opacity:.5; transform:scale(1);} 30%{ opacity:.9; transform:scale(1.15);} }
.heart-particle{ position:absolute; font-size:14px; pointer-events:none; animation:heartParticleFly 1.4s ease-out forwards; }
@keyframes heartParticleFly{ 0%{ opacity:1; transform:translate(0,0) scale(1);} 100%{ opacity:0; transform:translate(var(--px,0),var(--py,-90px)) scale(.4);} }

/* ============================= TIMELINE ============================= */
.timeline{ position:relative; max-width:820px; margin:0 auto; padding:20px 0; }
.timeline::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:linear-gradient(var(--pink),var(--purple),var(--gold)); transform:translateX(-50%); opacity:.5; }
.timeline-item{ position:relative; width:50%; padding:0 44px 70px; box-sizing:border-box; }
.timeline-item:nth-child(odd){ left:0; text-align:right; }
.timeline-item:nth-child(even){ left:50%; text-align:left; }
.timeline-icon{
  position:absolute; top:0; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:20px; background:var(--glass-bg-2); border:1px solid var(--glass-border); box-shadow:0 0 18px rgba(255,143,199,.4);
}
.timeline-item:nth-child(odd) .timeline-icon{ right:-23px; }
.timeline-item:nth-child(even) .timeline-icon{ left:-23px; }
.timeline-card{ padding:20px 24px; border-radius:20px; }
.timeline-card h3{ font-size:18px; margin-bottom:8px; }
.timeline-card p{ font-size:14px; opacity:.78; }
@media (max-width:720px){
  .timeline::before{ left:22px; }
  .timeline-item, .timeline-item:nth-child(odd), .timeline-item:nth-child(even){ width:100%; left:0; text-align:left; padding:0 0 50px 60px; }
  .timeline-item:nth-child(odd) .timeline-icon,.timeline-item:nth-child(even) .timeline-icon{ left:0; }
}

/* ============================= TICKER ============================= */
.ticker-section{ display:flex; justify-content:center; padding:20px 20px 90px; }
.ticker-glass{ display:flex; align-items:center; gap:14px; padding:18px 30px; border-radius:50px; }
.ticker-heart{ animation:heartbeatSoft 1.2s ease-in-out infinite; }
.ticker-text{ font-size:16px; font-weight:500; min-width:220px; text-align:center; }

/* ============================= GALLERY ============================= */
.masonry-grid{ column-count:4; column-gap:18px; }
@media (max-width:1080px){ .masonry-grid{ column-count:3; } }
@media (max-width:760px){ .masonry-grid{ column-count:2; } }
@media (max-width:460px){ .masonry-grid{ column-count:1; } }
.gallery-tile{
  break-inside:avoid; margin-bottom:18px; border-radius:22px; overflow:hidden; position:relative; cursor:pointer;
  transform-style:preserve-3d; transition:transform .25s var(--ease-soft), box-shadow .25s;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.gallery-tile-inner{ aspect-ratio: var(--ar, 1); display:flex; align-items:flex-end; padding:16px; position:relative; }
.gallery-tile-inner::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.65) 100%); }
.gallery-emoji{ position:absolute; top:16px; left:16px; font-size:26px; z-index:2; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.gallery-caption{ position:relative; z-index:2; font-size:14px; font-weight:600; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.gallery-tile:hover{ box-shadow:0 20px 40px rgba(255,143,199,.35); }
.gallery-sparkle{ position:absolute; width:5px; height:5px; background:#fff; border-radius:50%; box-shadow:0 0 8px 2px #fff; pointer-events:none; animation:sparkleFade .8s ease-out forwards; z-index:3; }
@keyframes sparkleFade{ 0%{ opacity:1; transform:scale(1);} 100%{ opacity:0; transform:scale(0) translateY(-20px);} }

.lightbox{
  position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:30px;
  background:rgba(10,2,20,.85); backdrop-filter:blur(10px); opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-card{ max-width:460px; width:100%; border-radius:26px; padding:40px 30px; text-align:center; transform:scale(.85); transition:transform .4s var(--ease-bounce); }
.lightbox.open .lightbox-card{ transform:scale(1); }
.lightbox-card .big-emoji{ font-size:64px; margin-bottom:16px; }
.lightbox-close{ position:absolute; top:24px; right:26px; background:var(--glass-bg-2); border:1px solid var(--glass-border); color:#fff; width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:16px; }

/* ============================ FLIP CARDS ============================ */
.flip-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px; }
.flip-card{ perspective:1200px; height:230px; }
.flip-card-inner{ position:relative; width:100%; height:100%; transition:transform .7s var(--ease-bounce); transform-style:preserve-3d; cursor:pointer; }
.flip-card.flipped .flip-card-inner{ transform:rotateY(180deg); }
.flip-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px; text-align:center; }
.flip-front{ gap:14px; }
.flip-front .emoji{ font-size:44px; }
.flip-front h3{ font-size:17px; }
.flip-hint{ font-size:11px; opacity:.55; letter-spacing:1px; text-transform:uppercase; }
.flip-back{ transform:rotateY(180deg); background:var(--grad-primary); }
.flip-back p{ font-size:14px; line-height:1.6; }
.flip-card:hover .flip-card-inner{ box-shadow:0 18px 40px rgba(167,139,250,.4); }

/* ============================ LOVE LETTER ============================ */
.envelope-wrap{ display:flex; justify-content:center; perspective:1600px; }
.envelope{ position:relative; width:min(360px,86vw); height:240px; cursor:pointer; outline:none; }
.envelope-back{ position:absolute; inset:0; border-radius:12px; background:linear-gradient(135deg,#3a1a5c,#5a2a7c); box-shadow:0 20px 50px rgba(0,0,0,.5); }
.letter-paper{
  position:absolute; left:6%; right:6%; bottom:8px; height:0; max-height:90%; overflow:hidden; border-radius:8px;
  background:#fdf6ea; color:#3a2a4a; box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:height 1s var(--ease-soft), transform 1s var(--ease-soft), bottom 1s var(--ease-soft);
  z-index:1; transform:translateY(0);
}
.letter-content{ padding:26px 24px 34px; font-family:var(--font-hand2); font-size:17px; line-height:1.85; text-align:left; }
.letter-content p{ margin-bottom:14px; }
.letter-greeting{ font-family:var(--font-hand); font-size:30px !important; color:#7c3aed; }
.letter-closing{ font-style:italic; font-weight:600; }
.letter-signature{ font-family:var(--font-hand); font-size:26px !important; color:#c2185b; }
.envelope-front{ position:absolute; inset:0; border-radius:12px; background:linear-gradient(135deg,#ff8fc7,#c084fc); z-index:2; transition:transform 1s var(--ease-soft); transform-origin:bottom; box-shadow:0 16px 40px rgba(0,0,0,.4); display:flex; align-items:flex-end; justify-content:center; padding-bottom:16px; }
.envelope-flap{ position:absolute; top:0; left:0; right:0; height:60%; background:linear-gradient(135deg,#ffb6da,#d8b4fe); clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:top; transition:transform 1s var(--ease-soft); z-index:3; }
.envelope-seal{ position:absolute; top:38%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:var(--grad-gold); display:flex; align-items:center; justify-content:center; color:#7c1d3a; font-size:20px; box-shadow:0 4px 14px rgba(0,0,0,.35); z-index:4; transition:opacity .4s, transform .4s; }
.envelope-label{ color:#fff; font-size:13px; letter-spacing:2px; text-transform:uppercase; opacity:.9; }
.envelope.open .envelope-flap{ transform:rotateX(180deg); opacity:0; }
.envelope.open .envelope-seal{ opacity:0; transform:translate(-50%,-50%) scale(0); }
.envelope.open .envelope-front{ transform:translateY(30px); opacity:.15; pointer-events:none; }
.envelope.open .letter-paper{ height:420px; bottom:-220px; transform:translateY(-90px); overflow-y:auto; }
@media (max-width:600px){ .envelope.open .letter-paper{ height:360px; bottom:-180px; } }

/* ============================ QUOTES ============================ */
.quote-carousel{ max-width:640px; margin:0 auto; padding:50px 40px; border-radius:26px; position:relative; }
.quote-mark{ font-family:var(--font-display); font-size:60px; color:var(--pink); opacity:.5; line-height:0; display:block; margin-bottom:6px; }
.quote-text{ font-family:var(--font-display); font-style:italic; font-size:clamp(18px,3vw,26px); min-height:110px; opacity:0; transition:opacity .6s var(--ease-soft); }
.quote-text.show{ opacity:1; }
.quote-dots{ display:flex; gap:8px; justify-content:center; margin-top:18px; }
.quote-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; transition:background .3s, transform .3s; }
.quote-dots span.active{ background:var(--pink); transform:scale(1.3); }

/* =========================== COUNTDOWN =========================== */
.countdown-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; max-width:900px; margin:0 auto; }
@media (max-width:760px){ .countdown-grid{ grid-template-columns:repeat(3,1fr); } }
.count-card{ padding:22px 8px; border-radius:18px; background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(14px); }
.count-num{ display:block; font-family:var(--font-display); font-size:clamp(24px,4vw,36px); font-weight:700; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.count-label{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; opacity:.65; }
.countdown-note{ margin-top:26px; opacity:.7; font-style:italic; font-family:var(--font-display); }

/* =========================== WISH WALL ============================ */
.wish-form{ display:flex; gap:12px; max-width:480px; margin:0 auto 46px; flex-wrap:wrap; justify-content:center; }
.wish-form input{
  flex:1; min-width:220px; padding:14px 18px; border-radius:40px; border:1px solid var(--glass-border);
  background:var(--glass-bg); color:#fff; font-family:inherit; font-size:14px; outline:none;
}
.wish-form input::placeholder{ color:rgba(255,255,255,.5); }
.wish-form input:focus{ border-color:var(--pink); }
.wish-wall{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; max-width:1000px; margin:0 auto; }
.sticky-note{
  width:170px; min-height:150px; padding:18px 16px; border-radius:4px; font-size:14px; line-height:1.5;
  color:#3a2a20; box-shadow:4px 8px 18px rgba(0,0,0,.35); position:relative; font-family:var(--font-hand2); font-size:17px;
  animation:noteFloat 5s ease-in-out infinite;
}
.sticky-note::before{ content:''; position:absolute; top:-8px; left:50%; width:26px; height:14px; background:rgba(255,255,255,.5); transform:translateX(-50%) rotate(-3deg); border-radius:2px; }
@keyframes noteFloat{ 0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); } 50%{ transform:translateY(-8px) rotate(var(--rot,0deg)); } }

/* =========================== GIFT ============================ */
.gift-stage{ display:flex; flex-direction:column; align-items:center; gap:20px; min-height:260px; justify-content:center; }
.gift-box{ position:relative; width:150px; height:130px; cursor:pointer; transition:transform .3s; }
.gift-box:hover{ transform:scale(1.04); }
.gift-body{ position:absolute; bottom:0; width:100%; height:90px; background:linear-gradient(135deg,#c084fc,#7c3aed); border-radius:8px; box-shadow:0 16px 30px rgba(0,0,0,.4); }
.gift-lid{ position:absolute; top:14px; width:100%; height:34px; background:linear-gradient(135deg,#f472b6,#c026d3); border-radius:8px; transition:transform .8s var(--ease-bounce), opacity .8s; transform-origin:left center; z-index:2; }
.ribbon-v{ position:absolute; left:50%; top:0; bottom:0; width:16px; background:var(--grad-gold); transform:translateX(-50%); }
.body-ribbon{ top:0; }
.ribbon-h{ position:absolute; top:38%; left:0; right:0; height:16px; background:var(--grad-gold); }
.gift-bow{ position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:34px; z-index:3; transition:transform .6s var(--ease-bounce), opacity .6s; }
.gift-box.opened .gift-lid{ transform:translateY(-60px) rotate(-35deg); opacity:0; }
.gift-box.opened .gift-bow{ transform:translate(-50%,-70px) scale(0); opacity:0; }
.gift-reveal{ display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0; transform:translateY(20px) scale(.9); transition:opacity .7s var(--ease-soft), transform .7s var(--ease-bounce); pointer-events:none; }
.gift-box.opened + .gift-reveal, .gift-reveal.show{ opacity:1; transform:translateY(0) scale(1); }
.gift-heart{ font-size:70px; animation:glowPulse 1.6s ease-in-out infinite, heartBeatBig 1.6s ease-in-out infinite; filter:drop-shadow(0 0 30px rgba(255,143,199,.8)); }
.gift-reveal p{ opacity:.85; font-style:italic; font-family:var(--font-display); }

/* =========================== CONSTELLATION ============================ */
.constellation-canvas{ width:100%; height:380px; border-radius:24px; background:radial-gradient(circle at 50% 40%, rgba(122,63,158,.18), rgba(13,2,33,.4)); touch-action:none; }

/* =========================== LOVE METER ============================ */
.love-meter-wrap{ max-width:520px; margin:0 auto; display:flex; align-items:center; gap:18px; }
.love-meter-track{ flex:1; height:20px; border-radius:20px; background:rgba(255,255,255,.1); overflow:hidden; position:relative; border:1px solid var(--glass-border); }
.love-meter-fill{ height:100%; width:0%; border-radius:20px; background:var(--grad-primary); box-shadow:0 0 20px var(--pink); position:relative; transition:width .1s linear; }
.love-meter-fill::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation:shimmer 1.6s linear infinite; }
@keyframes shimmer{ from{ transform:translateX(-100%);} to{ transform:translateX(100%);} }
.love-meter-value{ font-family:var(--font-display); font-weight:700; font-size:22px; min-width:90px; }

/* =========================== SURPRISE ============================ */
.surprise-btn{ font-size:17px; padding:20px 44px; }

/* =========================== ENDING ============================ */
.ending-section{ padding:140px 24px; }
.ending-heart{ font-size:90px; filter:drop-shadow(0 0 40px rgba(255,143,199,.7)); animation:heartbeatSoft 1.4s ease-in-out infinite; margin-bottom:30px; }
.ending-text{ max-width:640px; margin:0 auto; font-family:var(--font-display); font-size:clamp(18px,2.6vw,24px); font-style:italic; opacity:.9; line-height:1.7; }

/* =========================== FINAL QUESTION ============================ */
.final-section{ min-height:80vh; display:flex; align-items:center; padding:100px 24px; }
.final-inner{ width:100%; position:relative; min-height:260px; }
.final-question{ font-size:clamp(30px,6vw,54px); margin-bottom:50px; }
.final-buttons{ position:relative; display:flex; gap:30px; justify-content:center; min-height:80px; flex-wrap:wrap; }
.final-no{ position:relative; transition:transform .25s var(--ease-bounce), left .25s var(--ease-bounce), top .25s var(--ease-bounce); }
.final-no.escaped{ position:fixed; z-index:50; }
.final-result{ display:none; flex-direction:column; align-items:center; gap:14px; animation:fadeInUp .8s var(--ease-soft); }
.final-result.show{ display:flex; }
.final-result-heart{ font-size:80px; animation:heartbeatSoft 1.1s ease-in-out infinite; filter:drop-shadow(0 0 30px rgba(255,143,199,.8)); }
.final-result h3{ font-size:clamp(20px,3vw,28px); max-width:520px; }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:translateY(0);} }

/* =========================== CELEBRATION OVERLAY ============================ */
.celebration-overlay{
  position:fixed; inset:0; z-index:600; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:30px; background:radial-gradient(circle at 50% 40%, rgba(124,58,237,.55), rgba(13,2,33,.92));
  opacity:0; visibility:hidden; transition:opacity .6s var(--ease-soft), visibility .6s;
}
.celebration-overlay.show{ opacity:1; visibility:visible; }
.celebration-heart{ font-size:110px; animation:heartBeatBig 1s ease-in-out infinite; filter:drop-shadow(0 0 50px rgba(255,143,199,.9)); margin-bottom:20px; }
.celebration-overlay h2{ font-size:clamp(24px,4vw,38px); max-width:700px; margin-bottom:14px; }
.celebration-overlay p{ font-size:18px; opacity:.9; }

/* =========================== FOOTER ============================ */
.site-footer{ text-align:center; padding:70px 24px 50px; opacity:.75; font-size:14px; }
.footer-signature{ margin-bottom:6px; }
.footer-sign-name{ font-family:var(--font-hand); font-size:26px; margin-bottom:14px; color:var(--pink-soft); }
.footer-fine{ font-size:11px; opacity:.5; }

/* =========================== SECRET MODAL ============================ */
.secret-modal{ position:fixed; inset:0; z-index:700; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(10,2,20,.85); backdrop-filter:blur(10px); opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; }
.secret-modal.open{ opacity:1; visibility:visible; }
.secret-modal-card{ max-width:440px; width:100%; padding:40px 30px; text-align:center; border-radius:24px; position:relative; background:var(--glass-bg-2); border:1px solid var(--glass-border); backdrop-filter:blur(20px); transform:scale(.8); transition:transform .4s var(--ease-bounce); }
.secret-modal.open .secret-modal-card{ transform:scale(1); }
.secret-emoji{ font-size:40px; margin-bottom:14px; }
.secret-modal-card h3{ margin-bottom:12px; font-size:22px; }
.secret-modal-card p{ font-size:14px; opacity:.85; }
.secret-close{ position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass-bg); color:#fff; cursor:pointer; }

/* =========================== CONFETTI / PARTICLES SHARED ============================ */
.confetti-piece{ position:fixed; top:-20px; z-index:9996; pointer-events:none; will-change:transform; }

/* =========================== RESPONSIVE TWEAKS ============================ */
@media (max-width:520px){
  .section{ padding:90px 18px; }
  .final-buttons{ gap:20px; }
  .quote-carousel{ padding:40px 22px; }
}