/* ============================================================
   CINEMATIC PAGE-TRANSITION LOADER  —  "Lights Out, Launch".
   ------------------------------------------------------------
   Shown ONLY on navigation (Landing → ARDC / SMSP, ARDC ⇄ SMSP).
   A premium racing car idles on the grid, builds power as the
   percentage climbs, then launches off the line and carries the
   user into the destination page.

   This is NOT the first-load track loader (.rloader) — that one
   is untouched. Pure transforms + opacity for 60fps; filters are
   brief and ramped. GSAP drives the timeline; CSS owns the loops.

   Theming:  .warp[data-theme="ardc"] → blue   accent
             .warp[data-theme="smp"]  → red    accent
   ============================================================ */

.warp {
  /* accent (bright) + soft (deep glow) rgb triplets, per theme.
     The source car PNG is RED — ARDC rotates its red livery to blue,
     SMSP keeps it red (see --car-hue per theme). */
  --accent: 96, 124, 255;
  --soft: 0, 55, 230;
  --car-hue: 214deg; /* ardc: red livery → ARDC blue */

  position: fixed;
  inset: 0;
  z-index: 100001; /* above .rloader (100000) + masthead/menus */
  background: #04050a;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
  contain: strict;
}
.warp.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.26s ease;
}

.warp[data-theme="smp"] {
  --accent: 255, 66, 66;
  --soft: 216, 13, 13;
  --car-hue: 0deg; /* smp: the livery is already red — leave it true */
}

/* camera-shake target — wraps the whole scene so the "camera"
   trembles as one. Shake is applied via phase classes below. */
.warp__cam {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* ---- environment: subtle blueprint grid + soft radial glow ---- */
.warp__grid {
  position: absolute;
  inset: -2%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(125% 125% at 50% 56%, #000 26%, transparent 76%);
  mask-image: radial-gradient(125% 125% at 50% 56%, #000 26%, transparent 76%);
  opacity: 0.5;
}
.warp__glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 90vw;
  max-width: 1200px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--soft), 0.22), transparent 62%);
  filter: blur(46px);
  opacity: 0.42;
  animation: warp-breathe 4.4s ease-in-out infinite;
}
.warp.is-accel .warp__glow,
.warp.is-launch .warp__glow {
  opacity: 0.82;
}

/* a soft horizon line the car launches along */
.warp__horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent), 0.32) 22%, rgba(var(--accent), 0.32) 78%, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.warp.is-creep .warp__horizon,
.warp.is-accel .warp__horizon,
.warp.is-launch .warp__horizon {
  opacity: 1;
}

/* ---- speed lines (streak backward as the car gathers pace) ---- */
.warp__lines {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.warp.is-accel .warp__lines {
  opacity: 0.7;
}
.warp.is-launch .warp__lines {
  opacity: 1;
}
.warp__line {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent), 0.85), rgba(255, 255, 255, 0.65));
  transform: translateX(115vw);
  will-change: transform;
}
.warp.is-accel .warp__line,
.warp.is-launch .warp__line {
  animation: warp-streak var(--dur, 0.5s) linear var(--delay, 0s) infinite;
}

/* ---- the stage that holds the car ---- */
.warp__stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
  transform: translateY(-50%);
  height: 1px; /* anchor only; children overflow */
}

/* car-wrap: GSAP owns its x / scaleX / blur (the drive + launch).
   Sits slightly left of centre on the grid. */
.warp__car-wrap {
  position: absolute;
  left: 8vw;
  top: 0;
  width: clamp(360px, 44vw, 760px);
  transform: translateY(-50%);
  will-change: transform, filter;
}
.warp__car {
  display: block;
  width: 100%;
  height: auto;
  filter: hue-rotate(var(--car-hue))
    drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 22px rgba(var(--soft), 0.18));
  /* idle: engine vibration — tiny, fast, never cartoonish */
  animation: warp-idle 0.11s linear infinite;
}
.warp.is-launch .warp__car {
  animation: none; /* clean smear during the launch */
}

/* headlight bloom at the nose (right) */
.warp__head {
  position: absolute;
  right: -3%;
  top: 40%;
  width: 26%;
  height: 30%;
  background: radial-gradient(ellipse at left center, rgba(255, 255, 255, 0.9), rgba(var(--accent), 0.4) 40%, transparent 72%);
  filter: blur(6px);
  opacity: 0.5;
  transform: translateZ(0);
  pointer-events: none;
}
.warp.is-accel .warp__head,
.warp.is-launch .warp__head {
  opacity: 0.95;
}

/* light trail / motion streak — a comet smear that rides BEHIND the car so
   speed reads at full throttle while the car itself stays perfectly sharp.
   The blur lives here, never on the car image. */
.warp__trail {
  position: absolute;
  right: 56%;
  top: 50%;
  width: 130%;
  height: 9%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--soft), 0.4) 45%, rgba(var(--accent), 0.85) 80%, rgba(255, 255, 255, 0.85) 100%);
  filter: blur(6px);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.warp.is-accel .warp__trail {
  opacity: 0.55;
  transform: translateY(-50%) scaleX(0.55);
}
.warp.is-launch .warp__trail {
  opacity: 1;
  transform: translateY(-50%) scaleX(1.35);
}

/* taillight + exhaust glow at the tail (left) */
.warp__exhaust {
  position: absolute;
  left: -7%;
  top: 46%;
  width: 22%;
  height: 26%;
  background: radial-gradient(ellipse at right center, rgba(var(--accent), 0.95), rgba(var(--soft), 0.55) 38%, transparent 74%);
  filter: blur(7px);
  opacity: 0.4;
  transform-origin: right center;
  animation: warp-ember 1.15s ease-in-out infinite;
  pointer-events: none;
}
.warp.is-accel .warp__exhaust,
.warp.is-launch .warp__exhaust {
  animation: warp-flame 0.12s linear infinite;
}

/* a brief exhaust flame tongue, only while accelerating/launching */
.warp__flame {
  position: absolute;
  left: -11%;
  top: 50%;
  width: 14%;
  height: 12%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  background: linear-gradient(90deg, transparent, rgba(var(--accent), 0.55) 30%, #fff 100%);
  filter: blur(2px);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.warp.is-accel .warp__flame,
.warp.is-launch .warp__flame {
  animation: warp-flicker 0.09s linear infinite;
}

/* spinning-rim cue — a translucent conic streak laid over each wheel.
   Low opacity so slight alignment drift on the PNG is forgiving. */
.warp__wheel {
  position: absolute;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0.22) 24deg,
    rgba(255, 255, 255, 0) 60deg,
    rgba(255, 255, 255, 0.18) 150deg,
    rgba(255, 255, 255, 0) 210deg,
    rgba(255, 255, 255, 0.22) 300deg,
    rgba(255, 255, 255, 0) 340deg
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
  pointer-events: none;
}
.warp.is-creep .warp__wheel,
.warp.is-accel .warp__wheel,
.warp.is-launch .warp__wheel {
  opacity: 0.55;
}
/* wheel footprint on this car PNG (≈4.57:1) — bottom-anchored so the
   discs sit over the tyres regardless of the rendered car height. */
.warp__wheel {
  bottom: 4%;
  width: 13%;
  aspect-ratio: 1;
}
.warp__wheel.is-rear { left: 7.5%; }
.warp__wheel.is-front { left: 76.5%; }

/* sparks kicking off the rear under load */
.warp__sparks {
  position: absolute;
  left: 2%;
  top: 70%;
  width: 30%;
  height: 18%;
  opacity: 0;
  pointer-events: none;
}
.warp.is-accel .warp__sparks,
.warp.is-launch .warp__sparks {
  opacity: 1;
}
.warp__spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px 1px rgba(var(--accent), 0.95);
  opacity: 0;
  animation: warp-spark 0.42s linear var(--sd, 0s) infinite;
}

/* ---- HUD: the percentage readout (race-control style) ---- */
.warp__hud {
  position: absolute;
  left: 50%;
  top: 39%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}
.warp__pct {
  margin: 0;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(64px, 9vw, 90px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px rgba(var(--accent), 0.45);
}
.warp__label {
  display: block;
  margin-top: 0.7rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
  text-indent: 0.5em; /* optical centring against the letter-spacing */
}
.warp__bar {
  width: clamp(150px, 16vw, 220px);
  height: 2px;
  margin: 1rem auto 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.warp__bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, rgba(var(--soft), 1), rgba(var(--accent), 1));
  box-shadow: 0 0 12px rgba(var(--accent), 0.75);
}

/* ---- phase-driven camera shake ---- */
.warp.is-accel .warp__cam {
  animation: warp-shake 0.09s steps(2, end) infinite;
}
.warp.is-launch .warp__cam {
  animation: warp-shake-hard 0.07s steps(2, end) infinite;
}

/* ============================ keyframes ============================ */
@keyframes warp-breathe {
  0%, 100% { opacity: 0.34; }
  50% { opacity: 0.6; }
}
@keyframes warp-idle {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(0.4px, -0.5px) rotate(0.12deg); }
  50% { transform: translate(-0.3px, 0.4px) rotate(-0.1deg); }
  75% { transform: translate(0.3px, 0.3px) rotate(0.08deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes warp-ember {
  0%, 100% { opacity: 0.32; transform: scaleX(0.9); }
  50% { opacity: 0.6; transform: scaleX(1.08); }
}
@keyframes warp-flame {
  0%, 100% { opacity: 0.8; transform: scaleX(1.1); }
  50% { opacity: 1; transform: scaleX(1.35); }
}
@keyframes warp-flicker {
  0% { opacity: 0.7; transform: translateY(-50%) scaleX(0.7); }
  50% { opacity: 1; transform: translateY(-50%) scaleX(1.25); }
  100% { opacity: 0.6; transform: translateY(-50%) scaleX(0.85); }
}
@keyframes warp-streak {
  0% { transform: translateX(115vw); }
  100% { transform: translateX(-45vw); }
}
@keyframes warp-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate(-26px, 8px) scale(0.3); }
}
@keyframes warp-shake {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-0.6px, 0.5px); }
  100% { transform: translate(0.5px, -0.4px); }
}
@keyframes warp-shake-hard {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-1.3px, 1px); }
  100% { transform: translate(1.1px, -0.9px); }
}

/* ---- reduced motion: no theatrics, just a quick branded wipe ---- */
@media (prefers-reduced-motion: reduce) {
  .warp__car { animation: none; }
  .warp__cam { animation: none !important; }
  .warp__line, .warp__exhaust, .warp__flame, .warp__spark, .warp__glow { animation: none !important; }
}