/* =========================================================
   MOTOZONE — instrument cluster layer
   One idea: the site behaves like a bike's dash.
   Ignition self-test → live tacho → gear → odometer → headlight.
   ========================================================= */

/* ---------- 1. ignition sequence ---------- */
.ignition{
  position:fixed;inset:0;z-index:200;
  background:var(--sunk);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .45s ease;
}
.ignition[hidden]{display:none!important}
.ignition.done{opacity:0;pointer-events:none}
.ig-canvas{width:min(380px,72vw);aspect-ratio:1;display:block}
.ig-word{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(38px,8vw,74px);line-height:.85;letter-spacing:.01em;
  opacity:0;transform:translateY(10px);
}
.ig-word span{color:var(--red)}
.ig-word.lit{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
.ig-lamps{display:flex;gap:10px}
.ig-lamps i{
  width:9px;height:9px;border-radius:50%;background:var(--line);
  transition:background .12s ease,box-shadow .12s ease;
}
.ig-lamps i.on{background:var(--red);box-shadow:0 0 10px 1px rgba(224,27,36,.7)}
.ig-lamps i.ok{background:var(--green);box-shadow:0 0 10px 1px rgba(50,194,126,.55)}
.ig-status{
  font-family:var(--data);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);min-height:1.2em;
}
.ig-skip{
  position:absolute;right:22px;bottom:20px;
  font-family:var(--data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);padding:8px 13px;
}
.ig-skip:hover{color:var(--ink);border-color:var(--ink-3)}

/* shutter reveal */
.ignition::before,.ignition::after{
  content:"";position:absolute;left:0;right:0;height:50%;background:var(--sunk);z-index:-1;
  transition:transform .5s cubic-bezier(.7,0,.3,1);
}
.ignition::before{top:0}
.ignition::after{bottom:0}
.ignition.lift::before{transform:translateY(-100%)}
.ignition.lift::after{transform:translateY(100%)}
.ignition.lift{background:transparent}

/* page enters after ignition.
   The overlay is fixed and covers everything, so we never lock scroll.
   The animation is a pure-CSS failsafe: if the script never runs, content
   reappears on its own after 5s rather than staying hidden forever. */
html[data-boot] .hero,html[data-boot] .site-head,
html[data-boot] section,html[data-boot] .site-foot,
html[data-boot] .ticker,html[data-boot] .chain{
  opacity:0;
  animation:bootfailsafe 0s linear 5s forwards;
}
@keyframes bootfailsafe{to{opacity:1}}
/* The header still fades up, but NOT .hero — animating opacity on the element
   that contains the hero canvas left it in a composited layer that never
   settled back to opacity 1, so the helmet drew correctly into the canvas and
   was never painted to the page. The ignition already covers the reveal. */
html.booted .site-head{animation:fadeup .5s ease both}

@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- 2. shift lights ----------
   A MotoGP shift-light strip pinned under the header. LEDs fill as you scroll,
   ramp green → amber → red, and flash at the limiter. Full width, so unlike a
   corner dial you cannot miss it — and it works on mobile too. */
.shiftlights{
  position:fixed;top:52px;left:0;right:0;z-index:59;
  height:14px;display:flex;gap:2px;padding:4px 10px 0;
  background:linear-gradient(180deg,rgba(7,7,8,.92) 0%,rgba(7,7,8,.55) 60%,transparent 100%);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.shiftlights.show{opacity:1}
.sl-seg{
  flex:1;height:6px;background:#1C1C20;
  transition:background .09s linear,box-shadow .09s linear,transform .09s ease;
}
.sl-seg.on{background:#F3F2F0;box-shadow:0 0 7px rgba(255,255,255,.5)}
.sl-seg.on.amb{background:#F0A81E;box-shadow:0 0 8px rgba(240,168,30,.75)}
.sl-seg.on.red{background:#FF3B41;box-shadow:0 0 11px rgba(255,59,65,.9);transform:scaleY(1.5)}
.shiftlights.limiter .sl-seg.on{animation:limiter .18s steps(1) infinite}
@keyframes limiter{50%{background:#2A0E10;box-shadow:none}}

.sl-chip{
  position:fixed;right:14px;top:82px;z-index:59;
  font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:rgba(7,7,8,.82);border:1px solid var(--line);
  padding:5px 10px;font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.sl-chip.show{opacity:1}
.sl-chip b{color:var(--red);font-weight:600}
@media (max-width:760px){.sl-chip{display:none}}

/* ---------- 3. headlight on hero ---------- */
.hero{--mx:70%;--my:20%}
.hero .beam{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(320px 320px at var(--mx) var(--my),
    rgba(255,235,200,.10), rgba(255,180,120,.04) 42%, transparent 70%);
  transition:opacity .4s ease;
}
.hero-in{z-index:1}

/* ---------- 4. cards lean into the cursor ---------- */
.card{transform-style:preserve-3d;will-change:transform}
.card.lean{transition:transform .12s ease-out,border-color .18s ease}

/* ---------- 5. odometer ---------- */
.odo{display:inline-flex;overflow:hidden;vertical-align:baseline;line-height:1}
/* .stat b sets display:block and would win on specificity — beat it explicitly
   or the digit columns stack vertically instead of sitting side by side. */
.num.odo,.stat b.odo{display:inline-flex}
.odo-col{
  display:block;overflow:hidden;height:1em;
}
.odo-col span{display:block;height:1em;line-height:1}
.odo-col.roll span{transition:transform .9s cubic-bezier(.15,.85,.25,1)}

/* ---------- 6. chain divider ---------- */
.chain{
  height:22px;position:relative;overflow:hidden;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:var(--sunk);
}
.chain i{
  position:absolute;top:50%;left:0;width:200%;height:10px;transform:translateY(-50%);
  background:
    repeating-linear-gradient(90deg,
      transparent 0 6px, var(--line) 6px 8px, transparent 8px 14px),
    repeating-linear-gradient(90deg,
      var(--surface-2) 0 14px, transparent 14px 28px);
  animation:chainrun 3.4s linear infinite;
}
@keyframes chainrun{to{transform:translate(-14px,-50%)}}

/* ---------- 7. scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(18px)}
[data-reveal].in{
  opacity:1;transform:none;
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--rd,0ms);
}

/* ---------- 8. redline hover on price ---------- */
.price,.hero-price{transition:text-shadow .2s ease}
.card:hover .price{text-shadow:0 0 18px rgba(224,27,36,.55)}

/* ---------- reduced motion: everything calms down ---------- */
@media (prefers-reduced-motion:reduce){
  .ignition{display:none!important}
  html[data-boot] .hero,html[data-boot] .site-head,
  html[data-boot] section,html[data-boot] .site-foot,
  html[data-boot] .ticker,html[data-boot] .chain{opacity:1}
  .chain i{animation:none}
  [data-reveal]{opacity:1;transform:none}
  .shiftlights,.sl-chip{display:none}
  .hero .beam{display:none}
}


/* =========================================================
   Full-bleed stock ticker — a pit board running the floor
   ========================================================= */
.ticker{
  overflow:hidden;background:var(--sunk);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;position:relative;
}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--sunk),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--sunk),transparent)}
.ticker-row{display:flex;width:max-content;animation:tick 44s linear infinite}
.ticker:hover .ticker-row,.ticker:focus-within .ticker-row{animation-play-state:paused}
.ticker a{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,5.2vw,58px);line-height:1;white-space:nowrap;
  padding:0 22px;color:var(--ink);display:inline-flex;align-items:baseline;gap:14px;
  transition:color .15s ease;
}
.ticker a:hover,.ticker a:focus-visible{color:var(--red)}
.ticker a i{
  font-style:normal;font-family:var(--data);font-size:14px;font-weight:500;
  color:var(--red);font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.ticker .sep{
  font-family:var(--display);font-size:clamp(30px,5.2vw,58px);font-weight:800;
  color:var(--red-dim);padding:0 4px;line-height:1;user-select:none;
}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker-row{animation:none}
  .ticker{overflow-x:auto}
}