/* ---------------------------------------------------------------
   GEBURTSTAGS-EXPERIENCE – VISUELLES SYSTEM
   Bordeaux, Champagner, Gold und ein kleines bisschen Schokolade.
   --------------------------------------------------------------- */

:root {
  color-scheme: dark;
  --night: #0b0204;
  --night-soft: #160407;
  --wine: #71142a;
  --wine-bright: #9d2340;
  --wine-deep: #320812;
  --cream: #fff4dc;
  --paper: #f6e6c5;
  --paper-light: #fff7e5;
  --ink: #351a18;
  --muted-ink: #73554d;
  --gold: #d7af55;
  --gold-light: #f3d98d;
  --gold-deep: #8b6426;
  --stress: 42;
  --stress-bg-alpha: .18;
  --ambient-opacity: .32;
  --ambient-scale: .93;
  --card-glow-opacity: .35;
  --card-glow-scale: .93;
  --meter-shadow-alpha: .42;
  --range-glow-size: 38px;
  --range-glow-opacity: .55;
  --thumb-glow-size: 14px;
  --chocolate-halo-opacity: .31;
  --range-fill: 42%;
  --pointer-x: 50%;
  --pointer-y: 35%;
  --parallax-x: 0px;
  --parallax-y: 0px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.2, .9, .25, 1.18);
  --shadow-card: 0 32px 90px rgba(0, 0, 0, .46);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--night);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(118, 22, 46, var(--stress-bg-alpha)), transparent 34%),
    radial-gradient(circle at 82% 84%, rgba(126, 71, 23, .08), transparent 30%),
    linear-gradient(145deg, #080102 0%, #170407 52%, #0b0204 100%);
  color: var(--cream);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 18%, rgba(242, 204, 119, .035) 43%, transparent 62%);
  background-size: 180% 100%;
  animation: background-sheen 14s ease-in-out infinite;
}

button, input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 5px;
}

button:active {
  transform: translateY(1px) scale(.985);
}

::selection {
  color: #22060c;
  background: var(--gold-light);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--night);
  background: var(--gold-light);
  font-size: .85rem;
  font-weight: 700;
  transform: translateY(-180%);
  transition: transform .2s;
}

.skip-link:focus {
  transform: translateY(0);
}

.ambient-glow {
  position: fixed;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: min(86vw, 980px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--ambient-opacity);
  transform: translate(-50%, -50%) scale(var(--ambient-scale));
  background: radial-gradient(circle, rgba(128, 18, 47, .31), rgba(58, 7, 20, .14) 42%, transparent 70%);
  filter: blur(30px);
  transition: opacity .8s, transform 1.1s var(--ease-out);
}

#ambientCanvas,
#effectsCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#ambientCanvas { z-index: 1; }
#effectsCanvas { z-index: 90; }

.grain {
  position: fixed;
  z-index: 80;
  inset: -40%;
  pointer-events: none;
  opacity: .055;
  background-image:
    radial-gradient(circle at 18% 27%, rgba(255, 255, 255, .85) 0 .35px, transparent .7px),
    radial-gradient(circle at 72% 63%, rgba(255, 255, 255, .62) 0 .4px, transparent .75px),
    radial-gradient(circle at 46% 81%, rgba(0, 0, 0, .9) 0 .35px, transparent .7px);
  background-size: 4px 5px, 7px 6px, 5px 8px;
  animation: grain-shift .25s steps(2) infinite;
}

#experience {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
}

.scene {
  position: fixed;
  z-index: 2;
  inset: 0;
  min-height: 100svh;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s var(--ease-out), visibility 0s .8s;
}

.scene.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--gold);
  font-size: clamp(.61rem, 1.4vw, .72rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .28em;
  text-transform: uppercase;
}

/* ------------------------- INTRO & ENVELOPE ------------------------- */

.scene-intro {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: center;
  gap: clamp(10px, 2vh, 22px);
  padding: max(26px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.scene-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4%;
  left: 50%;
  width: min(74vw, 820px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 179, 87, .35), transparent);
  transform: translateX(-50%);
}

.intro-copy {
  position: relative;
  z-index: 9;
  padding-top: clamp(2vh, 5vh, 52px);
  text-align: center;
  animation: intro-copy-in 1.25s .2s both var(--ease-out);
  transition: opacity .6s, transform .8s var(--ease-out), filter .8s;
}

.intro-copy h1 {
  margin: 0;
  color: var(--cream);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(3rem, 8vw, 6.9rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.058em;
  text-shadow: 0 15px 58px rgba(125, 22, 44, .55);
}

.intro-copy h1 span {
  position: relative;
  font-style: italic;
}

.intro-copy h1 span::after {
  content: "";
  position: absolute;
  left: 3%;
  right: -4%;
  bottom: -.12em;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .7;
  transform: scaleX(0);
  animation: title-rule 1.1s 1s forwards var(--ease-out);
}

.intro-subtitle {
  margin: 20px 0 0;
  color: rgba(255, 244, 220, .62);
  font-size: clamp(.92rem, 2vw, 1.08rem);
  font-weight: 400;
  letter-spacing: .075em;
}

.ritual-stage {
  position: relative;
  width: min(100%, 820px);
  height: min(64svh, 650px);
  min-height: 400px;
  transform-style: preserve-3d;
  transition: transform 1s var(--ease-out);
}

.scene-intro:not(.is-opening) .ritual-stage {
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0);
}

.envelope-button {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: clamp(28px, 7vh, 74px);
  width: min(74vw, 384px);
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  perspective: 1100px;
  transform: translateX(-50%);
  transition: opacity .65s 1.55s, transform 1s var(--ease-out), filter .45s;
}

.envelope-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 73%;
  width: 76%;
  height: 17%;
  border-radius: 50%;
  pointer-events: none;
  opacity: .58;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .66), rgba(0, 0, 0, .22) 48%, transparent 74%);
  filter: blur(7px);
  transform: translateX(-50%) scaleX(.94);
  transition: opacity .45s, transform .45s var(--ease-out), filter .45s;
}

.envelope-button:disabled {
  cursor: default;
}

.envelope {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1.58;
  transform-style: preserve-3d;
  filter: drop-shadow(0 32px 32px rgba(0, 0, 0, .52));
  animation: envelope-float 5.5s 1.35s infinite ease-in-out both;
  transition: transform .45s var(--ease-out), filter .45s;
}

.envelope-button:not(:disabled):hover .envelope {
  transform: translateY(-8px) rotateX(3deg) scale(1.018);
  filter: drop-shadow(0 40px 38px rgba(0, 0, 0, .64));
}

.envelope-button:not(:disabled):hover::before {
  opacity: .72;
  filter: blur(9px);
  transform: translateX(-50%) scaleX(1.08);
}

.envelope-button:not(:disabled):hover .wax-seal::before {
  transform: translateX(140%) rotate(25deg);
}

.envelope-back,
.envelope-inner-letter,
.envelope-flap,
.envelope-pocket,
.wax-seal {
  position: absolute;
  display: block;
}

.envelope-back {
  z-index: 0;
  inset: 0;
  border: 1px solid rgba(236, 190, 99, .34);
  border-radius: 7px;
  background:
    radial-gradient(circle at 19% 31%, rgba(255, 226, 180, .045) 0 .7px, transparent 1px),
    radial-gradient(circle at 76% 68%, rgba(35, 0, 8, .12) 0 .65px, transparent 1px),
    linear-gradient(140deg, rgba(255, 255, 255, .055), transparent 32%),
    linear-gradient(155deg, #8f1f3b, #4e0919 78%);
  background-size: 5px 7px, 7px 5px, auto, auto;
  box-shadow: inset 0 0 45px rgba(50, 3, 13, .28);
}

.envelope-back::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(235, 187, 97, .15);
  border-radius: 3px;
}

.envelope-inner-letter {
  z-index: 1;
  left: 7%;
  right: 7%;
  top: 8%;
  height: 76%;
  padding: 17% 18%;
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, rgba(91, 60, 47, .035) 0 1px, transparent 1px 5px),
    var(--paper-light);
  box-shadow: 0 4px 15px rgba(0, 0, 0, .24);
  transition: transform 1s .52s var(--ease-out);
}

.envelope-inner-letter span {
  display: block;
  height: 1px;
  margin: 12px 0;
  background: rgba(80, 44, 37, .22);
}

.envelope-flap {
  z-index: 3;
  inset: 0 0 auto;
  height: 65%;
  border-top: 1px solid rgba(246, 207, 118, .32);
  background:
    radial-gradient(circle at 21% 34%, rgba(255, 227, 180, .045) 0 .7px, transparent 1px),
    linear-gradient(165deg, rgba(255, 255, 255, .06), transparent 40%),
    linear-gradient(170deg, #921f3c, #5a0b1e 78%);
  background-size: 6px 7px, auto, auto;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transition: transform .9s .26s cubic-bezier(.32, .02, .18, 1), filter .5s;
}

.envelope-flap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #4a0818, #76162c);
  clip-path: inherit;
  transform: rotateX(180deg) translateZ(1px);
  backface-visibility: hidden;
}

.envelope-pocket {
  z-index: 2;
  inset: 0;
  overflow: hidden;
  border-radius: 7px;
  pointer-events: none;
}

.pocket-left,
.pocket-right,
.pocket-bottom {
  position: absolute;
  inset: 0;
}

.pocket-left {
  background: linear-gradient(145deg, #7f1732, #5a0b1d);
  clip-path: polygon(0 0, 53% 52%, 0 100%);
}

.pocket-right {
  background: linear-gradient(215deg, #75142d, #450715);
  clip-path: polygon(100% 0, 47% 52%, 100% 100%);
}

.pocket-bottom {
  background: linear-gradient(172deg, #831a33, #4b0817);
  clip-path: polygon(0 100%, 50% 38%, 100% 100%);
}

.envelope-pocket::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 32%;
  border-right: 1px solid rgba(239, 191, 96, .17);
  border-bottom: 1px solid rgba(239, 191, 96, .17);
  border-left: 1px solid rgba(239, 191, 96, .17);
}

.wax-seal {
  z-index: 5;
  left: 50%;
  top: 51%;
  width: clamp(56px, 15%, 67px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #7c1328;
  border-radius: 48% 52% 47% 53%;
  color: #e8bc6a;
  background:
    radial-gradient(circle at 34% 23%, rgba(255, 177, 180, .45) 0 3%, transparent 11%),
    radial-gradient(circle at 40% 33%, #c43850, #951b34 45%, #580718 100%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .46), 0 2px 5px rgba(43, 1, 12, .42), inset 0 0 0 4px rgba(87, 4, 22, .3), inset 3px 4px 8px rgba(255, 134, 142, .1);
  transform: translate(-50%, -50%);
  transition: transform .42s var(--ease-spring), opacity .35s .12s, filter .35s;
}

.wax-seal::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(244, 207, 127, .36);
  border-radius: 50%;
}

.wax-seal::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -25%;
  left: -65%;
  width: 36%;
  height: 150%;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 211, .55), transparent);
  transform: skewX(-18deg);
  transition: transform .65s var(--ease-out);
}

.seal-letter {
  position: relative;
  z-index: 1;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.3rem, 4vw, 1.75rem);
  font-style: italic;
}

.open-hint {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 29px;
  color: rgba(255, 244, 220, .7);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  animation: hint-in 1s 1.25s both var(--ease-out), hint-pulse 3s 2.4s infinite ease-in-out;
  transition: opacity .35s;
}

.scene-intro.is-seal-pressed .wax-seal {
  filter: brightness(1.08) saturate(1.06);
  transform: translate(-50%, -50%) scale(.88) rotate(-2deg);
}

.scene-intro.is-seal-pressed .wax-seal::before {
  transform: translateX(140%) skewX(-18deg);
}

.open-hint span {
  display: inline-block;
  margin-left: 5px;
  color: var(--gold);
  transition: transform .25s;
}

.envelope-button:hover .open-hint span {
  transform: translate(2px, -2px);
}

/* Envelope opening choreography */

.scene-intro.is-opening .intro-copy {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-28px) scale(.96);
}

.scene-intro.is-opening .ritual-stage {
  transform: translateY(-5vh);
}

.scene-intro.is-opening .envelope {
  animation: envelope-open-nudge .55s both var(--ease-out);
}

.scene-intro.is-opening .wax-seal {
  opacity: 0;
  filter: blur(3px);
  transform: translate(-50%, -50%) scale(.25) rotate(12deg);
}

.scene-intro.is-opening .envelope-flap {
  transform: rotateX(180deg);
  filter: brightness(.78) drop-shadow(0 -12px 13px rgba(0, 0, 0, .28));
}

.scene-intro.is-opening .envelope-inner-letter {
  transform: translateY(-62%);
}

.scene-intro.is-opening .open-hint {
  opacity: 0;
  animation: none;
}

.scene-intro.is-opening .envelope-button {
  opacity: .7;
  filter: brightness(.82) saturate(.88);
  transform: translateX(-50%) translateY(265px) scale(.88);
}

.letter-card {
  position: absolute;
  z-index: 2;
  top: 49%;
  left: 50%;
  width: min(91vw, 590px);
  max-height: min(76svh, 680px);
  overflow: hidden;
  border: 1px solid rgba(138, 97, 44, .31);
  border-radius: 2px;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(115, 66, 42, .026) 1px, transparent 1px),
    linear-gradient(rgba(115, 66, 42, .022) 1px, transparent 1px),
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, .75), transparent 32%),
    linear-gradient(140deg, var(--paper-light), var(--paper));
  background-size: 5px 5px, 5px 5px, auto, auto;
  box-shadow: 0 42px 100px rgba(0, 0, 0, .64), 0 0 0 1px rgba(255, 255, 255, .25) inset;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18%) scale(.56) rotateX(-3deg);
  transform-origin: 50% 100%;
}

.letter-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  border: 1px solid rgba(133, 88, 40, .16);
  pointer-events: none;
}

.letter-scroll {
  position: relative;
  max-height: inherit;
  padding: clamp(38px, 7vw, 58px) clamp(28px, 7vw, 66px) clamp(36px, 6vw, 52px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(122, 77, 37, .3) transparent;
  scrollbar-width: thin;
}

.letter-rule {
  position: absolute;
  z-index: 3;
  left: 50%;
  width: 72%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(133, 87, 36, .5), transparent);
  transform: translateX(-50%);
}

.letter-rule-top { top: 24px; }
.letter-rule-bottom { bottom: 22px; }

.letter-corner {
  position: absolute;
  z-index: 4;
  top: 15px;
  left: 50%;
  padding: 0 8px;
  color: rgba(139, 95, 39, .62);
  background: var(--paper-light);
  font-size: .8rem;
  transform: translateX(-50%);
}

.letter-kicker {
  margin: 0 0 5px;
  color: var(--gold-deep);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.letter-card h2 {
  margin: 0 0 24px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(2.05rem, 6vw, 3.1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.035em;
}

.letter-body p {
  margin: 0 0 .95em;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(.97rem, 2.1vw, 1.08rem);
  line-height: 1.62;
  opacity: 0;
  transform: translateY(13px);
}

.letter-body p:last-child {
  margin-bottom: .25em;
}

.letter-body .lindor-word {
  position: relative;
  color: #84142d;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(218, 174, 80, .6);
}

.letter-body .wink {
  color: #8d5c26;
  white-space: nowrap;
}

.signature {
  margin: 22px 0 28px;
  opacity: 0;
  transform: translateY(10px);
}

.signature span {
  position: relative;
  display: inline-block;
  color: #6b1026;
  font-family: "Segoe Script", "Bradley Hand", cursive;
  font-size: clamp(1.6rem, 5vw, 2.15rem);
  line-height: 1;
  transform: rotate(-4deg);
}

.signature span::after {
  content: "";
  position: absolute;
  left: 0;
  right: -14px;
  bottom: -8px;
  height: 1px;
  background: linear-gradient(90deg, #7b1630, transparent);
  transform-origin: left;
  transform: scaleX(0);
}

.scene-intro.is-letter-open .letter-card {
  z-index: 8;
  pointer-events: auto;
  animation: letter-emerge 1.55s .05s both var(--ease-out);
}

.scene-intro.is-letter-open .letter-body p {
  animation: paragraph-in .62s var(--paragraph-delay, 1.6s) both var(--ease-out);
}

.scene-intro.is-letter-open .signature {
  animation: paragraph-in .75s var(--signature-delay, 3.65s) both var(--ease-out);
}

.scene-intro.is-letter-open .signature span::after {
  animation: signature-line .7s 4.15s both var(--ease-out);
}

.letter-next {
  width: 100%;
  opacity: 0;
  transform: translateY(12px);
}

.scene-intro.is-letter-open .letter-next {
  animation: paragraph-in .7s 4.45s both var(--ease-out);
}

/* ------------------------- SHARED BUTTONS ------------------------- */

.primary-button,
.ghost-button {
  position: relative;
  min-height: 52px;
  border-radius: 999px;
  cursor: pointer;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
  transition: transform .25s var(--ease-out), box-shadow .3s, background .3s, color .3s;
}

.primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  border: 1px solid #7d1028;
  padding: 14px 25px;
  color: #fff3dc;
  background: linear-gradient(135deg, #77162f, #4b0818);
  box-shadow: 0 13px 30px rgba(75, 8, 24, .24), inset 0 1px rgba(255, 255, 255, .12);
}

.primary-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 239, 202, .24) 47%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .8s var(--ease-out);
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 17px 34px rgba(75, 8, 24, .34), inset 0 1px rgba(255, 255, 255, .18);
}

.primary-button:hover::before {
  transform: translateX(130%);
}

.primary-button > span {
  position: relative;
  z-index: 1;
}

.button-arrow,
.button-spark {
  color: var(--gold-light);
  font-size: 1.1rem;
  transition: transform .25s var(--ease-out);
}

.primary-button:hover .button-arrow { transform: translateX(4px); }
.primary-button:hover .button-spark { transform: rotate(90deg) scale(1.14); }

.ghost-button {
  border: 1px solid rgba(235, 194, 107, .52);
  padding: 12px 23px;
  color: var(--gold-light);
  background: rgba(47, 5, 15, .48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ghost-button:hover {
  color: #26050d;
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.primary-button:active,
.ghost-button:active {
  transform: translateY(0) scale(.985);
}

/* ------------------------- NERVOMETER ------------------------- */

.scene-meter {
  background: rgba(8, 1, 3, .07);
}

.meter-scroll {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(217, 176, 87, .35) transparent;
  scrollbar-width: thin;
}

.meter-shell {
  width: min(92vw, 850px);
  margin: 0 auto;
  padding: max(72px, calc(env(safe-area-inset-top) + 56px)) 0 max(64px, calc(env(safe-area-inset-bottom) + 48px));
  text-align: center;
}

.meter-header {
  margin-bottom: clamp(32px, 6vw, 58px);
}

.meter-header h2 {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(2.45rem, 7vw, 5.4rem);
  font-weight: 400;
  line-height: .97;
  letter-spacing: -.052em;
}

.meter-header h2 > span {
  color: var(--cream);
  font-style: italic;
}

.meter-header sup {
  margin-left: .12em;
  color: var(--gold);
  font-family: Inter, sans-serif;
  font-size: .21em;
  font-style: normal;
  font-weight: 700;
  vertical-align: top;
  letter-spacing: 0;
}

.meter-question {
  max-width: 620px;
  margin: 24px auto 0;
  color: rgba(255, 244, 220, .78);
  font-size: clamp(1rem, 2.5vw, 1.24rem);
  line-height: 1.55;
}

.scientific-note {
  margin: 9px 0 0;
  color: rgba(215, 175, 85, .68);
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .07em;
}

.scientific-note span {
  margin-right: 4px;
}

.nervometer-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(225, 184, 94, .28);
  border-radius: clamp(20px, 4vw, 34px);
  padding: clamp(28px, 5vw, 54px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 28%),
    linear-gradient(150deg, rgba(83, 10, 28, .88), rgba(30, 4, 11, .94));
  box-shadow: var(--shadow-card), inset 0 1px rgba(255, 255, 255, .06);
  isolation: isolate;
}

.nervometer-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -38%;
  left: 50%;
  width: min(80vw, 610px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--card-glow-opacity);
  background: radial-gradient(circle, rgba(183, 44, 74, .48), transparent 66%);
  filter: blur(25px);
  transform: translateX(-50%) scale(var(--card-glow-scale));
  transition: opacity .7s, transform .8s var(--ease-out);
}

.nervometer-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10px;
  border: 1px solid rgba(226, 185, 96, .11);
  border-radius: calc(clamp(20px, 4vw, 34px) - 8px);
  pointer-events: none;
}

.meter-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(280px, 58%);
  margin: 0 auto 20px;
}

.meter-ornament span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 175, 85, .46));
}

.meter-ornament span:last-child {
  background: linear-gradient(90deg, rgba(217, 175, 85, .46), transparent);
}

.meter-ornament i {
  display: grid;
  width: 26px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(217, 175, 85, .45);
  border-radius: 50%;
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: .75rem;
  font-weight: 400;
}

.percentage-display {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 122px;
  color: var(--cream);
  font-family: "Iowan Old Style", Georgia, serif;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 10px 44px rgba(208, 59, 91, var(--meter-shadow-alpha));
}

.percentage-display > span {
  font-size: clamp(5.3rem, 16vw, 9.2rem);
  font-weight: 400;
  line-height: .83;
  letter-spacing: -.075em;
}

.percentage-display small {
  margin: .08em 0 0 .15em;
  color: var(--gold);
  font-family: Inter, sans-serif;
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: 300;
}

.percentage-display.is-emphasized {
  animation: meter-emphasis .34s both var(--ease-out);
}

.range-block {
  max-width: 660px;
  margin: 18px auto 0;
}

.range-track-wrap {
  position: relative;
  height: 48px;
  display: flex;
  align-items: center;
}

.range-glow {
  position: absolute;
  z-index: -1;
  left: var(--range-fill);
  top: 50%;
  width: var(--range-glow-size);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--range-glow-opacity);
  background: rgba(240, 192, 84, .6);
  filter: blur(15px);
  transform: translate(-50%, -50%);
  transition: left .08s linear, opacity .3s;
}

input[type="range"] {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: grab;
  background: transparent;
  touch-action: pan-y;
}

input[type="range"]:active { cursor: grabbing; }

input[type="range"]::-webkit-slider-runnable-track {
  height: 7px;
  border: 1px solid rgba(247, 211, 134, .24);
  border-radius: 99px;
  background:
    linear-gradient(90deg, var(--gold-light), #b54a55 var(--range-fill), rgba(255, 255, 255, .12) var(--range-fill)),
    #260813;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35);
}

input[type="range"]::-moz-range-track {
  height: 7px;
  border: 1px solid rgba(247, 211, 134, .24);
  border-radius: 99px;
  background:
    linear-gradient(90deg, var(--gold-light), #b54a55 var(--range-fill), rgba(255, 255, 255, .12) var(--range-fill)),
    #260813;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35);
}

input[type="range"]::-webkit-slider-thumb {
  width: 31px;
  height: 31px;
  margin-top: -13px;
  appearance: none;
  -webkit-appearance: none;
  border: 3px solid #fff0c7;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, white 0 5%, transparent 12%),
    linear-gradient(145deg, #e9c778, #9d6925);
  box-shadow: 0 0 0 5px rgba(216, 172, 81, .14), 0 7px 20px rgba(0, 0, 0, .5), 0 0 var(--thumb-glow-size) rgba(241, 187, 72, .54);
  transition: box-shadow .25s, transform .2s;
}

input[type="range"]::-moz-range-thumb {
  width: 27px;
  height: 27px;
  border: 3px solid #fff0c7;
  border-radius: 50%;
  background: linear-gradient(145deg, #e9c778, #9d6925);
  box-shadow: 0 0 0 5px rgba(216, 172, 81, .14), 0 7px 20px rgba(0, 0, 0, .5), 0 0 var(--thumb-glow-size) rgba(241, 187, 72, .54);
  transition: box-shadow .25s, transform .2s;
}

input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:active::-moz-range-thumb { transform: scale(1.12); }

.nervometer-card.is-dragging input[type="range"]::-webkit-slider-thumb {
  transform: scale(1.09);
  box-shadow: 0 0 0 7px rgba(216, 172, 81, .18), 0 9px 24px rgba(0, 0, 0, .54), 0 0 calc(var(--thumb-glow-size) + 7px) rgba(241, 187, 72, .7);
}

.nervometer-card.is-dragging input[type="range"]::-moz-range-thumb {
  transform: scale(1.09);
  box-shadow: 0 0 0 7px rgba(216, 172, 81, .18), 0 9px 24px rgba(0, 0, 0, .54), 0 0 calc(var(--thumb-glow-size) + 7px) rgba(241, 187, 72, .7);
}

.range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: rgba(255, 244, 220, .46);
  font-size: .64rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.range-labels span:first-child { text-align: left; }
.range-labels span:last-child { text-align: right; }

.result-divider {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: clamp(34px, 7vw, 56px) 0 clamp(26px, 5vw, 40px);
  color: rgba(215, 175, 85, .55);
}

.result-divider span {
  flex: 1;
  height: 1px;
  background: rgba(215, 175, 85, .18);
}

.result-divider b {
  font-size: .53rem;
  font-weight: 800;
  letter-spacing: .22em;
}

.dose-label,
.quote-label {
  margin: 0 0 7px;
  color: var(--gold);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.result-panel h3 {
  margin: 0;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: clamp(2.5rem, 8vw, 4.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}

.result-message {
  min-height: 1.6em;
  margin: 14px auto 0;
  color: rgba(255, 244, 220, .72);
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  font-style: italic;
  line-height: 1.45;
  transition: opacity .2s, transform .25s;
}

.result-message.is-changing {
  opacity: 0;
  transform: translateY(-7px);
}

.nervometer-card.is-critical {
  border-color: rgba(235, 178, 72, .52);
  box-shadow: 0 32px 100px rgba(74, 0, 17, .68), 0 0 55px rgba(165, 29, 53, .19), inset 0 1px rgba(255, 255, 255, .08);
}

.nervometer-card.is-critical .result-panel h3 {
  color: var(--gold-light);
  font-size: clamp(2rem, 7vw, 3.6rem);
  text-transform: uppercase;
  text-shadow: 0 0 25px rgba(225, 173, 71, .32);
}

.chocolate-stage {
  position: relative;
  min-height: 170px;
  display: grid;
  place-items: center;
  margin: 25px auto 0;
}

.chocolate-halo {
  position: absolute;
  left: 50%;
  top: 43%;
  width: min(80%, 480px);
  height: 105px;
  border-radius: 50%;
  opacity: var(--chocolate-halo-opacity);
  background: radial-gradient(ellipse, rgba(190, 44, 66, .33), transparent 68%);
  filter: blur(18px);
  transform: translate(-50%, -50%);
}

.chocolate-tray {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: min(100%, 610px);
  min-height: 108px;
  gap: 3px clamp(1px, .7vw, 7px);
}

.chocolate-ball {
  --ball-rotate: 0deg;
  position: relative;
  width: clamp(67px, 10vw, 85px);
  height: 78px;
  border: 0;
  padding: 0;
  color: var(--gold-light);
  background: transparent;
  cursor: pointer;
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--ball-rotate));
  transition: filter .28s, transform .28s var(--ease-spring), opacity .25s;
}

.chocolate-ball.is-entering {
  opacity: 0;
  transform: translateY(11px) scale(.72) rotate(calc(var(--ball-rotate) - 7deg));
  animation: chocolate-arrive .65s var(--ball-delay, 0s) both var(--ease-spring);
}

.chocolate-ball:hover {
  z-index: 3;
  filter: drop-shadow(0 11px 15px rgba(0, 0, 0, .46)) brightness(1.06);
  transform: translateY(-4px) scale(1.035) rotate(var(--ball-rotate));
}

.chocolate-ball.is-removing {
  opacity: 0;
  transform: translateY(-12px) scale(.1) rotate(22deg);
}

.chocolate-ball.is-popped {
  animation: chocolate-pop .66s both var(--ease-spring);
}

.chocolate-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(var(--ball-rotate));
}

.wrapper-twist {
  position: relative;
  z-index: 0;
  width: 24px;
  height: 31px;
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(250, 210, 115, .23) 3px 4px),
    linear-gradient(135deg, #8f1831, #c52e48 48%, #6b0b22);
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25));
}

.wrapper-twist.left {
  margin-right: -6px;
  clip-path: polygon(0 12%, 100% 25%, 80% 50%, 100% 75%, 0 90%, 24% 50%);
}

.wrapper-twist.right {
  margin-left: -6px;
  clip-path: polygon(100% 12%, 0 25%, 20% 50%, 0 75%, 100% 90%, 76% 50%);
}

.foil-core {
  position: relative;
  z-index: 1;
  width: 55px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e7b966;
  border-radius: 48% 52% 50% 50%;
  background:
    radial-gradient(circle at 34% 23%, rgba(255, 250, 224, .8) 0 3%, transparent 11%),
    repeating-radial-gradient(circle at 55% 58%, transparent 0 5px, rgba(255, 207, 107, .08) 6px 7px),
    radial-gradient(circle at 38% 32%, #d33752 0 20%, #a21635 55%, #5d0a20 100%);
  box-shadow: inset -7px -8px 13px rgba(46, 0, 14, .35), inset 5px 5px 10px rgba(255, 143, 147, .16), 0 7px 11px rgba(0, 0, 0, .31);
}

.foil-core::before {
  content: "";
  position: absolute;
  top: -25%;
  left: -80%;
  width: 38%;
  height: 150%;
  background: linear-gradient(90deg, transparent, rgba(255, 239, 193, .4), transparent);
  transform: skewX(-16deg);
  animation: foil-shine 7.5s var(--shine-delay, 0s) infinite ease-in-out;
}

.foil-core::after {
  content: "✦";
  display: grid;
  width: 24px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(244, 208, 128, .56);
  border-radius: 50%;
  color: #f2cb78;
  font-size: .55rem;
  text-shadow: 0 0 6px rgba(242, 203, 120, .5);
}

.chocolate-hint {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  margin: 0;
  color: rgba(255, 244, 220, .38);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.chocolate-hint span {
  color: rgba(216, 175, 85, .58);
}

.chocolate-toast {
  min-height: 24px;
  margin-top: 6px;
  color: var(--gold-light);
  font-size: .71rem;
  font-weight: 750;
  letter-spacing: .07em;
  opacity: 0;
  transform: translateY(7px);
}

.chocolate-toast.is-visible {
  animation: toast-in-out 2.25s both var(--ease-out);
}

.burst-particle {
  position: fixed;
  z-index: 95;
  width: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: var(--gold-light);
  box-shadow: 0 0 9px var(--gold);
  animation: burst-out .72s both var(--ease-out);
}

.quote-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 4vw, 34px);
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid rgba(224, 183, 95, .23);
  border-radius: 20px;
  padding: clamp(25px, 5vw, 39px) clamp(25px, 6vw, 48px);
  text-align: left;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .028), transparent 35%),
    rgba(46, 6, 16, .72);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .25);
}

.quote-mark {
  align-self: start;
  height: 50px;
  color: rgba(216, 175, 85, .44);
  font-family: Georgia, serif;
  font-size: 4.7rem;
  line-height: 1;
}

.quote-content {
  transition: opacity .16s, transform .18s var(--ease-out), filter .18s;
}

.quote-content.is-changing {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-6px);
}

.quote-content.is-entering {
  animation: quote-enter .32s both var(--ease-out);
}

.quote-card blockquote {
  margin: 0;
  color: rgba(255, 244, 220, .91);
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.18rem, 3.1vw, 1.65rem);
  font-style: italic;
  line-height: 1.35;
}

.quote-number {
  align-self: end;
  color: rgba(217, 175, 85, .28);
  font-family: Georgia, serif;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
}

.birthday-button {
  min-width: min(100%, 355px);
  margin: 34px auto 0;
  color: #2b0811;
  border-color: #e9ca81;
  background: linear-gradient(135deg, #f1d88f, #bf8d38);
  box-shadow: 0 15px 44px rgba(183, 132, 46, .19), inset 0 1px rgba(255, 255, 255, .45);
}

.birthday-button .button-spark { color: #72162c; }

.tiny-disclaimer {
  margin: 19px 0 0;
  color: rgba(255, 244, 220, .29);
  font-size: .61rem;
  letter-spacing: .05em;
}

.scene-meter .reveal-item {
  opacity: 0;
  transform: translateY(22px);
}

.scene-meter.is-active .reveal-item {
  animation: meter-item-in .85s var(--item-delay, .15s) both var(--ease-out);
}

.scene-meter .reveal-item:nth-child(2) { --item-delay: .3s; }
.scene-meter .reveal-item:nth-child(3) { --item-delay: .48s; }
.scene-meter .reveal-item:nth-child(4) { --item-delay: .62s; }
.scene-meter .reveal-item:nth-child(5) { --item-delay: .7s; }

/* ------------------------- SCENE TRANSITION ------------------------- */

.transition-veil {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: flex;
  visibility: hidden;
  pointer-events: none;
}

.transition-veil span {
  flex: 1;
  background: linear-gradient(180deg, #3d0715, #120306);
  transform: scaleY(0);
  transform-origin: bottom;
}

.transition-veil.is-running {
  visibility: visible;
}

.transition-veil.is-running span {
  animation: veil-sweep 1.35s var(--veil-delay, 0s) both var(--ease-out);
}

.transition-veil span:nth-child(2) { --veil-delay: .05s; }
.transition-veil span:nth-child(3) { --veil-delay: .1s; }
.transition-veil span:nth-child(4) { --veil-delay: .15s; }
.transition-veil span:nth-child(5) { --veil-delay: .2s; }

.scene-intro.is-leaving .letter-card {
  animation: letter-fold-away .85s both var(--ease-out);
}

/* ------------------------- EMERGENCY EASTER EGG ------------------------- */

.emergency-overlay,
.birthday-finale {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s var(--ease-out), visibility 0s .7s;
}

.emergency-overlay {
  background: radial-gradient(circle at center, rgba(109, 14, 37, .97), rgba(13, 2, 5, .985) 72%);
}

.emergency-overlay.is-active,
.birthday-finale.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.emergency-aura {
  position: absolute;
  width: min(90vw, 800px);
  aspect-ratio: 1;
  border: 1px solid rgba(233, 192, 99, .18);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 70px rgba(225, 182, 87, .025), 0 0 0 145px rgba(225, 182, 87, .018);
}

.emergency-overlay.is-active .emergency-aura {
  animation: emergency-aura 3.4s .5s both ease-out;
}

.emergency-content {
  position: relative;
  z-index: 2;
  width: min(92vw, 760px);
  text-align: center;
}

.emergency-step,
.emergency-code,
.emergency-final {
  opacity: 0;
  transform: translateY(15px);
}

.emergency-step {
  margin: 0;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: clamp(2rem, 7vw, 4.6rem);
  line-height: 1.05;
}

.emergency-code {
  margin: 0;
  color: var(--gold-light);
  font-size: clamp(.8rem, 2.4vw, 1.1rem);
  font-weight: 850;
  letter-spacing: clamp(.13em, .8vw, .32em);
}

.emergency-overlay.step-one #emergencyLead { animation: emergency-line 1.2s both var(--ease-out); }
.emergency-overlay.step-two #emergencyLead { display: none; }
.emergency-overlay.step-two #emergencySub { animation: emergency-line 1.2s both var(--ease-out); }
.emergency-overlay.step-three #emergencySub { display: none; }
.emergency-overlay.step-three #emergencyCode { animation: emergency-code-in 1s both var(--ease-out); }
.emergency-overlay.step-final #emergencyCode { animation: emergency-code-out .55s both var(--ease-out); }
.emergency-overlay.step-final .emergency-final { animation: emergency-final-in 1s .2s both var(--ease-out); }

.emergency-chocolates,
.finale-chocolates {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.floating-chocolate {
  position: absolute;
  width: clamp(55px, 8vw, 78px);
  height: 70px;
  opacity: 0;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .42));
}

.step-three .floating-chocolate {
  animation: emergency-float 2.6s var(--float-delay, 0s) both ease-in-out;
}

.emergency-final h2 {
  margin: 0;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: clamp(2.6rem, 8vw, 6rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.055em;
}

.emergency-final p {
  max-width: 580px;
  margin: 22px auto 30px;
  color: rgba(255, 244, 220, .69);
  font-size: clamp(.92rem, 2.2vw, 1.12rem);
  line-height: 1.6;
}

/* ------------------------- BIRTHDAY FINALE ------------------------- */

.birthday-finale {
  isolation: isolate;
  background:
    radial-gradient(circle at center, rgba(99, 14, 36, .94), rgba(14, 2, 6, .99) 70%),
    var(--night);
}

.birthday-finale::before,
.birthday-finale::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.birthday-finale::before {
  z-index: 0;
  background: radial-gradient(circle at 50% 47%, rgba(239, 197, 105, .22), rgba(137, 31, 56, .09) 25%, transparent 58%);
  filter: blur(9px);
  transform: scale(.72);
}

.birthday-finale::after {
  z-index: 1;
  inset: -5%;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(247, 217, 143, .5) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 21%, rgba(247, 217, 143, .34) 0 1.2px, transparent 2px),
    radial-gradient(circle at 83% 72%, rgba(220, 171, 75, .4) 0 1px, transparent 1.8px),
    radial-gradient(circle at 27% 78%, rgba(245, 224, 173, .3) 0 .9px, transparent 1.8px);
  background-size: 118px 127px, 173px 151px, 139px 167px, 191px 143px;
  filter: blur(.2px);
}

.birthday-finale.is-active::before {
  animation: finale-center-light 1.35s .12s both var(--ease-out);
}

.birthday-finale.is-active::after {
  animation: finale-depth-particles 18s .5s both ease-in-out infinite;
}

.finale-rays {
  z-index: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 100vh);
  aspect-ratio: 1;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(236, 194, 99, .035) 0deg 3deg, transparent 3deg 17deg);
  -webkit-mask-image: radial-gradient(circle, black, transparent 67%);
  mask-image: radial-gradient(circle, black, transparent 67%);
  transform: translate(-50%, -50%) rotate(0deg);
}

.birthday-finale.is-active .finale-rays {
  animation: finale-rays 32s linear infinite, finale-rays-in 1.4s both var(--ease-out);
}

.finale-chocolates { z-index: 2; }

.finale-content {
  position: relative;
  z-index: 3;
  width: min(92vw, 840px);
  text-align: center;
}

.finale-content > * {
  opacity: 0;
  transform: translateY(20px);
}

.birthday-finale.is-active .finale-content > * {
  animation: finale-copy-in .88s var(--finale-delay, .8s) both var(--ease-out);
}

.birthday-finale.is-active .finale-content > :nth-child(1) { --finale-delay: .68s; }
.birthday-finale.is-active .finale-content > :nth-child(2) { --finale-delay: 1s; }
.birthday-finale.is-active .finale-content > :nth-child(3) { --finale-delay: 1.48s; }
.birthday-finale.is-active .finale-content > :nth-child(4) { --finale-delay: 1.98s; }
.birthday-finale.is-active .finale-content > :nth-child(5) { --finale-delay: 2.42s; }
.birthday-finale.is-active .finale-content > :nth-child(6) { --finale-delay: 2.78s; }

.finale-content h2 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(3.2rem, 10vw, 7.8rem);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.065em;
  text-shadow: 0 20px 70px rgba(0, 0, 0, .3);
}

.birthday-finale.is-active .finale-content h2 {
  animation: finale-title-in 1.05s 1s both var(--ease-out);
}

.finale-content h2::after {
  content: "";
  position: absolute;
  inset: -18% -45%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 235, 180, .28) 48%, rgba(255, 248, 220, .45) 50%, transparent 61%);
  mix-blend-mode: screen;
  transform: translateX(-64%);
}

.birthday-finale.is-active .finale-content h2::after {
  animation: finale-title-shine 1.05s 1.58s both var(--ease-out);
}

.finale-content h2 > span:first-child {
  color: var(--gold-light);
  font-style: italic;
}

.heart {
  display: inline-block;
  margin-left: .08em;
  color: #d75a6f;
  font-size: .42em;
  vertical-align: middle;
  filter: drop-shadow(0 0 13px rgba(214, 65, 92, .48));
  animation: heart-beat 2s 2s infinite ease-in-out;
}

.finale-message {
  max-width: 600px;
  margin: 28px auto 0;
  color: rgba(255, 244, 220, .76);
  font-size: clamp(1rem, 2.6vw, 1.28rem);
  line-height: 1.55;
}

.finale-signoff {
  margin: 26px 0 0;
  color: var(--cream);
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.45rem, 4vw, 2rem);
  line-height: 1.3;
}

.finale-signoff span {
  display: inline-block;
  margin-top: 6px;
  color: var(--gold-light);
  font-family: "Segoe Script", "Bradley Hand", cursive;
  transform: rotate(-3deg);
}

.finale-ps {
  margin: 23px 0 28px;
  color: rgba(255, 244, 220, .43);
  font-size: .69rem;
  line-height: 1.5;
}

.finale-chocolates .floating-chocolate {
  --depth-scale: 1;
  --float-opacity: .5;
  --float-duration: 9s;
  animation-duration: var(--float-duration);
}

.finale-chocolates .floating-chocolate[data-depth="foreground"] {
  --depth-scale: 1.42;
  --float-opacity: .36;
  --float-duration: 11.5s;
  filter: blur(2.8px) drop-shadow(0 18px 24px rgba(0, 0, 0, .52));
}

.finale-chocolates .floating-chocolate[data-depth="mid"] {
  --depth-scale: .92;
  --float-opacity: .58;
  --float-duration: 8.2s;
}

.finale-chocolates .floating-chocolate[data-depth="background"] {
  --depth-scale: .58;
  --float-opacity: .25;
  --float-duration: 14s;
  filter: blur(1px) drop-shadow(0 10px 16px rgba(0, 0, 0, .35));
}

.finale-chocolates .chocolate-art {
  transform: scale(var(--depth-scale)) rotate(var(--ball-rotate));
}

.birthday-finale.is-active .floating-chocolate {
  animation-name: finale-chocolate;
  animation-delay: var(--float-delay, 0s);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.noscript-message {
  position: fixed;
  z-index: 1000;
  inset: auto 18px 18px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 15px;
  color: var(--ink);
  background: var(--paper);
  text-align: center;
}

/* ------------------------- KEYFRAMES ------------------------- */

@keyframes background-sheen {
  0%, 22%, 100% { background-position: 130% 0; }
  50%, 72% { background-position: -60% 0; }
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2%, -1%); }
  50% { transform: translate(-1%, 2%); }
  75% { transform: translate(1%, 1%); }
  100% { transform: translate(-2%, -1%); }
}

@keyframes intro-copy-in {
  from { opacity: 0; filter: blur(9px); transform: translateY(22px); }
}

@keyframes title-rule { to { transform: scaleX(1); } }

@keyframes envelope-float {
  0%, 100% { transform: translateY(0) rotateZ(-.35deg); }
  50% { transform: translateY(-10px) rotateZ(.4deg); }
}

@keyframes hint-in {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes hint-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: .92; }
}

@keyframes envelope-open-nudge {
  0% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(8px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes letter-emerge {
  0% { z-index: 2; opacity: 0; transform: translate(-50%, 18%) scale(.56) rotateX(-3deg); }
  18% { opacity: 1; }
  48% { z-index: 2; transform: translate(-50%, -13%) scale(.78) rotateX(-1deg); }
  49% { z-index: 8; }
  100% { z-index: 8; opacity: 1; transform: translate(-50%, -50%) scale(1) rotateX(0); }
}

@keyframes paragraph-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes signature-line { to { transform: scaleX(1); } }

@keyframes meter-item-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes chocolate-arrive {
  65% { opacity: 1; transform: translateY(-4px) scale(1.035) rotate(calc(var(--ball-rotate) + 2deg)); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--ball-rotate)); }
}

@keyframes meter-emphasis {
  0%, 100% { transform: scale(1); }
  48% { transform: scale(1.035); }
}

@keyframes chocolate-pop {
  0%, 100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--ball-rotate)); }
  34% { transform: translateY(-24px) scale(1.12) rotate(calc(var(--ball-rotate) + 13deg)); }
  68% { transform: translateY(2px) scale(.96) rotate(calc(var(--ball-rotate) - 4deg)); }
}

@keyframes foil-shine {
  0%, 60%, 100% { transform: translateX(0) skewX(-16deg); }
  78% { transform: translateX(390%) skewX(-16deg); }
}

@keyframes toast-in-out {
  0% { opacity: 0; transform: translateY(7px); }
  16%, 76% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes burst-out {
  to { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) scale(.1) rotate(120deg); }
}

@keyframes quote-enter {
  from { opacity: 0; filter: blur(2px); transform: translateY(6px); }
}

@keyframes veil-sweep {
  0% { transform: scaleY(0); transform-origin: bottom; }
  44% { transform: scaleY(1); transform-origin: bottom; }
  56% { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: top; }
}

@keyframes letter-fold-away {
  to { opacity: 0; filter: blur(8px); transform: translate(-50%, -48%) scale(.72) rotateX(18deg); }
}

@keyframes emergency-aura {
  0% { opacity: 0; transform: scale(.3); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes emergency-line {
  0% { opacity: 0; transform: translateY(15px) scale(.96); }
  22%, 72% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-13px) scale(1.02); }
}

@keyframes emergency-code-in {
  from { opacity: 0; letter-spacing: .7em; filter: blur(5px); transform: translateY(12px); }
  to { opacity: 1; filter: none; transform: translateY(0); }
}

@keyframes emergency-code-out {
  to { opacity: 0; filter: blur(6px); transform: scale(1.12); }
}

@keyframes emergency-final-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(25px) scale(.95); }
  to { opacity: 1; filter: none; transform: translateY(0) scale(1); }
}

@keyframes emergency-float {
  0% { opacity: 0; transform: translateY(35px) rotate(-12deg) scale(.7); }
  20%, 70% { opacity: 1; }
  50% { transform: translateY(-24px) rotate(8deg) scale(1); }
  100% { opacity: 0; transform: translateY(-70px) rotate(-3deg) scale(.86); }
}

@keyframes finale-rays-in {
  from { opacity: 0; }
  to { opacity: .18; }
}

@keyframes finale-rays {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes finale-copy-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes finale-center-light {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: .78; transform: scale(1); }
}

@keyframes finale-depth-particles {
  0%, 100% { opacity: .34; transform: translate3d(0, 0, 0); }
  50% { opacity: .52; transform: translate3d(0, -8px, 0); }
}

@keyframes finale-title-in {
  from { opacity: 0; filter: blur(5px); transform: translateY(24px) scale(.92); }
  to { opacity: 1; filter: none; transform: translateY(0) scale(1); }
}

@keyframes finale-title-shine {
  0% { opacity: 0; transform: translateX(-64%); }
  22%, 72% { opacity: 1; }
  100% { opacity: 0; transform: translateX(64%); }
}

@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  13% { transform: scale(1.14); }
  26% { transform: scale(1); }
}

@keyframes finale-chocolate {
  0% { opacity: 0; transform: translateY(35px) rotate(-12deg); }
  18%, 76% { opacity: var(--float-opacity); }
  50% { transform: translateY(-12px) rotate(6deg); }
  100% { opacity: 0; transform: translateY(-42px) rotate(-4deg); }
}

/* ------------------------- RESPONSIVE ------------------------- */

@media (min-width: 701px) and (min-height: 800px) {
  .letter-card { max-height: min(84svh, 700px); }

  .letter-scroll {
    padding: 34px 58px 30px;
  }

  .letter-card h2 { margin-bottom: 15px; }
  .letter-body p { margin-bottom: .68em; line-height: 1.48; }
  .signature { margin: 14px 0 19px; }
  .letter-next { min-height: 50px; }
}

@media (min-width: 900px) and (min-height: 850px) {
  .envelope-button { bottom: clamp(132px, 16svh, 174px); }
}

@media (max-width: 700px) {
  .grain { opacity: .038; }

  .scene-intro {
    grid-template-rows: auto 1fr;
    gap: 0;
    padding-inline: 12px;
  }

  .intro-copy { padding-top: 3vh; }
  .intro-copy h1 { font-size: clamp(2.85rem, 15vw, 4.6rem); }
  .intro-subtitle { margin-top: 15px; font-size: .9rem; }

  .ritual-stage {
    width: 100%;
    height: min(67svh, 600px);
    min-height: 390px;
  }

  .envelope-button {
    bottom: max(42px, 7svh);
    width: min(82vw, 350px);
  }

  .scene-intro.is-opening .ritual-stage {
    height: 82svh;
    transform: translateY(-4vh);
  }

  .scene-intro.is-opening .envelope-button {
    opacity: .44;
    transform: translateX(-50%) translateY(120px) scale(.88);
  }

  .letter-card {
    width: min(94vw, 540px);
    max-height: 78svh;
  }

  .letter-scroll {
    padding: 39px 28px 38px;
  }

  .letter-card h2 { margin-bottom: 19px; }
  .letter-body p { font-size: .96rem; line-height: 1.56; }
  .signature { margin: 18px 0 24px; }

  .primary-button { font-size: .68rem; letter-spacing: .055em; }

  .meter-shell {
    width: min(94vw, 850px);
    padding-top: max(54px, calc(env(safe-area-inset-top) + 38px));
  }

  .meter-header { margin-bottom: 31px; }
  .meter-header h2 { font-size: clamp(2.35rem, 12.4vw, 4rem); }
  .meter-question { margin-top: 19px; font-size: 1rem; }

  .nervometer-card {
    border-radius: 23px;
    padding: 28px 18px 31px;
  }

  .nervometer-card::after { inset: 7px; border-radius: 17px; }
  .percentage-display { min-height: 94px; }
  .percentage-display > span { font-size: clamp(5.25rem, 25vw, 7rem); }
  .percentage-display small { font-size: 1.2rem; }

  .range-block { padding-inline: 4px; }
  .range-labels { color: rgba(255, 244, 220, .56); font-size: .64rem; letter-spacing: .045em; }
  .result-divider { gap: 8px; }
  .result-divider b { font-size: .48rem; letter-spacing: .15em; }

  .result-panel h3 { font-size: 2.65rem; }
  .nervometer-card.is-critical .result-panel h3 { font-size: clamp(1.72rem, 8.6vw, 2.5rem); }
  .result-message { padding-inline: 8px; font-size: 1rem; }

  .chocolate-stage { min-height: 210px; }
  .chocolate-tray { max-width: 350px; min-height: 148px; align-content: center; gap: 0; }
  .chocolate-ball { width: 70px; height: 67px; }
  .foil-core { width: 48px; }
  .wrapper-twist { width: 20px; height: 27px; }
  .chocolate-hint { color: rgba(255, 244, 220, .5); font-size: .61rem; }

  .quote-card {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 25px 23px;
  }

  .quote-mark { display: none; }
  .quote-card blockquote { font-size: 1.18rem; }

  .emergency-overlay,
  .birthday-finale { padding: 22px 16px; }
  .emergency-final h2 { font-size: clamp(2.55rem, 13vw, 4.2rem); }
  .finale-content h2 { font-size: clamp(3.05rem, 15vw, 5.5rem); }

  .floating-chocolate { width: 55px; }
}

@media (min-width: 701px) and (max-height: 799px) {
  .scene-intro.is-opening .envelope-button {
    transform: translateX(-50%) translateY(195px) scale(.86);
  }
}

@media (max-height: 680px) and (orientation: landscape) {
  .scene-intro { grid-template-columns: .8fr 1.2fr; grid-template-rows: 1fr; }
  .intro-copy { padding-top: 0; }
  .intro-copy h1 { font-size: clamp(2.8rem, 7vw, 4.5rem); }
  .ritual-stage { height: 96svh; min-height: 0; }
  .envelope-button { bottom: 16%; width: min(40vw, 330px); }
  .letter-card { width: min(54vw, 590px); max-height: 88svh; }
  .scene-intro.is-opening { grid-template-columns: 0 1fr; }
  .scene-intro.is-opening .ritual-stage { height: 96svh; width: 100vw; transform: none; }
  .meter-shell { padding-top: 45px; }
}

@media (pointer: coarse) {
  .envelope-button:hover:not(:active) .envelope,
  .chocolate-ball:hover:not(:active),
  .primary-button:hover:not(:active),
  .ghost-button:hover:not(:active) { transform: none; }
}

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

  .grain { animation: none; }
  .ambient-glow { transform: translate(-50%, -50%); }
  #ambientCanvas { display: none; }
  .letter-card { transform: translate(-50%, -50%); }
  .scene-intro.is-letter-open .letter-card { opacity: 1; transform: translate(-50%, -50%); }
  .letter-body p, .signature, .letter-next { opacity: 1; transform: none; }
  .chocolate-ball { opacity: 1; transform: none; }
}