/* ── Scene 1 · the shut door ─────────────────────────────────────────────── */

.lock {
  position: fixed;
  inset: 0;
  z-index: var(--z-lock);
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vh, 48px) 16px;
  overflow-y: auto;
  background: radial-gradient(130% 90% at 50% 26%, #161a20 0%, #0a0c0f 58%, #000 100%);
  transition: transform 1200ms var(--ease-in);
}

/* roller-shutter slats, only just visible */
.lock__slats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.030) 0px,
      rgba(255, 255, 255, 0.030) 1px,
      transparent 1px,
      transparent 3px,
      rgba(0, 0, 0, 0.35) 3px,
      rgba(0, 0, 0, 0.35) 4px,
      transparent 4px,
      transparent 44px);
  mask-image: radial-gradient(120% 80% at 50% 40%, transparent 22%, #000 78%);
}

.lock.is-open { transform: translateY(-102%); }

.lock__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4vh, 40px);
  width: 100%;
  max-width: 620px;
}

.lock__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
}

.lock__hint {
  margin: 0;
  max-width: 34ch;
  min-height: 3em;
  font-size: var(--t-sm);
  color: var(--fg-3);
}

/* start button — deliberately quiet, the gauge is the loud one */
.startbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 var(--s-8);
  border-radius: 999px;
  border: 1px solid rgba(185, 191, 196, 0.30);
  background: linear-gradient(180deg, #1c2126 0%, #0c0f12 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 26px -12px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.startbtn:hover { border-color: rgba(224, 27, 46, 0.7); }
.startbtn:active { transform: translateY(1px); }
.startbtn:disabled { cursor: progress; opacity: 0.7; }

.startbtn__glow {
  position: absolute;
  left: 22px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--needle);
  box-shadow: 0 0 10px 2px rgba(224, 27, 46, 0.7);
  animation: led-breathe 2.6s ease-in-out infinite;
}
@keyframes led-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.32; } }

.startbtn__face { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.startbtn__word {
  font-size: var(--t-base);
  font-weight: 700;
  font-variation-settings: var(--narrow);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
}
.startbtn__sub {
  font-size: 0.6rem;
  font-variation-settings: var(--narrow);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--fg-3);
}


/* ── Scene 2 · hero ──────────────────────────────────────────────────────── */

.page { position: relative; z-index: var(--z-page); }

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(140% 100% at 50% 0%, #12161b 0%, #0a0c0f 55%, #050608 100%);
}

/* the pool of light a car sits in */
.hero__floor {
  position: absolute;
  left: 50%;
  bottom: -34vh;
  width: 150vw;
  height: 70vh;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(211, 227, 218, 0.09), transparent 70%);
  pointer-events: none;
}

/* one slow headlight pass */
.hero__beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 34%, rgba(255, 255, 255, 0.055) 47%, transparent 60%);
  transform: translateX(-40%);
  animation: beam-pass 9s var(--ease-out) 1.2s infinite;
}
@keyframes beam-pass {
  0%   { transform: translateX(-60%); opacity: 0; }
  12%  { opacity: 1; }
  46%  { transform: translateX(60%); opacity: 0; }
  100% { transform: translateX(60%); opacity: 0; }
}

.hero__wrap { position: relative; padding-block: var(--s-9) var(--s-8); }

.hero__title { margin: 0 0 var(--s-5); }
.hero__line { display: block; }

.hero__line--sm {
  font-size: var(--t-lg);
  font-weight: 500;
  font-variation-settings: var(--narrow);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 0.4em;
}

.hero__line--xl {
  font-size: var(--t-hero);
  font-weight: 900;
  font-variation-settings: var(--wide);
  letter-spacing: -0.035em;
  line-height: 0.82;
  background: linear-gradient(180deg, #ffffff 0%, #cfd6db 42%, #6f767c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero__plate {
  margin: 0 0 var(--s-5);
  font-family: var(--face-lcd);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--lcd);
  text-shadow: 0 0 0.7em var(--lcd-glow);
}

.hero__lede {
  margin: 0 0 var(--s-7);
  max-width: 42ch;
  font-size: var(--t-md);
  color: var(--fg-2);
}

.scrollcue {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-size: var(--t-xs);
  font-weight: 600;
  font-variation-settings: var(--narrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out);
}
.scrollcue:hover { color: var(--fg); }
.scrollcue svg { animation: cue-bob 2.4s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }


/* ── Scene 3 · the car ───────────────────────────────────────────────────── */

.bay {
  position: relative;
  padding-block: clamp(56px, 8vh, 112px);
  background: linear-gradient(180deg, #050608 0%, #0d1013 22%, #0d1013 78%, #050608 100%);
}

/* The bay is the one scene taller than a screen, so GET IN has to be the part
   that survives: the render gives up height before the button goes under. */
.bay__stage {
  position: relative;
  aspect-ratio: 1055 / 328;
  max-height: 42dvh;
  overflow: hidden;
  border-radius: 3px;
  background: #0c0e10;
  box-shadow: 0 40px 80px -50px #000, 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.bay__car { width: 100%; height: 100%; object-fit: cover; object-position: 54% 50%; }

/* Two hard blinks when he gets in — the bay lights coming up over the car. */
.bay__stage.is-flashing .bay__car { animation: bay-lights 560ms steps(1, end); }

@keyframes bay-lights {
  0%   { filter: none; }
  8%   { filter: brightness(1.5) contrast(1.04) saturate(1.05); }
  26%  { filter: none; }
  40%  { filter: brightness(1.5) contrast(1.04) saturate(1.05); }
  58%  { filter: none; }
  100% { filter: none; }
}

/* Spec strip: chrome hairlines between cells, the way a bezel divides a dial. */
.spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: var(--s-6) 0 0;
  border-top: 1px solid var(--chrome-5);
}

.spec__cell {
  padding: var(--s-5) var(--s-4);
  border-left: 1px solid var(--chrome-5);
}
.spec__cell:first-child { border-left: 0; padding-left: 0; }

.spec__label {
  margin: 0 0 var(--s-2);
  font-size: var(--t-xs);
  font-weight: 600;
  font-variation-settings: var(--narrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.spec__value {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  margin: 0;
  font-size: var(--t-lg);
  font-weight: 700;
  font-variation-settings: var(--wide);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}

.spec__unit {
  font-size: var(--t-sm);
  font-weight: 500;
  font-variation-settings: var(--narrow);
  color: var(--fg-3);
}

.bay__go {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  margin-top: clamp(40px, 6vh, 72px);
}

.bay__hint {
  margin: 0;
  min-height: 1.5em;
  font-size: var(--t-sm);
  color: var(--fg-3);
}

@media (max-width: 620px) {
  /* the full 3.2:1 render collapses to a sliver on a phone — crop in on the car */
  .bay__stage { aspect-ratio: 2.2 / 1; }

  .spec { grid-template-columns: repeat(2, 1fr); }
  .spec__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .spec__cell:nth-child(n + 3) { border-top: 1px solid var(--chrome-5); }
}


/* ── Scene 4 · ignition ──────────────────────────────────────────────────── */

/* Both remaining scenes are scrolled to automatically, so each has to frame
   itself inside one viewport — otherwise the control you're being sent to
   lands under the fold. The padding is a floor rather than a look: while the
   content still fits, it is centred in the 100dvh and the padding never shows,
   so keeping it small costs nothing and buys room on short screens. */
.ignition {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: clamp(24px, 5vh, 96px);
  background: radial-gradient(120% 80% at 50% 40%, #101318 0%, #06070a 70%);
}

.ignition__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3vh, 36px);
}
.ignition__wrap .sechead { margin-bottom: 0; }

/* On a short laptop the headline is what pushes START under the fold, so these
   two titles are capped against viewport height as well as width. */
.ignition .sechead__title,
.glovebox .sechead__title { font-size: min(var(--t-xl), 5.5vh); }

.holdbtn {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 1px solid rgba(185, 191, 196, 0.26);
  background: linear-gradient(180deg, #1e2328 0%, #0b0e11 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    inset 0 -10px 20px rgba(0, 0, 0, 0.6),
    0 18px 40px -18px rgba(0, 0, 0, 0.95);
  cursor: pointer;
  display: grid;
  place-items: center;
  touch-action: none;
  transition: transform var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.holdbtn:hover { border-color: rgba(224, 27, 46, 0.6); }
.holdbtn.is-holding { transform: scale(0.97); border-color: var(--needle); }
.holdbtn.is-fired { border-color: rgba(79, 224, 138, 0.6); cursor: default; }
.holdbtn:disabled { opacity: 1; }

.holdbtn__ring {
  position: absolute;
  inset: -9px;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.holdbtn__track { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 2; }
.holdbtn__fill {
  fill: none;
  stroke: var(--needle);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.holdbtn__face { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.holdbtn__word {
  font-size: var(--t-md);
  font-weight: 700;
  font-variation-settings: var(--narrow);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
}
.holdbtn__sub {
  font-size: 0.6rem;
  font-variation-settings: var(--narrow);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.holdhint {
  margin: 0;
  min-height: 1.6em;
  font-size: var(--t-sm);
  color: var(--fg-3);
  text-align: center;
}


/* ── Scene 5 · glovebox ──────────────────────────────────────────────────── */

.glovebox {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: clamp(24px, 5vh, 96px);
  background: linear-gradient(180deg, #06070a 0%, var(--steam-deep) 46%, #06070a 100%);
}

.glovebox__wrap { display: flex; flex-direction: column; align-items: center; }
.glovebox__wrap .sechead { margin-bottom: 0; }

.gift { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); width: 100%; }

.gift__card {
  position: relative;
  width: min(430px, 100%);
  padding: clamp(22px, 4vw, 30px);
  border-radius: 18px;
  border: 1px solid rgba(102, 192, 244, 0.28);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(102, 192, 244, 0.16), transparent 58%),
    linear-gradient(158deg, #1e2c3c 0%, #101c28 62%, #0b141d 100%);
  box-shadow: 0 40px 80px -40px #000, inset 0 1px 0 rgba(255, 255, 255, 0.09);
  overflow: hidden;
  transition: transform var(--d-mid) var(--ease-out);
}

.glovebox.is-open .gift__card { animation: card-land 900ms var(--ease-out) both; }
@keyframes card-land {
  0%   { opacity: 0; transform: translateY(34px) rotateX(22deg) scale(0.94); }
  100% { opacity: 1; transform: none; }
}

.gift__card:hover { transform: translateY(-4px) rotate(-0.6deg); }

.gift__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(102deg, transparent 38%, rgba(255, 255, 255, 0.20) 48%, transparent 58%);
  transform: translateX(-120%);
}
.glovebox.is-open .gift__sheen { animation: sheen 1500ms var(--ease-out) 700ms 1; }
@keyframes sheen { to { transform: translateX(120%); } }

.gift__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.gift__brand {
  font-size: var(--t-lg);
  font-weight: 800;
  font-variation-settings: var(--wide);
  letter-spacing: -0.01em;
  color: #fff;
}
.gift__type {
  font-size: var(--t-xs);
  font-variation-settings: var(--narrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steam-lit);
}

.gift__value {
  margin: var(--s-6) 0 var(--s-5);
  font-size: var(--t-lg);
  font-weight: 700;
  font-variation-settings: var(--wide);
  color: #fff;
}
.gift__value:empty { display: none; }

.gift__codewrap {
  padding: var(--s-4);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.gift__label {
  margin: 0 0 var(--s-2);
  font-size: 0.62rem;
  font-variation-settings: var(--narrow);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.gift__code {
  margin: 0;
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: clamp(1rem, 0.7rem + 1.4vw, 1.45rem);
  letter-spacing: 0.06em;
  color: #fff;
  word-break: break-all;
  transition: filter var(--d-slow) var(--ease-out);
}

/* The card arrives sealed: the code is the payoff, so it costs one deliberate
   press rather than being spent the moment the glovebox opens. */
.gift.is-sealed .gift__code {
  filter: blur(9px);
  user-select: none;
  -webkit-user-select: none;
}
.gift.is-sealed .gift__actions { display: none; }
.gift:not(.is-sealed) .gift__reveal { display: none; }

.gift__reveal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  min-height: 44px;
  margin-top: var(--s-3);
  padding: 0 18px;
  border: 1px solid rgba(102, 192, 244, 0.45);
  border-radius: 10px;
  background: rgba(102, 192, 244, 0.10);
  color: var(--steam-lit);
  font-family: var(--face-display);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variation-settings: var(--narrow);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.gift__reveal:hover { border-color: var(--steam-lit); background: rgba(102, 192, 244, 0.18); }

.gift__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-5);
}
.gift__for {
  font-size: var(--t-xs);
  font-variation-settings: var(--narrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.gift__chip {
  width: 38px;
  height: 27px;
  border-radius: 5px;
  background: linear-gradient(140deg, #d9c07a, #9c8038 60%, #e4d194);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.gift__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

.gift__status { margin: 0; min-height: 1.5em; font-size: var(--t-sm); color: var(--steam-lit); }

.gift__note {
  margin: 0;
  max-width: 44ch;
  text-align: center;
  font-size: var(--t-md);
  color: var(--fg-2);
}

/* The second gift is dressed as a dash telltale rather than a second card: it
   is the one thing here he cannot collect by clicking, so it should read like a
   lamp still lit after everything else has gone quiet. */
.parcel {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  width: min(560px, 100%);
  margin-top: clamp(28px, 5vh, 48px);
  scroll-margin-block: var(--s-5);
  padding: var(--s-5);
  border: 1px solid rgba(255, 106, 44, 0.34);
  border-left: 3px solid var(--sport);
  border-radius: 12px;
  background: rgba(255, 106, 44, 0.05);
  animation: parcel-in var(--d-slow) var(--ease-out) both;
}

@keyframes parcel-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.parcel__lamp {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #0a0f14;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 44, 0.3);
  animation: telltale 1.5s var(--ease-out) 3;
}
.parcel__lamp svg { fill: var(--sport); }
/* knocked through the box in the lamp housing colour to draw the ribbon */
.parcel__ribbon { fill: #0a0f14; }

@keyframes telltale {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 106, 44, 0.3); }
  50% { box-shadow: inset 0 0 0 1px rgba(255, 106, 44, 0.55), 0 0 22px -2px rgba(255, 106, 44, 0.55); }
}

.parcel__title {
  margin: var(--s-2) 0;
  font-size: var(--t-md);
  font-weight: 700;
  font-variation-settings: var(--wide);
  color: var(--fg);
}
.parcel__note { margin: 0; font-size: var(--t-sm); color: var(--fg-2); }

@media (max-width: 520px) {
  .parcel { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
}

.signoff {
  margin: clamp(28px, 5vh, 56px) 0 0;
  font-size: var(--t-lg);
  font-weight: 600;
  font-variation-settings: var(--wide);
  color: var(--fg);
  text-align: center;
}


@media (prefers-reduced-motion: reduce) {
  .hero__beam, .scrollcue svg, .startbtn__glow, .bay__stage.is-flashing .bay__car,
  .glovebox.is-open .gift__card, .glovebox.is-open .gift__sheen,
  .parcel, .parcel__lamp { animation: none; }
  /* kept as a transition, not removed: dismiss() waits on transitionend */
  .lock { transition-duration: 1ms; }
  .gift__sheen { display: none; }
}