/* ==========================================================================
   Texas Zoom House landing page
   Motion and type tokens are taken from apple.com (iPhone 18 Pro page) and
   rivian.com (homepage lineup), October 2026.
   ========================================================================== */

/* Progress values for the scroll scenes. Animated by CSS scroll timelines
   where supported, otherwise set by main.js. */
@property --compact { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --lp { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  color-scheme: light;

  --bg: #fff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: rgb(0 0 0 / .08);
  --field-line: #d2d2d7;
  --accent: #ffaa00;        /* Rivian's "Demo drive" amber */
  --accent-text: #a35c00;   /* amber that passes AA as text on white */
  --danger: #c4001a;
  --focus: #0071e3;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Apple: standard ease-in-out and decelerate. Rivian: "attract" and "shift-magnetic". */
  --ease-inout: cubic-bezier(.4, 0, .6, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-emph: cubic-bezier(.2, 0, 0, 1);
  --ease-magnetic: cubic-bezier(.83, 0, .17, 1);
  --ease-roll: cubic-bezier(.16, 1, .3, 1);
  --ease-brake: cubic-bezier(.33, 1, .68, 1);

  --gutter: 20px;
}

/* --------------------------------------------------------------- Base -- */

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

html {
  background: var(--bg);
  /* Root scroll-state container: lets the header react to scrolling without JS. */
  container: page / scroll-state;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
img, svg { max-width: 100%; }
button, input { font: inherit; letter-spacing: inherit; color: inherit; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  translate: 0 -200%;
}
.skip-link:focus { translate: 0 0; }

.scroll-sentinel {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 8px;
  pointer-events: none;
}

/* --------------------------------------------------------- Typography -- */

.eyebrow {
  color: var(--accent-text);
  font-size: clamp(15px, 13px + .4vw, 19px);
  font-weight: 600;
  letter-spacing: .004em;
}

.section-title {
  max-width: 20ch;
  margin: 12px auto 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.35rem + 3vw, 4rem);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -.016em;
  text-wrap: balance;
}

.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------ Buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s var(--ease-magnetic), scale .2s var(--ease-out), opacity .15s;
}
.btn:active { scale: .97; }
.btn:disabled { opacity: .5; cursor: progress; }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }

.btn--accent { background: var(--accent); color: var(--ink); font-weight: 600; }
.btn--accent:hover { background: #ffb623; }

.btn--lg { height: 52px; padding: 0 28px; font-size: 17px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
.link-arrow::after {
  content: "";
  width: .45em;
  height: .45em;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  rotate: 45deg;
  transition: translate .25s var(--ease-out);
}
.link-arrow:hover::after { translate: 3px 0; }

/* -------------------------------------------------- Floating pill nav --
   One registered number, --compact, goes 0 -> 1 once the page scrolls.
   Every size below is interpolated from it, so the whole pill morphs on a
   single easing curve. */

.nav {
  --nav-w-wide: min(1120px, 100%);
  --nav-w-narrow: min(680px, 100%);
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 16px - 6px * var(--compact)) 12px 0;
  pointer-events: none;
  transition: --compact .7s var(--ease-magnetic);
}

@container page scroll-state(scrollable: top) {
  .nav { --compact: 1; }
}
.is-scrolled .nav { --compact: 1; }

.nav__pill {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: calc(var(--nav-w-wide) + (var(--nav-w-narrow) - var(--nav-w-wide)) * var(--compact));
  height: calc(58px - 8px * var(--compact));
  padding: 0 7px 0 24px;
  border-radius: 999px;
  background: rgb(255 255 255 / calc(.62 + .2 * var(--compact)));
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / calc(.05 + .02 * var(--compact))),
    0 calc(2px + 8px * var(--compact)) calc(10px + 24px * var(--compact)) rgb(0 0 0 / calc(.03 + .06 * var(--compact)));
  pointer-events: auto;
}

.nav__brand {
  justify-self: start;
  display: block;
  line-height: 0;
}
/* Horizontal logo from brand/ (built by tools/build_logo.py). It shrinks with the pill. */
.nav__brand img {
  display: block;
  width: auto;
  height: calc(34px - 4px * var(--compact));
}

.nav__links {
  display: flex;
  gap: calc(34px - 10px * var(--compact));
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__links a {
  font-size: 14px;
  text-decoration: none;
  opacity: .78;
  transition: opacity .15s;
}
.nav__links a:hover { opacity: 1; }

.nav__cta {
  justify-self: end;
  height: calc(44px - 6px * var(--compact));
  padding: 0 18px;
  font-size: 14px;
}

@media (max-width: 759px) {
  .nav { --nav-w-wide: 100%; --nav-w-narrow: calc(100% - 28px); }
  .nav__pill { grid-template-columns: 1fr auto; padding-left: 20px; }
  .nav__links { display: none; }
  .nav__brand img { height: 28px; }
}
@media (max-width: 359px) {
  .nav__brand img { height: 23px; }
}

/* --------------------------------------------------------------- Hero -- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(env(safe-area-inset-top) + clamp(104px, 15vh, 168px)) var(--gutter) clamp(24px, 4vh, 64px);
  text-align: center;
  overflow: hidden;
}

.hero__title {
  max-width: 13ch;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(2.875rem, 1.4rem + 5.2vw, 6rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.hero__sub {
  max-width: 40rem;
  margin-top: 22px;
  color: var(--ink-3);
  font-size: clamp(1.1875rem, 1rem + .55vw, 1.5rem);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: .004em;
  text-wrap: pretty;
}
.hero__sub strong { color: var(--ink); font-weight: 600; }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 30px;
  margin-top: 34px;
}

.hero__stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(2px, 2.4vw, 40px);
  width: min(1200px, 100%);
  margin-top: auto;
  padding-top: clamp(28px, 5vh, 72px);
}
.hero__kart { flex: 0 1 500px; }

/* Phones: center the block and let the kart tails run off the edges so
   the karts can stay big. */
@media (max-width: 639px) {
  .hero {
    justify-content: center;
    padding-top: calc(env(safe-area-inset-top) + 96px);
  }
  .hero__stage {
    width: 115vw;
    max-width: none;
    margin-top: clamp(40px, 7vh, 64px);
    padding-top: 0;
    gap: 3vw;
  }
  .hero__kart { flex: 0 0 56vw; }
}

/* Entrance: the karts roll in from opposite sides and stop nose to nose.
   Wheel spin uses the same curve as the travel, so rotation stays matched
   to distance the whole way. The curve slows them evenly, like braking,
   rather than shooting in and crawling the last stretch. */
.js .hero:not(.is-ready) .hero__kart { visibility: hidden; }

.hero.is-ready .hero__kart { animation: roll-from-left 2.2s var(--ease-brake) .5s both; }
.hero.is-ready .hero__kart--hatch { animation-name: roll-from-right; animation-delay: .62s; }
.hero.is-ready .kart__spin { animation: wheel-roll 2.2s var(--ease-brake) .5s both; }
.hero.is-ready .hero__kart--hatch .kart__spin { animation-delay: .62s; }
.hero.is-ready .kart__body { animation: brake-dip 2.2s var(--ease-inout) .5s both; }
.hero.is-ready .hero__kart--hatch .kart__body { animation-delay: .62s; }
.hero.is-ready .hero__kart--coupe .kart__spoiler { animation: spoiler-cycle 2.9s var(--ease-emph) .5s both; }
.hero.is-ready .hero__kart--coupe .kart__struts { animation: struts-cycle 2.9s var(--ease-emph) .5s both; }
.hero.is-ready .hero__kart--hatch .kart__popup { animation: popup-wink 1.7s var(--ease-emph) 2.9s both; }

@keyframes roll-from-left { from { translate: -72vw 0; } }
@keyframes roll-from-right { from { translate: 72vw 0; } }
@keyframes wheel-roll { from { rotate: 1260deg; } to { rotate: 0deg; } }
/* A small nose-down pitch while braking that eases out as the kart stops. */
@keyframes brake-dip {
  0% { rotate: 0deg; }
  35%, 70% { rotate: -.35deg; }
  100% { rotate: 0deg; }
}
@keyframes spoiler-cycle {
  0%, 52% { translate: 13px -11px; rotate: -3deg; }
  76%, 100% { translate: 0 0; rotate: 0deg; }
}
@keyframes struts-cycle {
  0%, 52% { opacity: 1; translate: 6px -5px; }
  76%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes popup-wink {
  0% { rotate: 0deg; }
  28%, 68% { rotate: var(--popup-open); }
  100% { rotate: 0deg; }
}

/* --------------------------------------------------------------- Kart -- */

/* Reserve the space before karts.js fills the container (no layout shift). */
[data-kart] { display: block; aspect-ratio: 1000 / 440; }

.kart {
  --paint: #c8102e;
  --paint2: #1b1b1d;
  --fx: 17.5%;
  --rx: 66.5%;
  --popup-open: 76deg; /* how far the Hatch's lamps turn to stand up */
  position: relative;
  display: block;
  aspect-ratio: 1000 / 440;
}
.kart--hatch { --fx: 18.2%; --rx: 66.2%; }
.kart.is-flipped, .is-flipped > .kart { scale: -1 1; }

.kart__body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 82%; /* pitch about the middle of the wheelbase */
}

.kart__paint { fill: var(--paint); transition: fill .6s var(--ease-inout); }
.kart__paint2 { fill: var(--paint2); transition: fill .6s var(--ease-inout); }

.kart__wheel {
  position: absolute;
  top: var(--wy, 61.364%);
  width: var(--wd, 16%);
  aspect-ratio: 1;
}
.kart__wheel--front { left: var(--fx); }
.kart__wheel--rear { left: var(--rx); }

/* Contact shadow under each tire, and a fixed glare that doesn't spin. */
.kart__wheel::before {
  content: "";
  position: absolute;
  left: 4%; right: 4%;
  bottom: -9%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / .5), rgb(0 0 0 / 0));
}
.kart__wheel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgb(255 255 255 / .2), rgb(255 255 255 / 0) 40%);
  pointer-events: none;
}

.kart__spin {
  position: absolute;
  inset: 0;
  rotate: calc(var(--spin, 0) * 1deg);
}
.kart__spin svg { display: block; width: 100%; height: 100%; }

/* Rendered karts (karts.js RENDERS): wheels sit under the body, which has
   holes where the tyres are. The light is baked in, so no fake glare. */
.kart__body > .kart__layer,
.kart__spin > .kart__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.kart__body > .kart__layer { opacity: 0; transition: opacity .6s var(--ease-inout); }
.kart__body > .kart__layer.is-shown { opacity: 1; }
.kart--render .kart__wheel::after { content: none; }

.kart__shadow {
  position: absolute;
  left: 3%; right: 3%;
  bottom: -3.8%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / .26), rgb(0 0 0 / .1) 60%, rgb(0 0 0 / 0));
}

.kart__spoiler {
  transform-box: fill-box;
  transform-origin: 100% 100%;
  transition: translate .7s var(--ease-emph), rotate .7s var(--ease-emph);
}
.kart__struts {
  opacity: 0;
  transition: opacity .3s, translate .7s var(--ease-emph);
}
.kart__popup {
  transform-box: fill-box;
  transform-origin: 100% 0;
  transition: rotate .6s var(--ease-emph);
}

/* Rendered pop-up lamps: the image shows them open, turned back shut about
   the hinge. The box only shows the space above the hood, so a shut lamp
   can't peek through the body, even while two colors cross-fade. */
.kart__lamps {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  width: var(--lw);
  height: var(--lh);
  clip-path: var(--lamp-clip);
}
.kart__lamps .kart__popup,
.kart__lamps img {
  position: absolute;
  inset: 0;
  transform-origin: var(--hinge);
}
.kart__lamps img {
  display: block;
  width: 100%;
  height: 100%;
  rotate: calc(-1 * var(--popup-open));
}

/* ------------------------------------------------------------- Lineup -- */

.lineup {
  /* --lp is raw scroll progress through the section (0..1). --pos holds at
     each end, eases in between, and drives everything the user sees. */
  --t: clamp(0, (var(--lp) - .18) / .64, 1);
  --pos: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
  position: relative;
  height: 340vh;
  scroll-margin-top: -96px; /* nav links land exactly where the pin starts */
}

.lineup__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.lineup__track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 200%;
  translate: calc(var(--pos) * -50%) 0;
}

.slide {
  --dist: max(var(--pos) - var(--i), var(--i) - var(--pos));
  position: relative;
  display: flex;
  flex: 0 0 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4.5vh, 48px);
  padding: 72px var(--gutter) 88px;
}

/* Kart width also answers to viewport height so the info and the
   segmented control always fit under it. */
.slide__hero {
  position: relative;
  width: max(260px, min(88vw, 980px, calc((100svh - 400px) * 2.27)));
  container-type: inline-size;
}

/* Rivian's trick: the name runs a little ahead of its vehicle, so the next
   name stays off screen until its kart is on the way in. */
.slide__name {
  position: absolute;
  left: 50%;
  bottom: 42%;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 30cqi;
  font-weight: 600;
  line-height: .8;
  letter-spacing: -.045em;
  text-transform: uppercase;
  white-space: nowrap;
  translate: calc(-50% + (var(--i) - var(--pos)) * 24vw) 0;
  opacity: calc(1 - var(--dist) * .5);
}

.slide__hero .kart { z-index: 1; }
.lineup .kart { --spin: calc(var(--pos) * var(--spin-range, -1400)); }

.lineup.is-moving .kart--coupe .kart__spoiler { translate: 13px -11px; rotate: -3deg; }
.lineup.is-moving .kart--coupe .kart__struts { opacity: 1; translate: 6px -5px; }
.lineup.is-arrived .kart--hatch .kart__popup { rotate: var(--popup-open); }

.slide__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 36rem;
  text-align: center;
  opacity: clamp(0, 1 - var(--dist) * 3.2, 1);
  translate: 0 calc(var(--dist) * 48px);
}
.slide:not(.is-active) .slide__info { pointer-events: none; }

.slide__tagline {
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.slide__note {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 15px;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 22px;
  padding: 0;
  border: 0;
}
.swatches legend {
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  color: var(--ink-2);
  font-size: 13px;
  text-align: center;
}
.swatches__name { margin-left: 4px; color: var(--ink); font-weight: 600; }

.swatch {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14);
  cursor: pointer;
  transition: box-shadow .2s var(--ease-out);
}
.swatch--duo { background: linear-gradient(180deg, var(--c) 52%, var(--c2) 52%); }
.swatch input {
  position: absolute;
  inset: -6px;
  margin: 0;
  border-radius: 50%;
  opacity: 0;
  cursor: pointer;
}
.swatch:has(input:checked) {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14), 0 0 0 3px #fff, 0 0 0 4.5px var(--ink);
}
.swatch:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 6px; }

/* iOS-style segmented control. The thumb follows scroll position. */
.segmented {
  position: absolute;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 999px;
  background: rgb(118 118 128 / .12);
  translate: -50% 0;
}
.segmented__thumb {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 3px 1px rgb(0 0 0 / .04);
  translate: calc(var(--pos) * 100%) 0;
}
.segmented button {
  position: relative;
  min-width: 92px;
  height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #636368;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color .2s;
}
.segmented button[aria-current="true"] { color: var(--ink); }

/* ------------------------------------------------------------- Motion --
   Short muted loops in rounded boxes, after the mosaic on Porsche's Mission S
   page: one wide clip beside two small ones, then a swipe row on phones.
   main.js plays each clip only while it's on screen. */

.motion {
  padding: clamp(96px, 14vh, 168px) var(--gutter) 0;
  text-align: center;
}

.clips {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  width: min(1120px, 100%);
  margin: clamp(40px, 7vh, 72px) auto 0;
}

.clip {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #f5f5f7;
}
.clip--wide { grid-row: span 2; aspect-ratio: 16 / 10; }

/* Absolutely placed so the video never sizes its box: the wide clip's
   aspect ratio sets the height, and the small ones split it. */
.clip__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clip__soon {
  position: absolute;
  inset: 0;
  display: none;
  place-content: center;
  color: var(--ink-3);
  font-size: 15px;
  font-weight: 500;
}
.clip:not(:has(source)) .clip__soon,
.clip.is-empty .clip__soon { display: grid; }

/* Porsche's round pause button in the bottom corner. */
.clip__toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s, scale .2s var(--ease-out);
}
.clip__toggle:hover { background: #fff; }
.clip__toggle:active { scale: .92; }
.clip__toggle svg { width: 14px; height: 14px; fill: currentColor; }
.clip__icon-play,
.clip.is-paused .clip__icon-pause { display: none; }
.clip.is-paused .clip__icon-play { display: block; }
html:not(.js) .clip__toggle,
.clip:not(:has(source)) .clip__toggle,
.clip.is-empty .clip__toggle { display: none; }

/* Phones: a swipe row that runs to the screen edges, with the next clip
   peeking in from the right. */
@media (max-width: 759px) {
  .clips {
    display: flex;
    gap: 12px;
    width: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .clips::-webkit-scrollbar { display: none; }
  .clip {
    flex: 0 0 min(82%, 340px);
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    scroll-snap-align: start;
  }
}

/* ----------------------------------------------------------- Delivery -- */

.delivery {
  padding: clamp(96px, 14vh, 168px) var(--gutter) clamp(56px, 8vh, 96px);
  text-align: center;
}

.map {
  width: min(1000px, 100%);
  margin: clamp(40px, 7vh, 72px) auto 0;
}
.map__canvas { position: relative; }
.map__svg { display: block; width: 100%; height: auto; overflow: visible; }

.map__dots {
  fill: none;
  stroke: #d2d2d7;
  stroke-linecap: round;
}
.map__dots--tx { stroke: var(--accent); }

.map__routes path {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: .28;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.map__dests circle { fill: var(--ink); fill-opacity: .4; }
.map__pin { fill: var(--ink); stroke: #fff; stroke-width: 2.5; }
.map__pulse { fill: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: center; }

.map__label {
  position: absolute;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.map__label--right { translate: 14px -50%; }
.map__label--left { translate: calc(-100% - 14px) -50%; }
.map__label--below { translate: -50% 12px; }

@media (max-width: 639px) {
  .map__label { display: none; }
}

/* Map entrance: dots spread out from Texas, then the routes draw. */
.js .map .map__dots {
  clip-path: circle(0% at 47% 76%);
  transition: clip-path 1.8s var(--ease-inout);
}
.js .map.is-in .map__dots { clip-path: circle(150% at 47% 76%); }
.js .map .map__routes path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--ease-inout) calc(.8s + var(--k, 0) * 90ms);
}
.js .map.is-in .map__routes path { stroke-dashoffset: 0; }
.js .map .map__dests circle,
.js .map .map__pin,
.js .map .map__label {
  opacity: 0;
  transition: opacity .6s var(--ease-out) 1.6s;
}
.js .map.is-in .map__dests circle,
.js .map.is-in .map__pin,
.js .map.is-in .map__label { opacity: 1; }
.map.is-in .map__pulse { animation: pulse 2.4s var(--ease-out) calc(1.8s + var(--i) * .35s) infinite; }

@keyframes pulse {
  from { scale: 1; opacity: .75; }
  to { scale: 3.4; opacity: 0; }
}

.delivery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 840px;
  margin: clamp(48px, 7vh, 72px) auto 0;
}
.stat__big {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.stat__body {
  max-width: 22rem;
  margin: 10px auto 0;
  color: var(--ink-2);
  text-wrap: pretty;
}

@media (max-width: 639px) {
  .delivery__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ----------------------------------------------------------- Waitlist --
   After Rivian's R2 reservation page: a sticky showroom panel on the left,
   the form down the right. The kart cards follow Porsche's model overview,
   with the kart parked inside its card. main.js sets --tint
   (the picked paint) and data-show (the picked kart) on .showroom. */

.waitlist {
  padding: clamp(72px, 10vh, 128px) var(--gutter) clamp(88px, 12vh, 140px);
}
.waitlist__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
}

.showroom {
  --tint: #d2d2d7;
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  height: clamp(480px, calc(100svh - 124px), 780px);
  padding: 28px;
  border-radius: 28px;
  background: color-mix(in oklab, var(--tint) 13%, #f5f5f7);
  overflow: hidden;
  transition: background-color .7s var(--ease-inout);
}
.showroom::before { /* a soft floor under the karts */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .045));
  pointer-events: none;
}
.showroom__logo { position: relative; display: block; width: auto; height: 24px; align-self: flex-start; }
.showroom__floor { position: relative; flex: 1; }
.showroom__kart {
  position: absolute;
  bottom: 18%;
  left: 5%;
  width: 90%;
  transition:
    left .9s var(--ease-roll), width .9s var(--ease-roll), bottom .9s var(--ease-roll),
    translate .9s var(--ease-roll), opacity .5s var(--ease-out), filter .5s var(--ease-out);
}
/* The kart that isn't picked waits off to the right, so a new pick drives in nose first. */
.showroom[data-show="coupe"] .showroom__kart--hatch,
.showroom[data-show="hatch"] .showroom__kart--coupe { opacity: 0; translate: 80% 0; }
/* Nothing picked, or either one: both karts side by side. */
.showroom:is([data-show="none"], [data-show="both"]) .showroom__kart { width: 46%; bottom: 24%; }
.showroom:is([data-show="none"], [data-show="both"]) .showroom__kart--coupe { left: 2%; }
.showroom:is([data-show="none"], [data-show="both"]) .showroom__kart--hatch { left: 52%; }
.showroom[data-show="none"] .showroom__kart { opacity: .3; filter: grayscale(1); }

.showroom.is-rolling .kart__spin { animation: showroom-roll .9s var(--ease-roll); }
@keyframes showroom-roll { from { rotate: 320deg; } }

.showroom__caption {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
}
.showroom__color { color: var(--ink-3); }

/* Key specs under the caption, Rivian-configurator style. main.js updates
   speed and range as the motor and add-ons change. */
.showroom__specs {
  position: relative;
  display: flex;
  gap: clamp(24px, 3vw, 44px);
  margin: 14px 0 0;
}
.showroom__specs div { display: flex; flex-direction: column-reverse; }
.showroom__specs dt { color: var(--ink-3); font-size: 13px; }
.showroom__specs dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + .6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.showroom__stat { display: inline-block; }
.showroom__stat.is-ticking { animation: stat-tick .45s var(--ease-out); }
@keyframes stat-tick { from { opacity: 0; translate: 0 .35em; } }

/* Signed up: a stamp-style badge in the corner. */
.showroom::after {
  content: "On the list";
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  scale: .8;
  transition: opacity .3s, scale .5s var(--ease-roll);
}
.showroom.is-done::after { opacity: 1; scale: 1; }

.waitlist__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.facts { margin: 32px 0 0; }
.facts > div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; color: var(--ink-2); }

.waitlist .form { gap: 40px; margin-top: 48px; }
.form .form__heading {
  width: 100%;
  margin-bottom: 14px;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.016em;
  text-align: left;
}
.form__group { margin: 0; padding: 0; border: 0; }

/* Kart cards */
.models {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}
.model {
  position: relative;
  display: grid;
  align-content: start;
  padding: 0 18px 18px;
  border-radius: 20px;
  background: #f5f5f7;
  box-shadow: inset 0 0 0 2px transparent;
  cursor: pointer;
  transition: box-shadow .25s var(--ease-out), background-color .25s;
}
.model:hover { background: #efeff2; }
.model:has(input:checked) { background: #fff; box-shadow: inset 0 0 0 2px var(--ink), 0 10px 30px rgb(0 0 0 / .08); }
.model:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.model input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* The renders leave about 40% of their height empty above the roof. The negative top
   margin trims most of that, in % of the card width so the roof clears the card's
   top edge (and the picked card's outline) by the same amount at every size. */
.model__art { width: 104%; margin: -10% -2% 4px; }
.model__name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.016em;
}
.model__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.model__tags span {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgb(0 0 0 / .06);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.either {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  margin-top: 6px;
  cursor: pointer;
}
.either input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.either span { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 15px; }
.either span::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #b8b8bf;
  transition: box-shadow .2s var(--ease-out);
}
.either input:checked + span { color: var(--ink); }
.either input:checked + span::before { box-shadow: inset 0 0 0 6px var(--ink); }
.either input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.models .field__error { grid-column: 1 / -1; }
.models:has(input:user-invalid) .field__error { display: block; }
.models:has(input:user-invalid) .model { box-shadow: inset 0 0 0 1px var(--danger); }

.form__colors { justify-content: flex-start; gap: 14px; margin: 0; padding-left: 4px; }

/* Options: motor and add-on cards, seat and interior chips. */
.options { display: grid; gap: 26px; min-width: 0; margin: 0; padding: 0; border: 0; }
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.choices legend { margin-bottom: 10px; padding: 0; color: var(--ink-2); font-size: 14px; }
.choice {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 14px 16px 15px;
  border-radius: 14px;
  background: #f5f5f7;
  box-shadow: inset 0 0 0 2px transparent;
  cursor: pointer;
  transition: box-shadow .25s var(--ease-out), background-color .25s;
}
.choice:hover { background: #efeff2; }
.choice:has(input:checked) { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.choice input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice__name { font-size: 16px; font-weight: 600; }
.choice__detail { color: var(--ink-2); font-size: 13px; line-height: 1.35; }
/* Add-ons stack, so each card gets a tick box. */
.choices--check .choice { padding-right: 44px; }
.choices--check .choice::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px #b8b8bf;
  background: no-repeat center / 12px;
  transition: background-color .2s, box-shadow .2s;
}
.choices--check .choice:has(input:checked)::after {
  box-shadow: none;
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7l4.5-5.2' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.options__note { margin: -6px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.45; }

/* Full specs, folded away like Apple's tech specs. */
.specs { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.specs summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 2px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
}
.specs summary::-webkit-details-marker { display: none; }
.specs summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-right: 1.75px solid;
  border-bottom: 1.75px solid;
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate .3s var(--ease-out), translate .3s var(--ease-out);
}
.specs[open] summary::after { rotate: 225deg; translate: 0 2px; }
.specs summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.specs__list { margin: 0; }
.specs__list > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.specs__list dt { font-weight: 600; }
.specs__list dd { margin: 0; color: var(--ink-2); }
.specs__note { margin: 4px 0 18px; color: var(--ink-3); font-size: 13px; }

.delivery-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 13px 16px;
  border-radius: 12px;
  background: #f5f5f7;
  font-size: 15px;
  font-weight: 500;
}
.delivery-note::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
}
.delivery-note.is-next-day::before { background: #1f9d55; box-shadow: 0 0 0 4px rgb(31 157 85 / .16); }

.waitlist .success { margin: 48px 0 0; }
.waitlist .success__summary { margin-top: 28px; }

@media (max-width: 899px) {
  .waitlist__grid { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .showroom { position: relative; top: auto; height: auto; aspect-ratio: 5 / 4; padding: 20px; border-radius: 22px; }
  .showroom__logo { height: 18px; }
  .showroom::after { top: 16px; right: 16px; }
}
@media (max-width: 479px) {
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .model { padding: 0 12px 14px; }
  .model__name { font-size: 18px; }
  .choices--check { grid-template-columns: 1fr; gap: 8px; }
  .specs__list > div { grid-template-columns: 6rem 1fr; gap: 12px; }
}

.form {
  display: grid;
  gap: 22px;
  text-align: left;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 168px;
  gap: 12px;
}

.field { position: relative; }
.field input {
  width: 100%;
  height: 58px;
  padding: 24px 16px 8px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #f3f3f5;
  font-size: 17px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field input:hover { background: #ededf0; }
.field input:focus {
  outline: none;
  background: #fff;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgb(0 0 0 / .07);
}
.field label {
  position: absolute;
  top: 18px;
  left: 17px;
  color: var(--ink-2);
  font-size: 17px;
  transform-origin: 0 0;
  pointer-events: none;
  transition: translate .2s var(--ease-out), scale .2s var(--ease-out);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  translate: 0 -10px;
  scale: .72;
}

.field input:user-invalid {
  border-color: var(--danger);
  background: #fff7f7;
}

.field__error {
  display: none;
  margin: 7px 4px 0;
  color: var(--danger);
  font-size: 13px;
}
.field:has(input:user-invalid) .field__error,
.chips:has(input:user-invalid) .field__error { display: block; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.chips legend {
  margin-bottom: 10px;
  padding: 0;
  color: var(--ink-2);
  font-size: 14px;
}
.chips .field__error { width: 100%; margin-top: 2px; }

.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  transition: background-color .2s var(--ease-out), border-color .2s, color .2s;
}
.chip:hover span { border-color: #b8b8bf; }
.chip input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.chips:has(input:user-invalid) .chip span { border-color: var(--danger); }

.form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit { width: 100%; height: 56px; }
.form__status:empty { display: none; }
.form__status { color: var(--danger); font-size: 14px; text-align: center; }

.form__fine {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -.005em;
}

@media (max-width: 539px) {
  .form__row { grid-template-columns: 1fr; }
}

.success {
  max-width: 480px;
  margin: 48px auto 0;
  outline: none;
}
.success__title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.016em;
}
.success__body { margin-top: 8px; color: var(--ink-2); }

/* ------------------------------------------------------------- Footer -- */

.footer {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px var(--gutter) calc(48px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: -.005em;
}
.footer p + p { margin-top: 4px; }
.footer__brand {
  margin-bottom: 14px;
  line-height: 0;
}
.footer__brand img { display: block; width: auto; height: 26px; }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.footer__links a { text-decoration: none; }
.footer__links a:hover { color: var(--ink); text-decoration: underline; }


/* ------------------------------------------------------------- Reveal --
   Apple-style staggered fade-up, triggered once when an element enters
   the viewport. Elements stay visible if JS never runs. */

.js .reveal {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity 1s var(--ease-out) calc(var(--d, 0) * 1ms),
    translate 1.1s var(--ease-out) calc(var(--d, 0) * 1ms);
}
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* ------------------------------------------------ Native scroll timelines */

@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @media (prefers-reduced-motion: no-preference) {
    .lineup {
      animation: lineup-progress linear both;
      animation-timeline: view();
      animation-range: contain 0% contain 100%;
    }
  }
}
@keyframes lineup-progress { from { --lp: 0; } to { --lp: 1; } }

/* ------------------------------------------------------ Reduced motion --
   No pinned scenes: the karts stack, and nothing rolls, pulses or slides. */

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }

  .js .reveal { translate: none; transition: opacity .4s linear; }

  .hero.is-ready .hero__kart,
  .hero.is-ready .kart__spin,
  .hero.is-ready .kart__body,
  .hero.is-ready .kart__spoiler,
  .hero.is-ready .kart__struts,
  .hero.is-ready .kart__popup { animation: none; }

  .lineup { height: auto; scroll-margin-top: 0; }
  .lineup .kart { --spin: 0; }
  .lineup__stage { position: static; height: auto; overflow: visible; }
  .lineup__track { position: static; flex-direction: column; width: 100%; translate: none; }
  .slide { --dist: 0; flex: none; padding-block: 96px 48px; }
  .slide__name { translate: -50% 0; opacity: 1; }
  .slide__info { opacity: 1; translate: none; }
  .slide:not(.is-active) .slide__info { pointer-events: auto; }
  .segmented { display: none; }

  .showroom__kart { transition: opacity .3s linear; }
  .showroom.is-rolling .kart__spin { animation: none; }

  .map__pulse { animation: none !important; }
  .js .map .map__dots { clip-path: none; transition: none; }
  .js .map .map__routes path { stroke-dashoffset: 0; transition: none; }
  .js .map .map__dests circle,
  .js .map .map__pin,
  .js .map .map__label { opacity: 1; transition: none; }

  .kart__paint, .kart__paint2, .kart__spoiler, .kart__popup, .kart__body > .kart__layer { transition: none; }
}