/* =====================================================================
   Fair hero and scooter teardown (markup from src/lib/fair-scene.mjs).
   fair-scene.js writes --p (scroll progress), --fp (fleet) and --e
   (explode) and adds .is-live. Without .is-live the hero is one still
   viewport and the teardown shows its exploded view.
   Phones (under 40rem) never pin the hero: the copy sits on solid night
   above a short still of the gate with the fleet at its pins.
   Transform and opacity only.
   ===================================================================== */

/* ---------- Hero ---------- */
.fair {
  --p: 0;
  --fp: 0;
  position: relative;
  background: #0a1230;
}
.fair.is-live { height: 160vh; }

.fair-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  max-height: 68rem;
  overflow: hidden;
  isolation: isolate;
}
.fair.is-live .fair-stage { position: sticky; top: 0; max-height: none; }

.fair-sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 60% at 60% 92%, rgba(255, 168, 96, 0.5), transparent 60%),
    linear-gradient(180deg, #070e28 0%, #121946 34%, #2f2768 58%, #6d3a72 76%, #c9705c 90%, #ec9f5e 100%);
}

.fair-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.fs-layer {
  position: absolute;
  inset: 0 auto 0 0;
  width: 160%;
  will-change: transform;
  transform: translate3d(calc(var(--base, 0%) * -1 - var(--p) * var(--pan)), 0, 0);
}
.fs-svg { display: block; width: 100%; height: 100%; }
.fs-far { --pan: 8%; }
.fs-wheelz { --pan: 16%; }
.fs-mid { --pan: 26%; }
.fs-crowd { --pan: 32%; }
.fs-fore { --pan: 37.5%; }

/* Warm light that grows as the visitor scrolls into the fair. */
.fair-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 55% at 62% 80%, rgba(255, 196, 110, 0.45), transparent 70%);
  mix-blend-mode: screen;
  opacity: calc(0.3 + var(--p) * 0.6);
}
/* Keeps the headline readable over the scene. */
.fair-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: calc(1 - var(--p) * 0.75);
  background:
    linear-gradient(90deg, rgba(6, 9, 26, 0.94) 0%, rgba(6, 9, 26, 0.8) 30%, rgba(6, 9, 26, 0.2) 58%, transparent 72%),
    linear-gradient(0deg, rgba(6, 9, 26, 0.55), transparent 22%);
}

.fair-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-top: var(--header-h, 4.5rem);
  padding-bottom: var(--space-7, 3.5rem);
  opacity: calc(1 - var(--p) * 2.4);
  transform: translate3d(0, calc(var(--p) * -6rem), 0);
}
.fair-copy > * { max-width: 34rem; }
.fair-title { margin: 0; text-wrap: balance; text-shadow: 0 2px 24px rgba(6, 9, 26, 0.6); }
.fair-lede { margin-top: var(--space-3, 1.5rem); color: var(--text-2); }
.fair-copy .hero-actions { margin-top: var(--space-4, 2rem); }

/* Quick links under the buttons: a call link and a top event. */
.fair-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3, 1.5rem);
  margin: var(--space-2, 1rem) 0 0;
}
.fair-quick a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--chalk, #eef3ea);
  font-weight: var(--w-semi, 600);
  text-decoration: underline;
  text-decoration-color: rgba(215, 255, 103, 0.6);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.fair-quick a:hover { color: var(--lime, #d7ff67); }

.fair-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-3, 1.5rem);
  margin: 0;
  display: none;
  align-items: center;
  gap: 0.6rem;
  translate: -50% 0;
  font-size: var(--step--1);
  letter-spacing: var(--tr-caps);
  color: var(--text-2);
  opacity: calc(1 - var(--p) * 5);
}
.fair-cue span {
  width: 1.1rem;
  height: 1.7rem;
  border: 2px solid currentColor;
  border-radius: 1rem;
  position: relative;
}
.fair-cue span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.3rem;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: currentColor;
  animation: fs-cue 1.8s ease-in-out infinite;
}
.fair.is-live .fair-cue { display: flex; }

/* Lights. Bulbs brighten with --p and twinkle on their own clock; each bulb
   has a soft glow circle under it that breathes with it. */
.fs-bulb { fill: #ffd98a; opacity: calc(0.7 + var(--p) * 0.3); animation: fs-twinkle 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.fs-bulbs .fs-bulb { fill: #ffe9b0; }
.fs-glow { opacity: calc(0.55 + var(--p) * 0.45); animation: fs-breathe 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.fs-window { animation: fs-flicker 7s steps(1, end) infinite; }
.fs-star { animation: fs-twinkle 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.fs-sign { font: 700 15px/1 var(--font-display, sans-serif); letter-spacing: 0.12em; fill: #ffd27a; }
.fs-sign-gate { font-size: 21px; fill: #f6a24a; }
.fs-pin-label { font: 700 19px/1 var(--font-text, sans-serif); fill: #eef3ea; letter-spacing: 0.02em; }

/* Ferris wheel: the wheel turns, every gondola turns back so it hangs level. */
.fs-rot { transform-box: view-box; transform-origin: 1000px 380px; animation: fs-spin 48s linear infinite; }
.fs-gondola { transform-box: fill-box; transform-origin: 50% 0; animation: fs-spin 48s linear infinite reverse; }
.fs-drop { animation: fs-drop 6s cubic-bezier(.6, 0, .3, 1) infinite; }
.fs-bob { animation: fs-bob 2.4s ease-in-out infinite alternate; }

.fs-walker { animation: fs-walk var(--t, 12s) ease-in-out infinite alternate; animation-delay: var(--d, 0s); }

/* Fleet: rolls in on load, then travels to its pin with the scroll. */
.fs-move { transform: translate3d(calc(var(--fp) * var(--tx)), 0, 0); }
.fs-move .fs-wheel { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--fp) * var(--spin))); }
.fs-intro { animation: fs-roll-in 1.6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(0.25s + var(--i) * 0.22s); }
.fs-pin { opacity: clamp(0, calc((var(--fp) - 0.5 - var(--i) * 0.08) * 5), 1); transform-box: fill-box; transform-origin: 50% 100%; transform: scale(clamp(0.6, calc(0.6 + (var(--fp) - 0.5) * 2), 1)); }
/* Without the scroll the pins stay visible, so the still frame shows them. */
.fair:not(.is-live) .fs-pin { opacity: 1; transform: none; }

/* Pause everything when the hero is off screen. */
.fair.is-paused *, .teardown.is-paused * { animation-play-state: paused !important; }

@keyframes fs-spin { to { transform: rotate(360deg); } }
@keyframes fs-twinkle { 0%, 100% { opacity: calc(0.65 + var(--p) * 0.35); } 50% { opacity: calc(0.35 + var(--p) * 0.3); } }
@keyframes fs-breathe { 0%, 100% { opacity: calc(0.6 + var(--p) * 0.4); } 50% { opacity: calc(0.3 + var(--p) * 0.3); } }
@keyframes fs-flicker { 0%, 100% { opacity: 0.88; } 47% { opacity: 0.72; } 48% { opacity: 0.88; } }
@keyframes fs-drop { 0%, 15% { transform: translateY(0); } 45% { transform: translateY(380px); } 60% { transform: translateY(360px); } 100% { transform: translateY(0); } }
@keyframes fs-bob { to { transform: translateY(-10px); } }
@keyframes fs-walk { to { transform: translateX(var(--dx, 30px)); } }
@keyframes fs-roll-in { from { transform: translateX(-340px); } to { transform: none; } }
@keyframes fs-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { opacity: 0; } }

/* Tablet: a little more scene, copy still on the left. */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .fs-layer { width: 200%; --base: 10%; }
  .fair-shade { background: linear-gradient(90deg, rgba(6, 9, 26, 0.95) 0%, rgba(6, 9, 26, 0.85) 45%, rgba(6, 9, 26, 0.2) 75%, transparent 90%), linear-gradient(0deg, rgba(6, 9, 26, 0.55), transparent 22%); }
}

/* Phone: no pin, no scroll work. Copy on solid night on top, then a short
   still of the gate with the fleet already at its pins. The entrance sign
   is hidden so nothing crowds the buttons. */
@media (max-width: 39.99rem) {
  .fair { --fp: 1; }
  .fair.is-live { height: auto; }
  .fair-stage, .fair.is-live .fair-stage {
    position: relative;
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
  }
  .fair-sky { top: auto; height: 20rem; }
  .fair-copy {
    order: 1;
    height: auto;
    justify-content: flex-start;
    padding-top: calc(var(--header-h, 4.5rem) + var(--space-3, 1.5rem));
    padding-bottom: var(--space-4, 2rem);
    background: #070e28;
    opacity: 1;
    transform: none;
  }
  .fair-scene { order: 2; position: relative; inset: auto; height: 20rem; z-index: 0; }
  .fair-scene::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4rem;
    z-index: 2;
    background: linear-gradient(#070e28, transparent);
  }
  .fs-layer { width: 220%; --base: 54.4%; transform: translate3d(calc(var(--base) * -1), 0, 0); }
  .fair-shade, .fair-cue { display: none !important; }
  .fair-glow { opacity: 0.8; }
  .fs-gate-sign { display: none; }
  .fs-pin { opacity: 1; transform: none; }
  .fs-walker:nth-child(2n) { display: none; }
}

/* ---------- Scooter teardown ---------- */
.teardown { --e: 1; position: relative; }
.teardown.is-live { --e: 0; height: 240vh; }
.td-stage { padding-block: clamp(4rem, 9vw, 7rem); }
.teardown.is-live .td-stage > .container { flex: 0 0 auto; }
.teardown.is-live .td-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h, 4.5rem) + 1rem) 2rem;
}
.td-grid { display: grid; gap: var(--space-5, 2.5rem); align-items: center; }
@media (min-width: 64rem) { .td-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8, 4rem); } }
.td-copy h2 { margin: 0; text-wrap: balance; }
.td-lede { color: var(--text-2); font-size: var(--step-1); line-height: var(--lh-snug); margin: var(--space-2, 1rem) 0 0; max-width: 36ch; }
.td-parts { list-style: none; margin: var(--space-4, 2rem) 0 0; padding: 0; display: grid; gap: 0.85rem; }
.td-parts li {
  display: grid;
  gap: 0.15rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line-strong);
  transition: border-color 240ms ease, opacity 240ms ease;
}
.td-parts strong { font-family: var(--font-display); font-weight: var(--w-semi, 600); transition: color 240ms ease; }
.td-parts span { color: var(--text-2); font-size: 1.0625rem; line-height: 1.5; }
/* While the scooter comes apart, the part that just separated lights up. */
.teardown.is-live .td-parts li { opacity: 0.62; }
.teardown.is-live .td-parts li.is-active { opacity: 1; border-left: 4px solid var(--lime, #d7ff67); padding-left: calc(1rem - 2px); }
.td-parts li.is-active strong { color: var(--lime, #d7ff67); }

.td-svg { display: block; width: 100%; height: auto; max-height: 72vh; }
.td-gridline { stroke: var(--line); stroke-width: 1; }
.td-ground { stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 8; }
/* Each part has its own clock: part k starts at e = k * 0.14 and is fully
   out by e = k * 0.14 + 0.44. */
.td-part {
  --q: clamp(0, calc((var(--e) - var(--k) * 0.14) / 0.44), 1);
  transform: translate3d(calc(var(--q) * var(--ex)), calc(var(--q) * var(--ey)), 0);
}
.td-label { opacity: clamp(0, calc((var(--q) - 0.6) * 3), 1); }
.td-leader { stroke: var(--lime, #d7ff67); stroke-width: 0.7; fill: none; }
.td-far { opacity: 0.5; }
.td-dot { fill: var(--lime, #d7ff67); }
.td-text { font: 600 9px/1 var(--font-text, sans-serif); fill: var(--text); }
.td-short { display: none; }

@media (max-width: 47.99rem) {
  .teardown .td-stage { position: relative; }
  .td-copy { text-align: left; }
  .td-svg { max-height: 56vh; }
  /* 18 local units at the phone scale is about 14 px. */
  .td-text { font-size: 18px; }
  .td-long { display: none; }
  .td-short { display: inline; }
}

/* ---------- Reduced motion: one still frame each ---------- */
@media (prefers-reduced-motion: reduce) {
  .fair.is-live, .teardown.is-live { height: auto; }
  .fair .fair-stage, .teardown .td-stage { position: relative; }
  .fair *, .teardown * { animation: none !important; }
  .teardown { --e: 1 !important; }
  .fair { --p: 0 !important; }
}

/* The keyword h1 above the display tagline: readable, quiet, one line on desktop. */
.fair-h1 {
  margin: 0 0 var(--space-2, 1rem);
  max-width: 34ch;
  font-family: var(--font-text);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--lime, #d7ff67);
}