/* =============================================================
   RITU'S BIRTHDAY — styles
   ============================================================= */

:root{
  --bg-deep: #150a1f;
  --bg-deep-2: #1b0f2e;
  --rose: #ff6fa5;
  --rose-2: #ff9ecb;
  --violet: #8b5cf6;
  --violet-2: #c084fc;
  --gold: #ffd27a;
  --gold-2: #ffb84d;
  --teal: #5ee7d0;
  --cream: #fff6ec;
  --ink: #2a1633;

  --font-display: 'Playfair Display', serif;
  --font-script: 'Great Vibes', cursive;
  --font-body: 'Poppins', sans-serif;

  --gradient-main: linear-gradient(135deg, var(--rose) 0%, var(--violet) 55%, #4f46e5 100%);
  --gradient-gold: linear-gradient(120deg, var(--gold) 0%, var(--rose) 60%, var(--violet-2) 100%);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{
  margin:0; padding:0;
  background:var(--bg-deep);
  color:var(--cream);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
body{ width:100%; min-height:100%; }
body.lock-scroll{ overflow:hidden; height:100%; }
img{
  max-width:100%; display:block;
  -webkit-user-drag:none; user-drag:none;
  -webkit-touch-callout:none;
  user-select:none; -webkit-user-select:none;
  pointer-events:auto;
}
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--rose); color:#fff; }

/* =============================================================
   PHOTO PROTECTION — soft deterrents only. Nothing rendered in a
   browser can be made truly uncopyable (screenshots always work),
   so this just discourages casual right-click / drag saves.
   ============================================================= */

/* scrollbar */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:var(--bg-deep); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--rose),var(--violet)); border-radius:10px; }

/* =============================================================
   PIN GATE
   ============================================================= */
#pinGate{
  position:fixed; inset:0; z-index:10000;
  background:radial-gradient(circle at 50% 40%, #2a1240 0%, var(--bg-deep) 70%);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  transition:opacity .6s ease, visibility .6s ease;
}
#pinGate.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.pin-inner{ text-align:center; }
.pin-title{
  font-family:var(--font-display); font-weight:700;
  font-size:1.35rem; color:var(--cream); margin:14px 0 4px;
}
.pin-sub{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--rose-2); margin:0 0 28px;
}
.pin-dots{ display:flex; align-items:center; justify-content:center; gap:16px; margin:0 0 10px; }
.pin-dots.shake{ animation:pinShake .45s ease; }
@keyframes pinShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(7px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(4px); }
}
.pin-dot{
  width:14px; height:14px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.pin-dot.filled{ background:var(--gradient-gold); border-color:transparent; transform:scale(1.15); }
.pin-dots.error .pin-dot.filled{ background:var(--rose); }
.pin-error{
  min-height:18px; font-size:.78rem; color:var(--rose);
  margin:0 0 22px; letter-spacing:.02em;
}
.pin-keypad{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:14px; max-width:230px; margin:0 auto;
}
.pin-keypad button{
  width:64px; height:64px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:var(--cream); font-size:1.25rem; font-family:var(--font-body);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .15s ease, border-color .2s ease;
}
.pin-keypad button:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }
.pin-keypad button:active{ transform:scale(.92); background:var(--rose); }
.pin-key-back{ font-size:1.1rem; color:rgba(255,246,236,.6); }
.pin-keypad.locked button{ opacity:.3; pointer-events:none; }
@media (max-width:380px){
  .pin-keypad{ gap:10px; max-width:210px; }
  .pin-keypad button{ width:58px; height:58px; }
}
@media (prefers-reduced-motion: reduce){
  .pin-dots.shake{ animation:none; }
}

/* =============================================================
   LOADER
   ============================================================= */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(circle at 50% 40%, #2a1240 0%, var(--bg-deep) 70%);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s ease, visibility .8s ease;
}
#loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner{ text-align:center; }
.loader-heart{
  color:var(--rose);
  filter:drop-shadow(0 0 18px var(--rose));
  animation:heartbeat 1.1s ease-in-out infinite;
  margin:0 auto 18px;
  width:52px;
}
@keyframes heartbeat{
  0%,100%{ transform:scale(1); }
  25%{ transform:scale(1.15); }
  40%{ transform:scale(0.95); }
  60%{ transform:scale(1.1); }
}
.loader-text{
  font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--rose-2); margin:0 0 16px;
}
.dots span{ animation:blink 1.4s infinite; opacity:0; }
.dots span:nth-child(2){ animation-delay:.2s; }
.dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,100%{opacity:0;} 50%{opacity:1;} }
.loader-bar{ width:180px; height:3px; background:rgba(255,255,255,.12); border-radius:10px; overflow:hidden; margin:0 auto; }
.loader-bar-fill{ width:0%; height:100%; background:var(--gradient-gold); transition:width .2s ease; }

/* =============================================================
   GATE
   ============================================================= */
#gate{
  position:fixed; inset:0; z-index:9000;
  background:var(--bg-deep);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity 1s ease, visibility 1s ease;
}
#gate.show{ opacity:1; visibility:visible; }
#gate.hide{ opacity:0; visibility:hidden; pointer-events:none; }
#gate-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.gate-content{ position:relative; z-index:2; text-align:center; padding:0 20px; }
.gate-eyebrow{
  font-size:.8rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin:0 0 6px; opacity:.85;
}
.gate-name{
  font-family:var(--font-script);
  font-size:clamp(4rem, 18vw, 8rem);
  margin:0 0 34px; line-height:1;
  background:var(--gradient-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 30px rgba(255,158,203,.35));
  animation:float-gentle 4s ease-in-out infinite;
}
@keyframes float-gentle{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.open-btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 34px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
  color:var(--cream);
  font-size:.95rem; font-weight:500; letter-spacing:.03em;
  transition:transform .3s ease, background .3s ease, box-shadow .3s ease;
  animation:pulse-ring 2.4s ease-out infinite;
}
.open-btn svg{ transition:transform .3s ease; }
.open-btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,.14); box-shadow:0 10px 30px rgba(255,111,165,.35); }
.open-btn:hover svg{ transform:translateX(4px); }
.open-btn:active{ transform:scale(.96); }
@keyframes pulse-ring{
  0%{ box-shadow:0 0 0 0 rgba(255,111,165,.5); }
  70%{ box-shadow:0 0 0 16px rgba(255,111,165,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,111,165,0); }
}

/* =============================================================
   SITE (hidden until gate opens)
   ============================================================= */
#site{ opacity:0; }
#site.reveal{ opacity:1; transition:opacity .6s ease; }

section{ position:relative; width:100%; overflow:hidden; }

/* dot nav */
.dot-nav{
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  z-index:500; display:flex; flex-direction:column; gap:14px;
}
.dot{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.3);
  border:1px solid rgba(255,255,255,.4);
  position:relative; transition:all .3s ease;
}
.dot::after{
  content:attr(data-label);
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:.7rem; white-space:nowrap; opacity:0; letter-spacing:.05em;
  background:rgba(20,10,30,.85); padding:4px 10px; border-radius:6px;
  transition:opacity .25s ease; pointer-events:none;
}
.dot:hover::after{ opacity:1; }
.dot.active{ background:var(--rose); box-shadow:0 0 12px var(--rose); transform:scale(1.3); }
@media (max-width:820px){ .dot-nav{ display:none; } }

/* =============================================================
   HERO
   ============================================================= */
#hero{
  height:100svh; min-height:560px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 20%, #2c1445 0%, var(--bg-deep) 60%);
}
#hero-bg-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  filter:saturate(1.3) contrast(1.05) brightness(0.85);
  opacity:.65;
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(21,10,31,.22) 0%, rgba(21,10,31,.4) 35%, var(--bg-deep) 95%);
}
.hero-content{ position:relative; z-index:2; text-align:center; padding:0 20px; max-width:900px; }
.hero-kicker{
  font-size:.9rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--gold); margin:0 0 18px;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.kicker-spark{
  display:inline-block;
  animation:sparkPulse 1.8s ease-in-out infinite;
  animation-play-state:paused;
}
@keyframes sparkPulse{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.25); opacity:1; }
}
.wave-word{ display:inline-flex; }
.wave-letter{
  display:inline-block;
  animation:waveBounce 2.2s ease-in-out infinite;
  animation-delay:calc(var(--i) * 0.07s);
  animation-play-state:paused;
}
.wave-space{ width:.32em; }
@keyframes waveBounce{
  0%,60%,100%{ transform:translateY(0); }
  30%{ transform:translateY(-7px); }
}
body.started .wave-letter,
body.started .kicker-spark{ animation-play-state:running; }
@media (prefers-reduced-motion: reduce){
  .wave-letter, .kicker-spark{ animation:none !important; }
}
.name-reveal{
  position:relative;
  margin:0 0 22px; font-family:var(--font-display); font-weight:900;
  line-height:1.02;
  display:block;
}
.name-canvas{
  display:block; width:min(94vw, 880px); aspect-ratio:1000/380; margin:0 auto;
}
@media (prefers-reduced-motion: reduce){
  .name-canvas{ display:none; }
}
.name-fallback{
  display:none; flex-direction:column; align-items:center; gap:6px;
}
@media (prefers-reduced-motion: reduce){
  .name-fallback{ display:flex; }
}
.fallback-line{
  font-size:clamp(2.6rem, 10.5vw, 6.2rem);
  background-image:var(--gradient-main);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(139,92,246,.25);
}
.fallback-line.accent{
  background-image:var(--gradient-gold);
  text-shadow:0 0 46px rgba(255,158,203,.4);
}
.hero-sub{
  font-size:clamp(.95rem, 2.4vw, 1.15rem);
  color:rgba(255,246,236,.75);
  max-width:520px; margin:0 auto; font-weight:300; letter-spacing:.02em;
}
.reveal-fade{ opacity:0; animation:fadeIn 1s ease forwards; animation-delay:.1s; animation-play-state:paused; }
.reveal-fade-late{ opacity:0; animation:fadeIn 1s ease forwards; animation-delay:1.9s; animation-play-state:paused; }
body.started .reveal-fade,
body.started .reveal-fade-late,
body.started .scroll-cue{ animation-play-state:running; }
@keyframes fadeIn{ to{ opacity:1; } }

.scroll-cue{
  position:absolute; z-index:2; left:50%; bottom:34px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:none; border:none; color:rgba(255,246,236,.6);
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; animation:fadeIn 1s ease forwards; animation-delay:2.3s;
  animation-play-state:paused;
}
.scroll-dot{ animation:scrollDot 1.8s ease-in-out infinite; }
@keyframes scrollDot{ 0%{ transform:translateY(0); opacity:1;} 60%{ transform:translateY(9px); opacity:0;} 100%{opacity:0;} }

.floaters{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.floater{
  position:absolute; bottom:-60px;
  font-size:1.4rem; opacity:.55;
  animation:floatUp linear infinite;
  filter:drop-shadow(0 0 6px rgba(255,158,203,.4));
}
@keyframes floatUp{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:.6; }
  90%{ opacity:.5; }
  100%{ transform:translateY(-110vh) translateX(var(--drift,30px)) rotate(360deg); opacity:0; }
}

/* =============================================================
   SECTION HEADS
   ============================================================= */
.section-head{ text-align:center; padding:90px 20px 40px; position:relative; z-index:2; }
.tag{
  display:inline-block; font-size:.75rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--rose-2); margin:0 0 12px; font-weight:600;
}
.section-head h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.8rem, 5vw, 3rem); margin:0 0 10px; color:var(--cream);
}
.section-sub{ color:rgba(255,246,236,.6); font-size:.95rem; margin:0; font-weight:300; }

.reveal-up{ opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal-up.in-view{ opacity:1; transform:translateY(0); }

/* =============================================================
   LOVE / PARTICLE HEARTS
   ============================================================= */
#love{
  background:linear-gradient(180deg, var(--bg-deep) 0%, #1c0e30 50%, #201033 100%);
  padding-bottom:90px;
}
#love-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  filter:saturate(1.4) contrast(1.08) brightness(0.82);
}
.love-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, rgba(28,14,48,.2) 0%, rgba(24,12,40,.8) 58%, var(--bg-deep) 100%);
}
.heart-clip{ clip-path:url(#heartClip); -webkit-clip-path:url(#heartClip); }

.hearts-row{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px, 5vw, 46px); flex-wrap:wrap;
  max-width:1040px; margin:56px auto 0; padding:0 20px 40px;
}
.heart-card{
  position:relative;
  width:min(52vw, 280px);
  aspect-ratio:24/21.5;
}
.heart-card--mini{
  width:min(34vw, 190px);
}
.heart-media{
  position:absolute; inset:0;
  overflow:hidden;
  filter:saturate(1.3) contrast(1.05);
  box-shadow:0 0 46px rgba(255,111,165,.35);
  animation:heartBreathe 4.5s ease-in-out infinite;
}
.heart-media img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes heartBreathe{
  0%,100%{ transform:rotate(var(--card-rot, 0deg)) scale(1); }
  50%{ transform:rotate(var(--card-rot, 0deg)) scale(1.045); }
}
.heart-particles{
  position:absolute; inset:-16%;
  width:132%; height:132%;
  pointer-events:none;
  transform:rotate(var(--card-rot, 0deg));
}
.heart-caption{
  position:absolute; left:0; right:0; bottom:-32px;
  margin:0; text-align:center;
  font-size:.78rem; letter-spacing:.04em; font-style:italic;
  color:rgba(255,246,236,.6);
}
.heart-colorwash{
  position:absolute; inset:0; z-index:2;
  mix-blend-mode:color;
  background:conic-gradient(from 0deg, #ff6fa5, #ffd27a, #5ee7d0, #8b5cf6, #ff6fa5);
  opacity:.5;
  animation:colorSpin 7s linear infinite;
}
.heart-colorful img{ animation:hueCycle 8s ease-in-out infinite; }
@keyframes colorSpin{ to{ transform:rotate(360deg); } }
@keyframes hueCycle{
  0%,100%{ filter:hue-rotate(0deg) saturate(1.4) brightness(1); }
  50%{ filter:hue-rotate(70deg) saturate(1.9) brightness(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .heart-media, .heart-colorwash, .heart-colorful img{ animation:none; }
}

/* =============================================================
   GALLERY / 3D CAROUSEL
   ============================================================= */
#gallery{
  background:linear-gradient(180deg, var(--bg-deep) 0%, #201033 40%, #1a0d2b 100%);
  padding-bottom:70px;
}
#gallery-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.gallery-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(32,16,51,.15) 0%, rgba(26,13,43,.72) 60%, var(--bg-deep) 100%);
}
.carousel-wrap{
  position:relative; z-index:2;
  height:min(62vw, 440px);
  max-height:440px;
  margin:20px auto 0;
  display:flex; align-items:center; justify-content:center;
  perspective:2000px;
}
.carousel-glow{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:60%; height:60%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,111,165,.25) 0%, transparent 70%);
  filter:blur(30px); z-index:0; pointer-events:none;
}
.carousel-stage{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  cursor:grab; touch-action:pan-y;
}
.carousel-stage:active{ cursor:grabbing; }
.carousel-card{
  position:absolute; left:50%; top:50%;
  width:min(52vw, 230px); height:min(70vw, 310px);
  margin:calc(min(70vw, 310px) / -2) 0 0 calc(min(52vw, 230px) / -2);
  border-radius:18px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  border:2px solid rgba(255,255,255,.15);
  backface-visibility:hidden;
  transition:box-shadow .4s ease, border-color .4s ease;
}
.carousel-card img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.15) contrast(1.05);
}
.carousel-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(215deg, rgba(255,111,165,.28), rgba(139,92,246,.28) 55%, transparent 85%);
  mix-blend-mode:overlay; opacity:.9;
}
.carousel-card.is-front{
  border-color:var(--gold);
  box-shadow:0 25px 60px rgba(255,158,203,.35), 0 0 0 1px rgba(255,210,122,.4);
}
.carousel-card.is-front::after{ opacity:.35; }

.carousel-controls{
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin-top:26px; position:relative; z-index:2;
}
.carousel-controls button{
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.07);
  color:var(--cream); font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s ease;
}
.carousel-controls button:hover{ background:var(--rose); border-color:var(--rose); transform:scale(1.08); }
#playPause{ font-size:.95rem; }

.mosaic{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(90px,1fr));
  gap:10px; max-width:1000px; margin:56px auto 0; padding:0 20px;
}
.mosaic-item{
  position:relative; height:120px; border-radius:10px; overflow:hidden;
  opacity:0; transform:scale(.85) translateY(20px);
  transition:transform .6s cubic-bezier(.2,.7,.3,1), opacity .6s ease;
}
.mosaic-item.in-view{ opacity:1; transform:scale(1) translateY(0); }
.mosaic-item img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.2) brightness(.92);
  transition:transform .3s ease, filter .3s ease;
  cursor:pointer;
}
.mosaic-item:hover img{ filter:saturate(1.5) brightness(1.05); transform:scale(1.04); }

/* =============================================================
   LETTER
   ============================================================= */
#letter{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:100px 20px; background:var(--bg-deep-2);
}
.letter-bg-blend{ position:absolute; inset:0; z-index:0; }
.blend-img{
  position:absolute; width:60%; height:80%; object-fit:cover; border-radius:30px;
  filter:saturate(1.4) blur(1px);
}
.blend-1{ top:-8%; left:-12%; opacity:.35; mix-blend-mode:luminosity; transform:rotate(-8deg); }
.blend-2{ bottom:-10%; right:-14%; opacity:.3; mix-blend-mode:luminosity; transform:rotate(6deg); }
.letter-bg-blend::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(21,10,31,.55), rgba(27,15,46,.92) 60%), var(--bg-deep-2);
}
.letter-card{
  position:relative; z-index:2; max-width:680px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
  border-radius:26px; padding:clamp(28px,6vw,60px);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.letter-mark{ font-size:1.6rem; color:var(--gold); margin:0 0 10px; }
.letter-greeting{
  font-family:var(--font-display); font-style:italic; font-size:1.5rem;
  color:var(--rose-2); margin:0 0 20px;
}
.letter-body{
  font-size:1rem; line-height:1.9; color:rgba(255,246,236,.88);
  font-weight:300; margin:0 0 20px;
}
.letter-sign{ margin:30px 0 4px; color:rgba(255,246,236,.6); font-size:.9rem; font-style:italic; }
.letter-signature{ font-family:var(--font-script); font-size:2rem; color:var(--gold); margin:0; }

/* =============================================================
   CAKE
   ============================================================= */
#cake{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 30%, #26113e 0%, var(--bg-deep) 65%);
  padding:60px 20px 90px;
}
#cake-bg-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  filter:saturate(1.3) contrast(1.05) brightness(0.8);
}
.cake-bg-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%, rgba(38,17,62,.2) 0%, rgba(30,14,50,.82) 58%, var(--bg-deep) 100%);
}
#confetti-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none;
}
.cake-scene{
  position:relative; z-index:2;
  width:100%; max-width:420px; height:340px;
  display:flex; align-items:flex-end; justify-content:center;
  perspective:900px; margin-top:20px;
}
.cake-3d{
  position:relative; width:240px; height:230px;
  transform-style:preserve-3d;
  transform:rotateX(6deg);
  animation:cakeSway 6s ease-in-out infinite;
}
@keyframes cakeSway{ 0%,100%{ transform:rotateX(6deg) rotateY(-4deg);} 50%{ transform:rotateX(6deg) rotateY(4deg);} }

.cake-tier{ position:absolute; left:50%; border-radius:14px; box-shadow:0 14px 24px rgba(0,0,0,.35), inset 0 -10px 18px rgba(0,0,0,.15); }
.tier-base{ bottom:0; width:220px; height:90px; margin-left:-110px; background:linear-gradient(160deg,#ff8fb3,#ff6fa5 60%,#e0558c); }
.tier-mid{ bottom:78px; width:170px; height:70px; margin-left:-85px; background:linear-gradient(160deg,#c39bff,#8b5cf6 60%,#6d34e0); }
.tier-top{ bottom:136px; width:120px; height:58px; margin-left:-60px; background:linear-gradient(160deg,#ffe08a,#ffb84d 60%,#f5942e); }
.icing{ position:absolute; left:-4px; right:-4px; top:-10px; height:22px; border-radius:50%/14px; background:#fff6ec; box-shadow:0 4px 6px rgba(0,0,0,.15); }
.tier-base .icing{ background:#ffe3ee; }
.tier-mid .icing{ background:#ece1ff; }
.tier-top .icing{ background:#fff3d9; }

.drip{ position:absolute; top:6px; width:16px; height:34px; background:inherit; border-radius:0 0 10px 10px; background:#fff3d9; }
.d1{ left:6px; height:26px; } .d2{ left:34px; height:38px; } .d3{ left:66px; height:22px; } .d4{ left:94px; height:32px; }

.plate{ position:absolute; bottom:-14px; left:50%; width:270px; height:26px; margin-left:-135px; border-radius:50%; background:radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.25), rgba(255,255,255,.05) 70%); box-shadow:0 10px 30px rgba(0,0,0,.4); }

.candle{ position:absolute; bottom:192px; width:10px; z-index:3; cursor:pointer; }
.candle.c1{ left:70px; } .candle.c2{ left:115px; } .candle.c3{ left:158px; }
.stick{ width:10px; height:46px; border-radius:3px; background:repeating-linear-gradient(180deg,#5ee7d0 0 8px,#fff 8px 16px); box-shadow:0 4px 8px rgba(0,0,0,.25); }
.wick{ position:absolute; top:-8px; left:4px; width:2px; height:9px; background:#3a2a1a; }
.flame{
  position:absolute; top:-30px; left:1px; width:8px; height:22px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%, #fff9c4 0%, #ffd27a 35%, #ff8a3d 70%, transparent 100%);
  box-shadow:0 0 14px 4px rgba(255,170,60,.7), 0 0 30px 8px rgba(255,111,60,.35);
  transform-origin:50% 100%;
  animation:flicker 1.3s ease-in-out infinite;
  transition:opacity .3s ease, transform .3s ease;
}
@keyframes flicker{
  0%,100%{ transform:scale(1) rotate(-2deg); }
  30%{ transform:scale(1.08,1.15) rotate(2deg); }
  60%{ transform:scale(.94,1.05) rotate(-3deg); }
}
.candle.blown .flame{ opacity:0; transform:scale(.2) translateY(10px); animation:none; }
.candle.blown .stick{ filter:grayscale(.3); }
.smoke{
  position:absolute; top:-34px; left:2px; width:6px; height:6px; border-radius:50%;
  background:rgba(200,200,210,.5); pointer-events:none;
  animation:smokeRise 1.1s ease-out forwards;
}
@keyframes smokeRise{
  0%{ opacity:.7; transform:translate(0,0) scale(1); }
  100%{ opacity:0; transform:translate(var(--sx,10px),-50px) scale(3); }
}
.cake-hint{
  position:relative; z-index:2;
  margin-top:26px; font-size:.85rem; color:rgba(255,246,236,.55);
  letter-spacing:.05em; text-align:center;
  animation:pulseText 2s ease-in-out infinite;
}
@keyframes pulseText{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.cake-hint.done{ color:var(--gold); }

/* shatter / rejoin loop — the cake breaks into little squares that fly
   apart and vanish, then gather themselves back together */
#cake3d.shattering > .cake-tier,
#cake3d.shattering > .plate,
#cake3d.shattering > .candle{
  opacity:0;
  transition:opacity .12s ease;
}
.cake-shards{
  position:absolute;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}
#cake3d.shattering .cake-shards{ opacity:1; }
.shard{
  position:absolute;
  transform:translate(0,0) rotate(0deg) scale(1);
  opacity:1;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  transition:transform .85s cubic-bezier(.3,.62,.35,1), opacity .7s ease;
}
.shard.gone{
  transform:translate(var(--tx,60px), var(--ty,60px)) rotate(var(--rot,90deg)) scale(.35);
  opacity:0;
}

/* =============================================================
   WISHES / FOOTER
   ============================================================= */
#wishes{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 100%, #34164f 0%, var(--bg-deep) 65%);
  padding:100px 20px 60px;
}
#wishes-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.wishes-content{ position:relative; z-index:2; text-align:center; max-width:720px; }
.wishes-title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.2rem, 7vw, 4rem); margin:0 0 30px; line-height:1.15;
}
.grad-text{
  background:var(--gradient-gold); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-family:var(--font-script); font-weight:400; font-size:1.4em;
}
.stat-row{ display:flex; justify-content:center; gap:clamp(20px,6vw,60px); margin:0 0 44px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; align-items:center; }
.stat-num{
  font-family:var(--font-display); font-weight:900; font-size:clamp(1.6rem,5vw,2.6rem);
  background:var(--gradient-main); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{ font-size:.72rem; letter-spacing:.05em; color:rgba(255,246,236,.55); margin-top:4px; max-width:110px; text-align:center; }

.surprise-btn{
  padding:17px 38px; border-radius:100px; border:none;
  background:var(--gradient-main); color:#fff; font-size:1rem; font-weight:600;
  box-shadow:0 15px 40px rgba(139,92,246,.4);
  transition:transform .3s ease, box-shadow .3s ease;
  margin-bottom:34px;
}
.surprise-btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 20px 50px rgba(255,111,165,.5); }
.surprise-btn:active{ transform:scale(.96); }

.footer-note{ font-size:.78rem; color:rgba(255,246,236,.4); letter-spacing:.03em; }

/* =============================================================
   LIGHTBOX
   ============================================================= */
.lightbox{
  position:fixed; inset:0; z-index:9200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,5,16,.92);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.lightbox.show{ opacity:1; visibility:visible; }
.lightbox-frame{
  display:inline-block; line-height:0;
  border-radius:14px; overflow:hidden;
  transform:scale(.96);
  transition:transform .3s ease;
}
.lightbox.show .lightbox-frame{ transform:scale(1); }
.lightbox-img{
  max-width:90vw; max-height:84vh;
  display:block;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  object-fit:contain;
}
.lightbox-close,
.lightbox-nav{
  position:fixed;
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:var(--cream); font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, transform .25s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover{ background:var(--rose); transform:scale(1.08); }
.lightbox-close{ top:24px; right:24px; }
.lightbox-nav{ top:50%; transform:translateY(-50%); }
.lightbox-nav:hover{ transform:translateY(-50%) scale(1.08); }
.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }
@media (max-width:640px){
  .lightbox-close{ top:14px; right:14px; width:40px; height:40px; }
  .lightbox-nav{ width:40px; height:40px; }
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }
}

.carousel-card img{ cursor:pointer; }

/* =============================================================
   RESPONSIVE TWEAKS
   ============================================================= */
@media (max-width:520px){
  .letter-card{ padding:30px 22px; }
  .cake-scene{ height:300px; }
  .cake-3d{ transform:scale(.85) rotateX(6deg); }
  .section-head{ padding:80px 20px 30px; }
  .carousel-wrap{ margin-top:40px; }
}

/* the 3D coverflow's "front card" naturally renders larger than its base
   size (perspective magnification) — with 18 cards in the ring that's fine
   on wide screens, but on a narrow phone it needs a smaller base card,
   a tighter ring, and a flatter perspective, or it overflows sideways and
   into the controls below */
@media (max-width:700px){
  .carousel-wrap{
    height:300px; max-height:300px;
    perspective:2400px;
  }
  .carousel-card{
    width:min(42vw, 190px); height:min(58vw, 262px);
    margin:calc(min(58vw, 262px) / -2) 0 0 calc(min(42vw, 190px) / -2);
  }
}

/* Love section on mobile: three overlapping, rotated "scattered photos"
   instead of a single stacked column — also fixes captions overlapping
   the next heart below them, since each card now has its own fixed
   footprint instead of relying on flex-wrap spacing */
@media (max-width:700px){
  .hearts-row{
    position:relative; display:block;
    height:500px; max-width:100%;
    margin:56px auto 0; padding:0;
  }
  .heart-card{
    position:absolute;
    width:min(44vw, 180px);
  }
  .heart-card:nth-of-type(1){ left:2%; top:0; }
  .heart-card:nth-of-type(1) .heart-media,
  .heart-card:nth-of-type(1) .heart-particles{ --card-rot:-9deg; }

  .heart-card:nth-of-type(3){ right:2%; top:190px; }
  .heart-card:nth-of-type(3) .heart-media,
  .heart-card:nth-of-type(3) .heart-particles{ --card-rot:45deg; }

  .heart-card--mini{
    width:min(24vw, 104px);
    left:50%; top:390px;
  }
  .hearts-row .heart-card.heart-card--mini.reveal-up.in-view,
  .hearts-row .heart-card.heart-card--mini.reveal-up{
    transform:translateX(-50%) rotate(-90deg);
  }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}