/* =============================================================================
 * intro.css — motion for the XAT RACING startup flourish (assets/js/intro.js).
 *
 * Timeline of the full sting (seconds, transitions armed by .go):
 *   0.00–0.68  slats fly in — alternating bands from opposite sides, staggered
 *              top→bottom, spring-overshoot settle (Myrl's entrance energy)
 *   0.72–1.30  headlight sheen sweeps through the letterforms (Revive's sweep,
 *              skewed to the italic slant like a passing car)
 *   1.05–1.85  XATRACING.COM rises letter by letter, blur→sharp (Myrl's rise)
 *   1.15–1.75  RPM bar winds green→yellow→redline, then flashes
 *   2.65       launch: the lockup speed-skews and shoots off-screen right,
 *              overlay fades (our spin on Revive's scale-fade exit)
 *
 * The micro-sting (repeat visits, .xat-intro--micro) skips the slat flight —
 * slats start assembled; only sheen + word pop play, exiting at ~0.95s.
 * ===========================================================================*/

.xat-intro {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  cursor: pointer;
  background:
    radial-gradient(115% 90% at 50% 38%, #23262b 0%, #131519 55%, #0a0b0d 100%);
  transition: opacity .5s ease .12s, visibility .5s .12s;
}
body.xat-intro-lock { overflow: hidden; }

/* A faint horizon line behind the lockup — the road at night. */
.xat-intro__road {
  position: absolute; left: 8%; right: 8%; top: 58%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 210, 234, .28) 30%,
    rgba(255, 255, 255, .4) 50%, rgba(143, 210, 234, .28) 70%, transparent);
  opacity: 0; transform: scaleX(.3);
  transition: opacity .6s ease .15s, transform .9s cubic-bezier(.16, 1, .3, 1) .15s;
}
.xat-intro.go .xat-intro__road { opacity: 1; transform: none; }

.xat-intro__lockup {
  width: min(78vw, 460px);
  text-align: center;
  transform: translateY(-4%);
}
.xat-intro__lockup svg.xat-mark { width: 100%; display: block; overflow: visible; }

/* --- slat flight ---------------------------------------------------------- */
/* Each generated slat carries --i (band index, top→bottom) and --dir (+1/-1,
 * alternating). Transforming the group moves its clip window WITH its content,
 * so a whole strip of the logo flies as one object. */
.xat-slat {
  opacity: 0;
  transform: translateX(calc(var(--dir) * 130%)) skewX(-14deg);
}
.xat-intro.go .xat-slat {
  opacity: 1;
  transform: none;
  transition:
    transform .5s cubic-bezier(.22, 1.42, .36, 1) calc(var(--i) * 62ms),
    opacity   .3s ease                             calc(var(--i) * 62ms);
}
/* Micro-sting: slats are already home. */
.xat-intro--micro .xat-slat { opacity: 1; transform: none; }

/* --- headlight sheen ------------------------------------------------------- */
/* The generated .xat-sheen rect sits clipped inside the letterforms and skewed
 * travel makes it read as a light bar passing over chrome. */
@keyframes xatSheen {
  from { transform: translateX(0) skewX(-24deg); opacity: .85; }
  to   { transform: translateX(300px) skewX(-24deg); opacity: 0; }
}
.xat-intro.go .xat-sheen { animation: xatSheen .62s cubic-bezier(.4, 0, .2, 1) .72s forwards; }
.xat-intro--micro.go .xat-sheen { animation-delay: .18s; }

/* --- wordmark rise --------------------------------------------------------- */
.xat-intro__word {
  margin-top: clamp(10px, 2.6vw, 16px);
  font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  font-style: italic; font-weight: 900;
  font-size: clamp(17px, 4.6vw, 27px);
  letter-spacing: .08em; line-height: 1;
  color: #d9f024;
  -webkit-text-stroke: 1px #0d1117;
  text-shadow: 2px 2px 0 #0d1117, 0 0 18px rgba(217, 240, 36, .22);
}
.xat-intro__word span {
  display: inline-block; opacity: 0;
  transform: translateY(14px) scale(1.12);
  filter: blur(5px);
}
.xat-intro.go .xat-intro__word span {
  animation: xatRise .38s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(1.05s + var(--i) * 42ms);
}
.xat-intro--micro.go .xat-intro__word span { animation-delay: calc(.2s + var(--i) * 22ms); }
@keyframes xatRise { to { opacity: 1; transform: none; filter: blur(0); } }

/* --- RPM bar --------------------------------------------------------------- */
.xat-intro__rpm {
  margin: 14px auto 0; height: 4px; width: 74%;
  border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, .07);
}
.xat-intro__rpm i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #2ea86b 0%, #9fd23a 45%, #d9f024 70%, #f0a824 86%, #e5372e 97%);
  transform: scaleX(0); transform-origin: left center;
}
.xat-intro.go .xat-intro__rpm i {
  animation:
    xatRev .6s cubic-bezier(.65, 0, .35, 1) 1.15s forwards,
    xatRedline .14s steps(2, jump-none) 1.78s 3;
}
.xat-intro--micro.go .xat-intro__rpm i {
  animation: xatRev .4s cubic-bezier(.65, 0, .35, 1) .25s forwards;
}
@keyframes xatRev { to { transform: scaleX(1); } }
@keyframes xatRedline { 50% { filter: brightness(1.75); } }

/* --- launch exit ----------------------------------------------------------- */
.xat-intro.leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.xat-intro.leaving .xat-intro__lockup {
  transform: translateX(60vw) skewX(-16deg);
  opacity: 0;
  filter: blur(6px);
  transition:
    transform .62s cubic-bezier(.6, -0.1, .9, .4),
    opacity .5s ease .08s,
    filter .45s ease;
}

/* --- skip ------------------------------------------------------------------ */
.xat-intro__skip {
  position: absolute; top: 18px; right: 20px;
  background: none; border: 1px solid rgba(255, 255, 255, .18); border-radius: 4px;
  color: #8a939e; font: 600 11px/1 'Barlow', system-ui, sans-serif;
  letter-spacing: .22em; padding: 8px 12px; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.xat-intro__skip:hover { color: #d9f024; border-color: rgba(217, 240, 36, .5); }

@media (prefers-reduced-motion: reduce) { .xat-intro { display: none; } }