/* ---------- tokens ---------- */
:root {
  --bg: #0a0a0b;
  --bg-raised: #141416;
  --fg: #f2f0ec;
  --muted: #9a9892;
  --accent: #c9a961;
  --accent-hover: #ddc07e;
  --on-accent: #100e08;
  --line: #26262a;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.4;
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.6rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  z-index: 100;
  transform: translateY(-4rem);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- nav ---------- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem clamp(1.5rem, 5vw, 4rem);
  z-index: 50;
  mix-blend-mode: difference;
}
.brand {
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
}
.site-nav nav a {
  color: var(--fg);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease-out);
}
.site-nav nav a:focus-visible { border-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .site-nav nav a:hover { border-color: currentColor; }
}

a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- typography ---------- */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--accent);
  margin: 0 0 1rem;
}
h1, h2 {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--fg);
}

/* ---------- car palette ---------- */
.car-svg { display: block; width: 100%; height: auto; overflow: visible; }
.car-body { fill: var(--fg); }
.car-glass { fill: var(--bg); opacity: 0.55; }
.car-wheel { fill: #050506; stroke: var(--line); stroke-width: 2; }
.car-hub { fill: var(--accent); }
.car-shadow { fill: #000; opacity: 0.4; filter: blur(6px); }
.car-grille { fill: var(--bg); opacity: 0.6; }
.car-light { fill: var(--accent); }

/* =========================================================
   SCROLL STORY — one car, 4 segments, scrubbed by scroll.
   .story is 480vh tall; .stage sticks for 380vh of it.
   `animation-range: contain 0% contain 100%` maps exactly
   onto that sticky span, so keyframe % = scroll progress.
   ========================================================= */
.story {
  height: 480vh;
  view-timeline-name: --story;
  view-timeline-axis: block;
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 40%, #16161a 0%, var(--bg) 72%);
}

.stage > * { grid-area: 1 / 1; }

.car-view {
  width: min(64vw, 580px);
  pointer-events: none;
}
.car-view--front { width: min(38vw, 320px); }
.car-view--spin {
  width: min(30vw, 250px);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  align-self: center;
  justify-self: center;
  margin-top: 6vh;
}

.story-copy {
  max-width: 28rem;
  z-index: 2;
}
.story-copy--1 { align-self: end; justify-self: start; margin: 0 0 10vh clamp(1.5rem, 6vw, 6rem); }
.story-copy--2 { align-self: end; justify-self: end; text-align: right; margin: 0 clamp(1.5rem, 6vw, 6rem) 10vh 0; }
.story-copy--3 { align-self: end; justify-self: start; margin: 0 0 10vh clamp(1.5rem, 6vw, 6rem); }
.story-copy--4 { align-self: start; justify-self: center; text-align: center; margin-top: 14vh; }

.scroll-cue {
  align-self: end;
  justify-self: center;
  margin-bottom: 2rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- scrubbed keyframes ---------- */
@supports (animation-timeline: view()) {
  .car-view, .story-copy, .scroll-cue {
    animation: linear both;
    animation-timeline: --story;
    animation-range: contain 0% contain 100%;
  }
  .car-view--side     { animation-name: seg-side; }
  .car-view--elevated { animation-name: seg-elevated; }
  .car-view--front    { animation-name: seg-front; }
  .car-view--spin     { animation-name: seg-spin; }
  .story-copy--1      { animation-name: copy-1; }
  .story-copy--2      { animation-name: copy-2; }
  .story-copy--3      { animation-name: copy-3; }
  .story-copy--4      { animation-name: copy-4; }
  .scroll-cue         { animation-name: cue; }
}

/* fallback: no scroll-driven animation support → static stacked layout */
@supports not (animation-timeline: view()) {
  .story { height: auto; }
  .stage {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    padding: 8rem 1.5rem 4rem;
  }
  .story-copy { text-align: center; margin: 0; align-self: center; justify-self: center; }
  .scroll-cue { display: none; }
  .car-view--spin { margin-top: 0; }
}

/* Segment map (contain %):
   0–22   side view, drifting down (green arrow: travel downward)
   22–30  crossfade side → elevated
   30–47  elevated view
   47–55  crossfade elevated → front
   55–72  front view
   72–80  front shrinks into spin icon
   80–100 spin icon interactive, then release into landing        */

@keyframes seg-side {
  0%   { opacity: 1; visibility: visible; transform: translateY(-4vh); }
  20%  { opacity: 1; transform: translateY(5vh); }
  28%  { opacity: 0; visibility: hidden; transform: translateY(9vh) scale(0.97); }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes seg-elevated {
  0%, 21% { opacity: 0; visibility: hidden; transform: translateX(-7vw) scale(0.93); }
  30%  { opacity: 1; visibility: visible; transform: translateX(0) scale(1); }
  46%  { opacity: 1; transform: translateX(1.5vw) scale(1.02); }
  54%  { opacity: 0; visibility: hidden; transform: translateX(3vw) scale(0.96); }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes seg-front {
  0%, 46% { opacity: 0; visibility: hidden; transform: scale(1.18); }
  55%  { opacity: 1; visibility: visible; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }
  79%  { opacity: 0; visibility: hidden; transform: scale(0.55); }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes seg-spin {
  0%, 73% { opacity: 0; visibility: hidden; transform: scale(1.4); }
  81%  { opacity: 1; visibility: visible; transform: scale(1); }
  100% { opacity: 1; visibility: visible; transform: scale(1); }
}

@keyframes copy-1 {
  0%   { opacity: 1; visibility: visible; transform: translateY(0); }
  18%  { opacity: 1; }
  26%  { opacity: 0; visibility: hidden; transform: translateY(-2vh); }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes copy-2 {
  0%, 26% { opacity: 0; visibility: hidden; transform: translateY(3vh); }
  33%  { opacity: 1; visibility: visible; transform: translateY(0); }
  46%  { opacity: 1; }
  53%  { opacity: 0; visibility: hidden; transform: translateY(-2vh); }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes copy-3 {
  0%, 52% { opacity: 0; visibility: hidden; transform: translateY(3vh); }
  59%  { opacity: 1; visibility: visible; transform: translateY(0); }
  70%  { opacity: 1; }
  78%  { opacity: 0; visibility: hidden; transform: translateY(-2vh); }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes copy-4 {
  0%, 76% { opacity: 0; visibility: hidden; transform: translateY(3vh); }
  84%  { opacity: 1; visibility: visible; transform: translateY(0); }
  100% { opacity: 1; visibility: visible; }
}
@keyframes cue {
  0%   { opacity: 1; }
  8%   { opacity: 1; }
  14%  { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}

/* ---------- 3D stage ---------- */
.stage3d {
  width: 100%;
  height: 100%;
  z-index: 1;
  touch-action: pan-y;
}
.stage3d canvas { display: block; width: 100%; height: 100%; }
.stage3d.is-spin { cursor: grab; touch-action: none; }
.stage3d.is-spin:active { cursor: grabbing; }

/* when the 3D model is live: hide SVG fallback views, force the sticky
   story layout even in browsers without CSS scroll-timeline support
   (JS drives the scrub there), and let JS own the copy fades */
body.has-3d .car-view { display: none !important; }
body.has-3d .story { height: 620vh !important; }
body.has-3d .stage {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}
body.has-3d .story-copy,
body.has-3d .scroll-cue {
  animation: none !important;
}
body.has-3d .story-copy--1 { align-self: end; justify-self: start; text-align: left; margin: 0 0 10vh clamp(1.5rem, 6vw, 6rem); }
body.has-3d .story-copy--2 { align-self: end; justify-self: end; text-align: right; margin: 0 clamp(1.5rem, 6vw, 6rem) 10vh 0; }
body.has-3d .story-copy--3 { align-self: end; justify-self: start; text-align: left; margin: 0 0 10vh clamp(1.5rem, 6vw, 6rem); }
body.has-3d .story-copy--4 { align-self: start; justify-self: center; text-align: center; margin-top: 12vh; }
.spin-hint--3d { margin-top: 1rem; }

/* exploded-view callouts (panel 7: seat / motor) */
.callout {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  background: rgba(10, 10, 11, 0.78);
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
  body.has-3d .story { height: auto !important; }
  body.has-3d .stage {
    position: static !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem !important;
    padding: 8rem 1.5rem 4rem !important;
  }
  body.has-3d .stage3d { height: 60vh; }
  body.has-3d .story-copy { text-align: center !important; margin: 0 !important; }
}

/* ---------- spin rig ---------- */
.spin-rig {
  width: 100%;
  perspective: 900px;
  cursor: grab;
  touch-action: none;
  border-radius: 12px;
}
.spin-rig:active { cursor: grabbing; }
.car-svg--spin {
  transform: rotate3d(0, 1, 0, var(--drag-deg, 0deg));
  transition: transform 0.35s var(--ease-out);
  will-change: transform;
}
.spin-rig.is-dragging .car-svg--spin { transition: none; }
.spin-hint {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

/* ---------- landing (panel 5) ---------- */
.beat {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem clamp(1.5rem, 6vw, 6rem);
}
.beat--landing {
  flex-direction: column;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-raised) 100%);
  border-top: 1px solid var(--line);
}
.landing-inner { text-align: center; max-width: 34rem; }
.landing-sub { color: var(--muted); font-size: 1rem; margin: 1.25rem 0 2rem; }
.cta {
  display: inline-block;
  padding: 0.9rem 2rem;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border-radius: 999px;
  transition: transform 0.15s var(--ease-out), background 0.2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover { transform: translateY(-2px); background: var(--accent-hover); }
}
.cta:active { transform: translateY(0) scale(0.97); background: var(--accent-hover); }

@supports (animation-timeline: view()) {
  .landing-inner {
    animation: landing-rise linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
}
@keyframes landing-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- reduced motion: end state, immediately ---------- */
@media (prefers-reduced-motion: reduce) {
  .story { height: auto; }
  .stage {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    padding: 8rem 1.5rem 4rem;
  }
  .car-view, .story-copy, .scroll-cue, .landing-inner {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .story-copy { text-align: center; margin: 0; }
  .scroll-cue { display: none; }
  .car-view--spin { margin-top: 0; }
  .car-svg--spin { transition: none; }
  .cta { transition: none; }
}

/* ---------- footer ---------- */
.site-footer {
  padding: 2rem clamp(1.5rem, 6vw, 4rem);
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem;
  background: var(--bg-raised);
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .story { height: 420vh; }
  body.has-3d .story { height: 520vh !important; }
  .car-view { width: min(84vw, 460px); }
  .car-view--front { width: min(56vw, 300px); }
  .car-view--spin { width: min(46vw, 220px); }
  .story-copy--1, .story-copy--2, .story-copy--3 {
    justify-self: center;
    text-align: center;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
}