/* Uvrent launching-soon page.
   Tokens are the live uvrent.vercel.app values (brand/uv-rent branch), so this page
   reads as the same product the day the marketplace replaces it. */

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/CabinetGrotesk-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("fonts/GeneralSans-Variable.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --canvas: #f5f3ee;
  --surface: #fff;
  --surface-muted: #efece5;
  --ink: #10201d;
  --ink-soft: #3d4c47;
  --ink-muted: #56645f;
  --ink-inverse: #f7f5f0;
  --line: #e3dfd5;
  --line-strong: #c9c3b5;
  --line-control: #8b948d;
  --brand: #1b5a44;
  --brand-dark: #123f30;
  --brand-soft: #e2ebe4;
  --accent: #ad4b22;
  --accent-soft: #f7e7dc;
  --peach: #f3d4c1;
  --night: #0c1c18;
  --night-soft: #14302a;
  --danger: #a1302a;
  --lamp-red: #ef4b3a;
  --lamp-amber: #f6b93b;
  --lamp-green: #4fd18b;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --e-4: 0 24px 64px #08141147;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --gutter: clamp(16px, 3.2vw, 32px);
  --page-max: 1320px;
  --display: "Cabinet Grotesk", "General Sans", ui-sans-serif, -apple-system, Arial, sans-serif;
  --text: "General Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, p { margin: 0; }
button, input { font: inherit; }
a { color: inherit; text-underline-offset: 0.22em; }

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
input { caret-color: var(--brand); }
input::placeholder { color: #66726d; opacity: 1; }

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-track { background: var(--canvas); }
  ::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--canvas); border-radius: 99px; }
}

[hidden] { display: none !important; }

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

.skip-link {
  position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 60;
  padding: 12px; background: var(--ink); color: #fff;
}
.skip-link:focus { top: 10px; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas) 93%, white);
}
.header-inner {
  max-width: var(--page-max); height: 68px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.wordmark { display: block; border-radius: 4px; }
.wordmark img { display: block; width: auto; height: 26px; }

.signal-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 8px; border-radius: 999px;
  background: var(--night); color: var(--ink-inverse);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.mini-light { display: inline-flex; gap: 4px; padding: 4px 6px; border-radius: 99px; background: #070f0d; }
.mini-light i { width: 7px; height: 7px; border-radius: 50%; background: #2a3a35; }
.mini-light i:nth-child(2) { background: var(--lamp-amber); box-shadow: 0 0 8px var(--lamp-amber); animation: amber-breathe 2.6s ease-in-out infinite; }
/* With script running, the header light mirrors the one in the scene. */
html[data-signal] .mini-light i { background: #2a3a35; box-shadow: none; animation: none; transition: background-color 450ms var(--ease-out), box-shadow 450ms var(--ease-out); }
html[data-signal="red"] .mini-light i:nth-child(1) { background: var(--lamp-red); box-shadow: 0 0 8px var(--lamp-red); }
html[data-signal="amber"] .mini-light i:nth-child(2) { background: var(--lamp-amber); box-shadow: 0 0 8px var(--lamp-amber); }
html[data-signal="green"] .mini-light i:nth-child(3) { background: var(--lamp-green); box-shadow: 0 0 8px var(--lamp-green); }

/* Stage: the live hero's rounded night card, holding the yard exit */
.page { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 22px var(--gutter) 0; flex: 1; }

.stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: end;
  min-height: clamp(600px, calc(100svh - 170px), 780px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(52% 58% at 70% 50%, rgb(173 75 34 / 0.34), transparent 72%),
    radial-gradient(40% 40% at 64% 52%, rgb(243 212 193 / 0.16), transparent 70%),
    linear-gradient(180deg, #0a1815 0%, #11292320 40%, #0c1c18 100%), var(--night);
}

/* Green light washes the whole stage for a moment when the gate opens. */
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 70% at 90% 36%, rgb(79 209 139 / 0.26), transparent 70%);
  opacity: 0; transition: opacity 700ms var(--ease-out);
}
.stage.go::after { opacity: 1; }

.stage-sky {
  position: absolute; inset: 0 0 35% 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 14%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 22% 32%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 34% 9%, #fff 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 47% 24%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 7%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 73% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 88% 11%, #fff 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 95% 29%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 16% 48%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 41% 44%, #fff 50%, transparent 51%);
  opacity: 0.55;
  animation: twinkle 4.2s ease-in-out infinite alternate;
}

.stage-copy {
  position: relative; z-index: 2; align-self: center;
  padding: clamp(40px, 5vw, 64px) 0 clamp(36px, 4vw, 52px) clamp(28px, 4.2vw, 60px);
  color: #fff;
}

.headline {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(52px, 7vw, 96px); line-height: 0.9; letter-spacing: -0.045em;
  --px: 0em; --py: 0em;
}
.headline .line { display: block; animation: rise 1000ms var(--ease-out) both; }
.headline .line + .line { animation-delay: 120ms; }

/* The two o's in "soon" are the same headlight eyes the cars have. */
.eye-o {
  position: relative; display: inline-block;
  transform-origin: 50% 56%;
  animation: blink 6.4s ease-in-out 1.6s infinite;
}
.eye-o + .eye-o { animation-delay: 1.65s; }
.eye-o::after {
  content: ""; position: absolute; left: 50%; top: 54%;
  width: 0.16em; height: 0.16em; margin: -0.08em 0 0 -0.08em; border-radius: 50%;
  background: var(--peach);
  transform: translate(var(--px), var(--py));
  transition: transform 420ms var(--ease-out);
}

.lead {
  max-width: 44ch; margin-top: 22px;
  color: rgb(255 255 255 / 0.86); font-size: 17px; line-height: 1.6;
  animation: rise 1000ms var(--ease-out) 260ms both;
}
.next-up {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  color: var(--peach); font-size: 14px; font-weight: 600;
  animation: rise 1000ms var(--ease-out) 340ms both;
}
.next-up svg { flex-shrink: 0; }

/* The sign-up is the live site's white search card, carried over */
.notify, .notify-done {
  max-width: 520px; margin-top: 28px; padding: 18px;
  border-radius: var(--r-lg); background: var(--surface); color: var(--ink);
  box-shadow: var(--e-4);
  animation: rise 1000ms var(--ease-out) 420ms both;
}
.field-label {
  display: block; color: var(--ink);
  font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}
.notify-row { display: flex; gap: 10px; margin-top: 10px; }
.notify input {
  flex: 1 1 auto; width: 100%; min-width: 0; height: 48px; padding: 0 14px;
  border: 1px solid rgb(139 148 141 / 0.7); border-radius: var(--r-md);
  background: #fff; color: var(--ink); font-size: 16px;
  transition: border-color 130ms var(--ease-out), box-shadow 130ms var(--ease-out);
}
.notify input:hover { border-color: var(--line-control); }
.notify input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(27 90 68 / 0.18); }
.notify input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgb(161 48 42 / 0.14); }

.go-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-md);
  flex-shrink: 0; background: var(--brand); color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.go-button:hover { background: var(--brand-dark); box-shadow: 0 10px 24px rgb(27 90 68 / 0.32); transform: translateY(-1px); }
.go-button:active { transform: translateY(1px); box-shadow: none; }
.go-button:disabled { cursor: progress; opacity: 0.78; }
.go-lamp {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--lamp-green); box-shadow: 0 0 0 3px rgb(79 209 139 / 0.28);
  animation: lamp-pulse 2s ease-in-out infinite;
}

.notify-note { margin-top: 10px; color: var(--ink-muted); font-size: 12px; }
/* Spam trap: off-screen for people, still filled in by form-stuffing bots. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notify-error { margin-top: 8px; color: var(--danger); font-size: 13px; font-weight: 600; }

.notify-done { display: flex; gap: 16px; align-items: flex-start; }
.notify-done:focus { outline: none; }
.done-light {
  display: grid; gap: 4px; flex-shrink: 0; padding: 6px; border-radius: 10px; background: var(--night);
}
.done-light i { width: 12px; height: 12px; border-radius: 50%; background: #22322d; }
.done-light i:last-child { background: var(--lamp-green); box-shadow: 0 0 10px var(--lamp-green); }
.notify-done h2 { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.notify-done p { margin-top: 4px; color: var(--ink-soft); font-size: 14px; }
.text-button {
  margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--brand); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 0.22em;
}
.text-button:hover { color: var(--brand-dark); }

/* Scene */
.stage-scene {
  position: relative; z-index: 1; align-self: end;
  margin-left: -14%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20%);
}
.scene { display: block; width: 100%; height: auto; overflow: visible; --px: 0px; --py: 0px; --mx: 0; --my: 0; }

/* Depth: each layer drifts by its --d as the pointer moves (set by script.js). */
.layer {
  transform: translate(calc(var(--mx) * var(--d, 0) * 1px), calc(var(--my) * var(--d, 0) * 0.35px));
  transition: transform 1100ms var(--ease-out);
}

.sun { fill: var(--peach); }
.sun-rise { animation: sunrise 3.2s var(--ease-out) 200ms both; }
.sun-glow { animation: glow 6s ease-in-out infinite alternate; }
.cloud-1 { animation: drift 80s linear -20s infinite; }
.cloud-2 { animation: drift 110s linear -70s infinite; }
.ridge { fill: none; stroke: var(--peach); stroke-opacity: 0.16; stroke-width: 1.6; stroke-linejoin: round; }
.snow { fill: #f5f3ee; opacity: 0.85; }
.cedar { fill: #123f30; transform-box: fill-box; transform-origin: 50% 100%; animation: sway 9s ease-in-out infinite alternate; }
.cedar.light { fill: #1b5a44; animation-duration: 11s; animation-delay: -3s; }

.bay-line { stroke: #f5f3ee; stroke-opacity: 0.08; stroke-width: 2; fill: none; }
.road-edge { stroke: #f5f3ee; stroke-opacity: 0.2; stroke-width: 3; fill: none; }
.road-dash { stroke: #f5f3ee; stroke-opacity: 0.7; stroke-width: 6; stroke-dasharray: 18 20; fill: none; }
.stop-line { fill: #f5f3ee; opacity: 0.88; }
.stage.go .road-dash { animation: dash-run 0.3s linear infinite; }

/* Gate + marquee sign: a wave of light travels round the bulbs */
.wall { fill: #14302a; }
.wall-cap { fill: #c9c3b5; }
.sign-inset { fill: none; stroke: #fff; stroke-opacity: 0.09; stroke-width: 1.5; }
.bulb { fill: #5e4520; animation: bulb-wave 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.08s); }
.stage.go .bulb { animation-duration: 0.9s; }

/* Barrier: a transition, so the lift and the return both reverse cleanly */
.barrier-box { fill: #f5f3ee; }
.barrier-cap { fill: var(--accent); }
.barrier-arm {
  transform-box: view-box; transform-origin: 140px 460px;
  transition: transform 1000ms var(--ease-out);
}
.barrier-jiggle { transform-box: view-box; transform-origin: 140px 460px; animation: impatient 6s ease-in-out infinite; }
.stage.gate-open .barrier-arm { transform: rotate(-80deg); }
.arm-shadow { fill: #000; opacity: 0.22; }
.arm-hi { fill: #fff; opacity: 0.35; }
.arm-tip { fill: var(--accent); }

/* Signal: red holds, green flicks ("Not yet!"), amber, back to red. A sign-up gets a real green. */
.housing-hi { fill: #fff; opacity: 0.08; }
.fresnel { fill: none; stroke: #fff; stroke-opacity: 0.07; stroke-width: 1; }
.visor { fill: #040a08; }
.lit, .lamp-glow, .spill { opacity: 0; transition: opacity 450ms var(--ease-out); }
.spill { mix-blend-mode: screen; pointer-events: none; }
.stage[data-signal="red"] .lit-red, .stage[data-signal="red"] .spill-red,
.stage[data-signal="amber"] .lit-amber, .stage[data-signal="amber"] .spill-amber,
.stage[data-signal="green"] .lit-green, .stage[data-signal="green"] .spill-green { opacity: 1; }
.stage[data-signal="red"] .glow-red { opacity: 0.7; animation: glow-breathe 3s ease-in-out infinite; }
.stage[data-signal="amber"] .glow-amber { opacity: 0.75; animation: glow-breathe 2.2s ease-in-out infinite; }
.stage[data-signal="green"] .glow-green { opacity: 0.85; }

/* Cars: shaded paint, lidded headlight eyes, lit from the side by the signal */
.car { cursor: pointer; }
.beam { mix-blend-mode: screen; opacity: 0.5; transition: opacity 400ms var(--ease-out); }
.car.revving .beam, .stage.go .beam { opacity: 1; }
.car-shadow { opacity: 0.55; }
.contact { opacity: 0.45; }
/* Arrival plays once on its own layer, so swapping the idle loop (rev, lurch) never replays it. */
.car-arrive { transform-box: fill-box; transform-origin: 50% 100%; animation: roll-in 1200ms var(--ease-out) var(--in, 0ms) both; }
.car-idle { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 3.4s var(--ease-in-out) infinite; }
.car-2 .car-idle { animation-duration: 3.1s; animation-delay: -1.1s; }
.car-3 .car-idle { animation-duration: 3.7s; animation-delay: -2.2s; }
.glass-reflect { fill: #f5f3ee; opacity: 0.08; }
.sheen { fill: #fff; opacity: 0; animation: sheen 7.5s var(--ease-in-out) var(--sheen, 0s) infinite; }
.spec { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: 0.2; }
.car-2 .spec { opacity: 0.6; }
.rim {
  fill: none; stroke: var(--lamp-amber); stroke-width: 3; stroke-linecap: round; opacity: 0;
  transition: stroke 500ms var(--ease-out), opacity 500ms var(--ease-out);
}
.stage[data-signal="red"] .rim { stroke: var(--lamp-red); opacity: 0.45; }
.stage[data-signal="amber"] .rim { opacity: 0.5; }
.stage[data-signal="green"] .rim { stroke: var(--lamp-green); opacity: 0.65; }
.cheek { opacity: 0.75; }
.pupil { transform: translate(var(--px), var(--py)); transition: transform 420ms var(--ease-out); }
.lid {
  transform-box: fill-box; transform-origin: 50% 0%; transform: scaleY(0.16);
  animation: lid-blink 6.4s var(--ease-in-out) var(--blink, 0s) infinite;
}
.mouth { fill: #0b1513; }
.chrome { fill: #fff; opacity: 0.22; }
.roof-rack { stroke: #10201d; stroke-width: 5; stroke-linecap: round; fill: none; }
.roof-glow { fill: var(--peach); opacity: 0.35; }
.antenna { stroke: #10201d; stroke-width: 3; }
.flag { fill: var(--accent); transform-box: fill-box; transform-origin: 0% 50%; animation: flutter 1.3s var(--ease-in-out) infinite alternate; }

.puff { fill: #f5f3ee; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: puff 3.6s ease-out infinite; }
.puff:nth-child(2) { animation-delay: 1.2s; }
.puff:nth-child(3) { animation-delay: 2.4s; }
.car.revving .puff { animation-duration: 1.1s; }
.car.revving .car-idle { animation: rev 950ms var(--ease-out); }
.stage.lurch .car-idle { animation: lurch 760ms var(--ease-out); }

/* Speech: dark glass pills */
.car-bubble, .light-bubble {
  opacity: 0; transform-box: fill-box; transform-origin: 0% 100%; transform: translateY(6px) scale(0.86);
  transition: opacity 220ms var(--ease-out), transform 480ms var(--ease-out); pointer-events: none;
}
.light-bubble { transform-origin: 90% 100%; }
.bubble-box, .bubble-tail { fill: rgb(8 18 15 / 0.9); }
.bubble-box { stroke: rgb(245 243 238 / 0.2); stroke-width: 1.2; }
.bubble-text { fill: #f7f5f0; font: 700 16px var(--display); letter-spacing: -0.01em; text-anchor: middle; }
.car.revving .car-bubble, .stage.tease-talk .light-bubble { opacity: 1; transform: none; }

/* More categories, breathing under their covers */
.tarp-shade { fill: #a99f8c; opacity: 0.45; }
.tarp-fold { fill: none; stroke: #b3aa98; stroke-width: 2; stroke-linecap: round; opacity: 0.55; }
.tarp-rope { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.tarp-rope-hi { fill: none; stroke: var(--peach); stroke-width: 1.2; stroke-linecap: round; opacity: 0.5; }
.tarp-body { transform-box: fill-box; transform-origin: 50% 100%; animation: cloth 5.4s var(--ease-in-out) infinite; }
.tarp:nth-of-type(2) .tarp-body { animation-duration: 6.2s; animation-delay: -2s; }
.tarp:nth-of-type(3) .tarp-body { animation-duration: 4.8s; animation-delay: -3.4s; }
.tarp-q { fill: var(--peach); font: 800 52px var(--display); text-anchor: middle; animation: q-float 4.6s var(--ease-in-out) infinite; }
.tarp:nth-of-type(2) .tarp-q { animation-delay: -1.5s; }
.tarp:nth-of-type(3) .tarp-q { animation-delay: -3s; }
.stage.go .tarp-body { animation-duration: 1.3s; }

/* Confetti (spawned by script.js): ribbons, squares and dots that flip as they fall */
.confetti { position: absolute; z-index: 5; pointer-events: none; will-change: transform, opacity; }
.confetti-ribbon { width: 5px; height: 15px; border-radius: 2px; }
.confetti-square { width: 8px; height: 8px; border-radius: 1.5px; }
.confetti-dot { width: 7px; height: 7px; border-radius: 50%; }

.site-footer {
  width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 26px var(--gutter) 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--ink-muted); font-size: 12.5px;
}
.site-footer img { display: block; height: 20px; width: auto; }

/* Keyframes */
@keyframes rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(0.08); } 96% { transform: scaleY(1); } }
@keyframes twinkle { from { opacity: 0.3; } to { opacity: 0.7; } }
@keyframes amber-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@keyframes glow-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@keyframes lamp-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgb(79 209 139 / 0.28); } 50% { box-shadow: 0 0 0 6px rgb(79 209 139 / 0.1); } }
@keyframes sunrise { from { transform: translateY(80px); } to { transform: none; } }
@keyframes glow { from { opacity: 0.5; } to { opacity: 0.9; } }
@keyframes drift { from { transform: translateX(-260px); } to { transform: translateX(820px); } }
@keyframes sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
@keyframes bulb-wave { 0%, 100% { fill: #5e4520; } 50% { fill: #ffd98a; } }
@keyframes impatient { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-1.6deg); } 94% { transform: rotate(0.6deg); } 97% { transform: rotate(-0.3deg); } }
@keyframes dash-run { to { stroke-dashoffset: -38; } }
@keyframes roll-in {
  0% { opacity: 0; transform: translateY(-28px) scale(0.86); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes breathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-2.5px) scale(1.004, 0.996); } }
@keyframes rev {
  0% { transform: none; }
  16% { transform: translateY(3px) scale(1.03, 0.955); }
  38% { transform: translateY(-7px) scale(0.985, 1.03); }
  58% { transform: translateY(1px) scale(1.01, 0.99); }
  78% { transform: translateY(-2px); }
  100% { transform: none; }
}
@keyframes lurch { 0% { transform: none; } 30% { transform: translateY(-4px) scale(0.99, 1.02); } 55% { transform: translateY(2px) scale(1.02, 0.975); } 100% { transform: none; } }
@keyframes puff {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  18% { opacity: 0.35; }
  100% { opacity: 0; transform: translate(0, -54px) scale(2); }
}
@keyframes lid-blink { 0%, 90%, 100% { transform: scaleY(0.16); } 93% { transform: scaleY(1); } 96% { transform: scaleY(0.16); } }
@keyframes sheen {
  0%, 68% { transform: translateX(0); opacity: 0; }
  72% { opacity: 0.3; }
  86% { transform: translateX(270px); opacity: 0.18; }
  88%, 100% { transform: translateX(270px); opacity: 0; }
}
@keyframes cloth {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  35% { transform: scale(1.01, 1.025) skewX(-1deg); }
  70% { transform: scale(0.995, 1.01) skewX(0.8deg); }
}
@keyframes q-float { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-8px); opacity: 1; } }
@keyframes flutter { from { transform: skewY(-6deg) scaleX(0.92); } to { transform: skewY(6deg) scaleX(1.04); } }

/* Loops stop while the tab is hidden or the stage is scrolled away. One-shot entrances
   (rise, roll-in, sunrise) are left alone so content never freezes half-faded. */
.is-paused .stage-sky,
.is-paused .eye-o,
.is-paused .go-lamp,
.is-paused .mini-light i,
.is-paused .scene *:not(.car-arrive):not(.sun-rise) { animation-play-state: paused !important; }

@media (max-width: 1080px) {
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .page { padding-top: 14px; }
  .stage {
    grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: var(--r-lg);
    /* On phones the sun sits above the copy, so the dawn glow moves up with it. */
    background:
      radial-gradient(70% 26% at 50% 30%, rgb(173 75 34 / 0.3), transparent 72%),
      radial-gradient(50% 18% at 50% 30%, rgb(243 212 193 / 0.14), transparent 70%),
      linear-gradient(180deg, #0a1815 0%, #11292320 40%, #0c1c18 100%), var(--night);
  }
  .stage::after { background: radial-gradient(70% 40% at 90% 30%, rgb(79 209 139 / 0.24), transparent 70%); }
  /* The scene moves up between the headline and the sign-up, so the animation is in
     the first viewport instead of below the form. */
  .stage-copy { display: contents; }
  .stage-copy > * { margin-inline: 22px; }
  .headline { order: 1; padding-top: 30px; font-size: clamp(50px, 14vw, 76px); }
  .stage-scene {
    order: 2; margin: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%);
  }
  .lead { order: 3; font-size: 16px; margin-top: 0; }
  .next-up { order: 4; }
  .notify, .notify-done { order: 5; margin-top: 22px; margin-bottom: 24px; padding: 16px; }
}

@media (max-width: 520px) {
  .header-inner { height: 60px; }
  .wordmark img { height: 22px; }
  .signal-chip { padding: 6px 12px 6px 7px; font-size: 12px; }
  .signal-chip .chip-long { display: none; }
  .notify-row { flex-direction: column; }
  .go-button { width: 100%; }
  .site-footer { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  /* The scene holds still; the signal and the sign-up still change state. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .layer { transform: none !important; }
  .car-bubble, .light-bubble { display: none; }
}