/* ==========================================================================
   DESIGN TOKENS
   Palette is deliberately different per scene (terminal → candlelit desk →
   floodlit stadium → champagne finale), unified by one signature motif: a
   thin gold "thread" of light that appears as the loading bar, the wax seal,
   the gift ribbon, and finally the confetti trail.
   ========================================================================== */
:root{
  /* system voice */
  --font-ui: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  /* emotional voice */
  --font-display: 'Cormorant Garamond', serif;

  /* scene 1 — terminal */
  --terminal-bg: #07070a;
  --terminal-panel: #0e0f14;
  --terminal-gold: #e8bb63;
  --terminal-dim: #6b6350;

  /* scene 2/3 — candlelit desk */
  --desk-cream: #f3e6cf;
  --desk-coffee: #2c1c10;
  --desk-coffee-deep: #1a1109;
  --desk-gold: #d9a441;
  --desk-gold-soft: #f0cf8e;

  /* scene 4 — stadium */
  --stadium-navy: #060a16;
  --stadium-navy-mid: #0e1830;
  --stadium-light: #eaf2ff;
  --stadium-gold: #d4af37;
  --stadium-crimson: #7a1f1a;

  /* scene 5 — finale */
  --finale-champagne: #f7ead2;
  --finale-blush: #f2cdb8;
  --finale-plum: #5c2a3e;
  --finale-gold: #c9a227;
  --glass-fill: rgba(255,255,255,0.35);
  --glass-border: rgba(255,255,255,0.55);

  --ease-premium: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* each scene manages its own scroll if needed */
}
body{
  font-family: var(--font-ui);
  background: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
button{
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
button:focus-visible,
a:focus-visible{
  outline: 2px solid var(--desk-gold-soft);
  outline-offset: 4px;
  border-radius: 4px;
}
img{ max-width: 100%; display: block; }
h1,h2,h3,p{ margin: 0; }

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

/* ==========================================================================
   SIGNATURE MOTIF — thread indicator
   ========================================================================== */
.thread-indicator{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 999;
  pointer-events: none;
}
.thread-indicator__track{ stroke: rgba(255,255,255,0.08); stroke-width: 6; fill: none; }
.thread-indicator__fill{
  stroke: var(--desk-gold);
  stroke-width: 6;
  fill: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.6s var(--ease-premium);
  filter: drop-shadow(0 0 4px rgba(217,164,65,0.8));
}

/* ==========================================================================
   STAGE / SCENE MANAGEMENT
   ========================================================================== */
#stage{ position: relative; width: 100%; height: 100vh; height: 100dvh; }

.scene{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.025);
  filter: blur(6px);
  transition: opacity 1.1s var(--ease-soft), transform 1.1s var(--ease-soft), filter 1.1s var(--ease-soft);
  overflow: hidden;
}
.scene--active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce){
  .scene{ transform: none; filter: none; }
}

/* ==========================================================================
   SCENE 1 — CINEMATIC LOADING
   ========================================================================== */
#scene-loading{
  background: radial-gradient(ellipse at 50% 30%, #0d0e13 0%, var(--terminal-bg) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.terminal{
  width: min(680px, 90vw);
  border-radius: 12px;
  background: var(--terminal-panel);
  border: 1px solid rgba(232,187,99,0.15);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02);
  overflow: hidden;
}
.terminal__bar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #121319;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.terminal__dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: #3a3b45;
}
.terminal__dot:nth-child(1){ background: #d9645c; }
.terminal__dot:nth-child(2){ background: #d9b34c; }
.terminal__dot:nth-child(3){ background: #4fae6a; }
.terminal__bar-title{
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--terminal-dim);
  letter-spacing: 0.05em;
}
.terminal__body{ padding: 28px 26px 24px; min-height: 240px; }
.terminal__lines{
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1.6vw, 0.95rem);
  line-height: 1.9;
  min-height: 190px;
}
.terminal__lines li{
  color: var(--terminal-gold);
  white-space: pre-wrap;
  word-break: break-word;
}
.terminal__lines li::before{ content: "> "; color: var(--terminal-dim); }
.terminal__lines .line--done::after{
  content: " ✅";
}
.terminal__progress{
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.terminal__progress-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #a67424, var(--terminal-gold));
  box-shadow: 0 0 12px rgba(232,187,99,0.6);
  transition: width 0.4s var(--ease-soft);
}
.terminal__percent{
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--terminal-dim);
  text-align: right;
}
.cursor::after{
  content: "▌";
  color: var(--terminal-gold);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity: 0; } }

.glitch-overlay{
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, transparent 2px, transparent 4px),
    linear-gradient(90deg, rgba(255,0,60,0.08), rgba(0,255,200,0.06));
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.glitch-overlay.is-active{
  animation: glitch 0.5s steps(6) 1;
}
@keyframes glitch{
  0%{ opacity: 0; transform: translate(0,0); }
  10%{ opacity: 1; transform: translate(-6px, 2px); }
  30%{ transform: translate(6px, -2px); }
  50%{ transform: translate(-4px, 0); }
  70%{ transform: translate(4px, 2px); }
  90%{ opacity: 1; transform: translate(0,0); }
  100%{ opacity: 0; }
}

/* ==========================================================================
   SHARED — candlelit desk scenes (envelope + letter)
   Background photo: assets/letter-bg.jpg, with a soft "bokeh" fairy-light
   overlay and vignette layered in CSS for depth.
   ========================================================================== */
.desk-scene{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 20%, rgba(240,207,142,0.14), transparent 60%),
    linear-gradient(180deg, rgba(20,12,5,0.35) 0%, rgba(20,12,5,0.55) 100%),
    url('assets/letter-bg.jpg');
  background-size: cover;
  background-position: center;
}
.desk-scene::after{
  /* vignette for depth of field */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, transparent 40%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.desk-scene__glow{
  position: absolute;
  top: 8%;
  left: 50%;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,214,140,0.16), transparent 70%);
  filter: blur(10px);
  animation: pulse-glow 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse-glow{
  0%, 100%{ opacity: 0.7; }
  50%{ opacity: 1; }
}

.fairy-lights{
  position: absolute;
  top: 6%;
  left: 0;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-evenly;
  pointer-events: none;
}
.fairy-lights span{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--desk-gold-soft);
  box-shadow: 0 0 10px 3px rgba(240,207,142,0.7);
  animation: twinkle 2.4s ease-in-out infinite;
}
.fairy-lights span:nth-child(odd){ animation-delay: 0.6s; }
.fairy-lights span:nth-child(3n){ animation-delay: 1.2s; }
@keyframes twinkle{
  0%, 100%{ opacity: 0.4; transform: scale(0.85); }
  50%{ opacity: 1; transform: scale(1.1); }
}

/* ---- envelope ---- */
.envelope-wrap{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.envelope{
  position: relative;
  width: clamp(220px, 30vw, 320px);
  aspect-ratio: 3 / 2;
  padding: 0;
  animation: float 4s ease-in-out infinite;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-premium);
}
.envelope:hover{ transform: translateY(-6px) scale(1.02); }
@keyframes float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}
.envelope__shadow{
  position: absolute;
  bottom: -30px; left: 8%;
  width: 84%; height: 24px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 70%);
  border-radius: 50%;
  animation: shadow-pulse 4s ease-in-out infinite;
}
@keyframes shadow-pulse{
  0%, 100%{ transform: scaleX(1); opacity: 0.7; }
  50%{ transform: scaleX(0.82); opacity: 0.45; }
}
.envelope__back{
  position: absolute; inset: 0;
  background: linear-gradient(155deg, var(--desk-cream), #e7d3ac);
  border-radius: 6px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.45);
}
.envelope__letter-peek{
  position: absolute;
  left: 8%; right: 8%;
  bottom: 8%;
  height: 0%;
  background: linear-gradient(180deg, #fffdf7, #f6ecd8);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -4px 14px rgba(0,0,0,0.15);
  transition: height 0.9s var(--ease-premium) 0.35s, transform 0.9s var(--ease-premium) 0.35s;
  z-index: 1;
}
.envelope__front-left, .envelope__front-right{
  position: absolute;
  bottom: 0; width: 50%; height: 62%;
  background: linear-gradient(160deg, #ecd7ae, #d8bb84);
  z-index: 2;
}
.envelope__front-left{ left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); border-radius: 0 0 0 6px; }
.envelope__front-right{ right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); border-radius: 0 0 6px 0; }
.envelope__flap{
  position: absolute;
  top: 0; left: 0; width: 100%; height: 58%;
  background: linear-gradient(200deg, #f1ddb4, #d9bb85);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  border-radius: 6px 6px 0 0;
  transition: transform 0.8s var(--ease-premium);
  z-index: 3;
  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}
.envelope__seal{
  position: absolute;
  top: 46%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  z-index: 4;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.4));
  transition: opacity 0.4s ease, transform 0.4s ease;
  animation: seal-glow 2.6s ease-in-out infinite;
}
.envelope__seal svg{ width: 100%; height: 100%; overflow: visible; }
.envelope__seal circle{ fill: var(--stadium-crimson); }
.envelope__seal-heart{
  fill: var(--desk-gold-soft);
  transform-origin: 20px 18px;
}
@keyframes seal-glow{
  0%, 100%{ filter: drop-shadow(0 3px 4px rgba(0,0,0,0.4)) drop-shadow(0 0 3px rgba(240,207,142,0.3)); }
  50%{ filter: drop-shadow(0 3px 4px rgba(0,0,0,0.4)) drop-shadow(0 0 9px rgba(240,207,142,0.75)); }
}

.envelope.is-open .envelope__flap{ transform: rotateX(178deg); }
.envelope.is-open .envelope__seal{ opacity: 0; transform: translate(-50%,-50%) scale(0.4); }
.envelope.is-open .envelope__letter-peek{ height: 76%; transform: translateY(-14%); }

.envelope__hint{
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--desk-gold-soft);
  animation: hint-pulse 2s ease-in-out infinite;
}
@keyframes hint-pulse{ 0%,100%{ opacity: 0.65; } 50%{ opacity: 1; } }

.desk-scene--letter.zooming{ animation: camera-zoom 1.1s var(--ease-premium) forwards; }
@keyframes camera-zoom{
  0%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}

/* ---- letter paper ---- */
.letter-paper{
  position: relative;
  z-index: 2;
  width: min(520px, 86vw);
  animation: paper-rise 0.9s var(--ease-premium) both;
}
@keyframes paper-rise{
  0%{ opacity: 0; transform: translateY(40px) rotate(-1.5deg) scale(0.96); }
  100%{ opacity: 1; transform: translateY(0) rotate(-0.6deg) scale(1); }
}
.letter-paper__image{
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3);
  background: #fffdf6; /* shows while the image loads */
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  position: relative;
  z-index: 2;
  padding: 14px 34px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 999px;
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium);
}
.btn--ghost{
  color: var(--desk-gold-soft);
  border: 1px solid rgba(240,207,142,0.5);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(217,164,65,0.25); }
.btn--gold{
  color: #241705;
  background: linear-gradient(135deg, #ffe9b8, var(--stadium-gold) 60%, #a97c1f);
  box-shadow: 0 10px 30px rgba(212,175,55,0.35);
  font-weight: 600;
}
.btn--gold:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 40px rgba(212,175,55,0.5); }

/* ==========================================================================
   SCENE 4 — STADIUM
   Background photo: assets/stadium.jpg, darkened with a gradient overlay
   so the floodlight, fog, and gift-box animations stay readable on top.
   ========================================================================== */
.stadium-scene{
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image:
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(20,33,56,0.5) 0%, transparent 70%),
    linear-gradient(180deg, rgba(6,10,22,0.55) 0%, rgba(6,10,22,0.75) 60%, rgba(5,8,16,0.9) 100%),
    url('assets/stadium.jpg');
  background-size: cover;
  background-position: center;
}
.stadium-scene__floodlights{ position: absolute; inset: 0; pointer-events: none; }
.floodlight{
  position: absolute;
  top: -10%;
  width: 26vw;
  height: 140%;
  background: linear-gradient(180deg, rgba(234,242,255,0.22), transparent 70%);
  filter: blur(6px);
  animation: light-pulse 5s ease-in-out infinite;
}
.floodlight--1{ left: -6%; transform: rotate(12deg); animation-delay: 0s; }
.floodlight--2{ left: 18%; transform: rotate(4deg); animation-delay: 0.7s; }
.floodlight--3{ right: 18%; transform: rotate(-4deg); animation-delay: 1.3s; }
.floodlight--4{ right: -6%; transform: rotate(-12deg); animation-delay: 2s; }
@keyframes light-pulse{
  0%, 100%{ opacity: 0.55; }
  50%{ opacity: 0.95; }
}
.stadium-scene__fog{
  position: absolute;
  bottom: 0; left: -10%;
  width: 120%; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(200,210,230,0.12));
  filter: blur(20px);
  animation: fog-drift 12s ease-in-out infinite alternate;
}
@keyframes fog-drift{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(4%); }
}
.stadium-scene__crowd{
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 14%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 3px, transparent 3px 7px);
  opacity: 0.5;
}

.stadium-scene.is-shaking{ animation: camera-shake 0.5s var(--ease-soft); }
@keyframes camera-shake{
  0%, 100%{ transform: translate(0,0); }
  20%{ transform: translate(-6px, 3px); }
  40%{ transform: translate(5px, -4px); }
  60%{ transform: translate(-4px, 2px); }
  80%{ transform: translate(3px, -2px); }
}

/* ---- gift box ---- */
.gift-wrap{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.gift-box{
  position: relative;
  width: clamp(150px, 22vw, 210px);
  height: clamp(140px, 20vw, 190px);
  padding: 0;
  /* resting above the frame until JS adds .is-dropping once this scene is actually visible */
  transform: translateY(-140vh) rotate(-4deg);
  filter: drop-shadow(0 0 0 rgba(212,175,55,0));
  transition: filter 0.6s ease;
}
.gift-box.is-dropping{
  animation: gift-fall 1.05s var(--ease-soft) forwards;
}
.gift-box.is-dropped{
  transform: translateY(0) rotate(0deg);
}
.gift-box.is-landed{
  filter: drop-shadow(0 0 16px rgba(212,175,55,0.45));
}
@keyframes gift-fall{
  0%{ transform: translateY(-140vh) rotate(-4deg); }
  70%{ transform: translateY(6px) rotate(2deg); }
  85%{ transform: translateY(-14px) rotate(-1deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}
.gift-box:hover .gift-box__lid{ transform: translateY(-4px) rotate(-1deg); }
.gift-box__shadow{
  position: absolute;
  bottom: -20px; left: 6%;
  width: 88%; height: 20px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.6), transparent 70%);
  border-radius: 50%;
}
.gift-box__base{
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 68%;
  background: linear-gradient(135deg, #ffd76b, var(--stadium-gold) 55%, #9c7420);
  border-radius: 6px;
  box-shadow: inset 0 -10px 18px rgba(0,0,0,0.25), 0 20px 40px rgba(0,0,0,0.45);
  transition: transform 0.5s var(--ease-premium);
}
.gift-box__lid{
  position: absolute;
  top: 0; left: -4%; width: 108%; height: 34%;
  background: linear-gradient(135deg, #ffe08a, #d4af37 55%, #a1782a);
  border-radius: 8px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.3);
  transform-origin: 10% 100%;
  transition: transform 0.7s var(--ease-premium);
  z-index: 3;
}
.gift-box__ribbon-v, .gift-box__ribbon-h{
  position: absolute;
  background: linear-gradient(180deg, #8c2a22, var(--stadium-crimson));
  z-index: 2;
}
.gift-box__ribbon-v{ top: 0; left: 44%; width: 12%; height: 100%; }
.gift-box__ribbon-h{ top: 8%; left: 0; width: 100%; height: 14%; }
.gift-box__bow{
  position: absolute;
  top: -18%; left: 50%;
  width: 62%;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4));
  transition: transform 0.5s var(--ease-premium);
  z-index: 4;
}
.gift-box__bow svg path, .gift-box__bow svg circle{ fill: var(--stadium-crimson); }
.gift-box__bow svg circle{ fill: #9c332a; }

.gift-wrap.is-open .gift-box__bow{ transform: translateX(-50%) rotate(-8deg) translateY(-6px); }
.gift-wrap.is-open .gift-box__lid{ transform: translate(-6%, -120%) rotate(-24deg); }
.gift-wrap.is-open .gift-box__base{ transform: translateY(2%); }
.gift-wrap.is-open .gift-box{ pointer-events: none; }

.gift-wrap__hint{
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #ffe6a8;
  opacity: 0;
}
.gift-wrap__hint.is-visible{
  animation: hint-fade-in 0.6s var(--ease-soft) forwards, hint-pulse 2s ease-in-out 0.6s infinite;
}
@keyframes hint-fade-in{
  0%{ opacity: 0; transform: translateY(6px); }
  100%{ opacity: 1; transform: translateY(0); }
}
.gift-wrap.is-open .gift-wrap__hint{ opacity: 0; animation: none; transition: opacity 0.4s ease; }

/* ---- gold particle burst ---- */
.particle{
  position: absolute;
  top: 40%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3d1, var(--stadium-gold));
  box-shadow: 0 0 6px rgba(212,175,55,0.9);
  pointer-events: none;
  z-index: 5;
}

.stage-flash{
  position: fixed;
  inset: 0;
  background: #fff8e6;
  opacity: 0;
  z-index: 900;
  pointer-events: none;
}
.stage-flash.is-flashing{ animation: flash 0.5s ease-out; }
@keyframes flash{
  0%{ opacity: 0; }
  15%{ opacity: 0.9; }
  100%{ opacity: 0; }
}

/* ---- bat reveal ---- */
.bat-reveal{
  position: absolute;
  top: 41%; left: 50%;
  width: clamp(106px, 16.5vw, 154px);
  max-height: 34vh;
  transform: translate(-50%, -50%) scale(0) rotate(-40deg);
  opacity: 0;
  z-index: 3;
  transition: transform 0.9s var(--ease-premium), opacity 0.6s ease;
}
.bat-reveal.is-visible{
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  opacity: 1;
}
.bat-reveal__glow{
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(212,175,55,0.55), transparent 70%);
  filter: blur(10px);
  animation: pulse-glow 3s ease-in-out infinite;
}
.bat-reveal__img{ position: relative; width: 100%; max-height: 34vh; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); }

/* ---- stadium message ---- */
.stadium-message{
  position: relative;
  z-index: 4;
  margin-top: 34px;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
}
.stadium-message.is-visible{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.stadium-message__icon{ font-size: 2rem; margin-bottom: 6px !important; }
.stadium-message h2{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  font-weight: 600;
  color: var(--stadium-light);
  text-shadow: 0 0 24px rgba(212,175,55,0.45);
  margin-bottom: 14px !important;
}
.stadium-message__line{
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: #cdd8ee;
  margin-bottom: 4px !important;
}
.stadium-message .btn{ margin-top: 22px; }

/* ==========================================================================
   SCENE 5 — FINALE
   ========================================================================== */
#scene-finale{ background: #000; }
.finale-scene{
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.25), transparent 60%),
    linear-gradient(180deg, rgba(247,234,210,0.55), rgba(242,205,184,0.6)),
    url('assets/birthday-bg.jpg');
  /* photo layer sized at 90% (rather than cover) so more of the scene/decorations
     are visible; any matte edge is filled by the champagne gradient above it */
  background-size: cover, cover, 90%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  opacity: 0;
  animation: finale-reveal 1.4s var(--ease-soft) forwards;
}
@keyframes finale-reveal{
  0%{ opacity: 0; }
  100%{ opacity: 1; }
}
#confetti-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.balloons{ position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.balloon{
  position: absolute;
  bottom: -20%;
  width: 54px; height: 68px;
  border-radius: 50% 50% 48% 48%;
  opacity: 0.85;
  animation: balloon-rise linear infinite;
}
.balloon::after{
  content: "";
  position: absolute;
  bottom: -26px; left: 50%;
  width: 1px; height: 26px;
  background: rgba(0,0,0,0.2);
}
.balloon--1{ left: 8%;  background: var(--finale-plum); animation-duration: 11s; animation-delay: 0.2s; }
.balloon--2{ left: 22%; background: var(--finale-gold); animation-duration: 13s; animation-delay: 1.4s; }
.balloon--3{ left: 68%; background: #b5563f; animation-duration: 10s; animation-delay: 0.6s; }
.balloon--4{ left: 84%; background: var(--finale-plum); animation-duration: 14s; animation-delay: 2.1s; }
.balloon--5{ left: 46%; background: var(--finale-gold); animation-duration: 12s; animation-delay: 0.9s; }
@keyframes balloon-rise{
  0%{ transform: translateY(0) translateX(0); }
  50%{ transform: translateY(-60vh) translateX(20px); }
  100%{ transform: translateY(-125vh) translateX(-10px); }
}

.finale-title{
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2.4rem, 8vw, 4.8rem);
  color: var(--finale-plum);
  text-shadow: 0 0 30px rgba(201,162,39,0.5), 0 0 60px rgba(201,162,39,0.25);
  animation: title-glow 3s ease-in-out infinite;
}
@keyframes title-glow{
  0%, 100%{ text-shadow: 0 0 20px rgba(201,162,39,0.35), 0 0 46px rgba(201,162,39,0.18); }
  50%{ text-shadow: 0 0 34px rgba(201,162,39,0.6), 0 0 70px rgba(201,162,39,0.32); }
}

.finale-props{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: clamp(12px, 6vw, 60px);
}
.prop{ width: clamp(84px, 12vw, 140px); }
.prop--cake{ animation: slide-in-left 1s var(--ease-premium) 0.4s both; }
.prop--flowers{ animation: slide-in-right 1s var(--ease-premium) 0.5s both; }
@keyframes slide-in-left{
  0%{ opacity: 0; transform: translateX(-80px); }
  100%{ opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right{
  0%{ opacity: 0; transform: translateX(80px); }
  100%{ opacity: 1; transform: translateX(0); }
}
/* gentle idle bob + glow on the props themselves, layered on the child image so
   it doesn't fight the parent's one-time slide-in transform */
.prop--cake img{ animation: prop-float 4.2s ease-in-out 1.4s infinite; }
.prop--flowers img{ animation: prop-float 4.6s ease-in-out 1.6s infinite reverse; }
@keyframes prop-float{
  0%, 100%{ translate: 0 0; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.22)) drop-shadow(0 0 0 rgba(201,162,39,0)); }
  50%{ translate: 0 -8px; filter: drop-shadow(0 16px 22px rgba(0,0,0,0.18)) drop-shadow(0 0 14px rgba(201,162,39,0.35)); }
}

/* ---- decorative mini gifts ---- */
.finale-gifts{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.mini-gift{
  position: absolute;
  width: clamp(52px, 7.5vw, 76px);
  opacity: 0;
  animation: mini-gift-in 0.9s var(--ease-premium) both, mini-gift-float 5s ease-in-out infinite;
}
.mini-gift--1{ left: 6%; bottom: 16%; animation-delay: 0.6s, 0.6s; }
.mini-gift--2{ right: 6%; bottom: 20%; animation-delay: 0.75s, 1.1s; }
.mini-gift--3{ left: 9%; top: 16%; animation-delay: 0.9s, 1.6s; }
@keyframes mini-gift-in{
  0%{ opacity: 0; scale: 0.5; }
  100%{ opacity: 1; scale: 1; }
}
@keyframes mini-gift-float{
  0%, 100%{ translate: 0 0; rotate: -4deg; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.25)) drop-shadow(0 0 0 rgba(212,175,55,0)); }
  50%{ translate: 0 -9px; rotate: 4deg; filter: drop-shadow(0 15px 20px rgba(0,0,0,0.2)) drop-shadow(0 0 10px rgba(212,175,55,0.4)); }
}
.mini-gift img{ width: 100%; display: block; }

.message-card{
  position: relative;
  z-index: 2;
  max-width: 520px;
  padding: clamp(20px, 4vw, 32px);
  border-radius: 18px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 20px 50px rgba(92,42,62,0.18);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.7;
  color: #3d2233;
  animation: card-fade-up 1s var(--ease-premium) 0.8s both;
}
@keyframes card-fade-up{
  0%{ opacity: 0; transform: translateY(20px); }
  100%{ opacity: 1; transform: translateY(0); }
}

.finale-footer{
  position: relative;
  z-index: 2;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #7a4a5c;
  opacity: 0.8;
}

/* ---- background music toggle ---- */
.music-toggle{
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 6;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(92,42,62,0.18);
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium);
  animation: card-fade-up 1s var(--ease-premium) 1s both;
}
.music-toggle:hover{ transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 26px rgba(92,42,62,0.26); }
.music-toggle.is-muted{ opacity: 0.75; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 640px){
  .terminal__body{ padding: 20px 18px; min-height: 200px; }
  .terminal__lines{ min-height: 160px; }
  .finale-props{ gap: 18px; }
  .stadium-message h2{ font-size: 1.6rem; }
  .btn{ padding: 12px 26px; font-size: 0.85rem; }
}
@media (max-width: 400px){
  .envelope{ width: 70vw; }
  .letter-paper{ width: 92vw; }
}