/* Section styles: challenge: night track + speed-streak stage "challenge-streak".
   Unlayered, so it overrides css/base.css. Every selector is scoped under [data-section="challenge"]. */

[data-section="challenge"] .challenge__top { position: relative; z-index: 2; }
[data-section="challenge"] .challenge__head { margin-bottom: 0; }

/* ------------------------------------------------------------------ the band: full bleed, fades into the page */
[data-section="challenge"] .challenge__scene {
  --track-pos: 74% 52%;
  position: relative; z-index: 0; overflow: hidden;
  width: 100%; aspect-ratio: 1 / 1.08;
  margin-top: calc(-1 * clamp(8px, 3vw, 56px));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 72%, transparent 100%);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
@media (min-width: 640px) {
  [data-section="challenge"] .challenge__scene { --track-pos: 64% 52%; aspect-ratio: auto; height: max(340px, min(56.25vw, 86svh)); }
}
@media (min-width: 1024px) {
  [data-section="challenge"] .challenge__scene { --track-pos: 50% 52%; margin-top: calc(-1 * clamp(40px, 6vw, 110px)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  [data-section="challenge"] .challenge__scene { --track-pos: 56% 50%; height: max(300px, 92svh); }
}

/* the parallax layer is taller than the band so it can drift without showing an edge */
[data-section="challenge"] .challenge__plx { position: absolute; left: 0; right: 0; top: -9%; bottom: -9%; will-change: transform; }
[data-section="challenge"] .challenge__track {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--track-pos); pointer-events: none; -webkit-user-drag: none;
}
[data-section="challenge"] .challenge__stage { position: absolute; inset: 0; }

/* CSS stand-in for the streak when 3D is off (no WebGL, low tier): a soft red flare on the tail-light bar that
   stretches with scroll speed. Placed by JS; hidden once the WebGL stage is live and under reduced motion. */
[data-section="challenge"] .challenge__flare {
  position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 110, 90, .8) 0%, rgba(255, 45, 35, .45) 22%, rgba(217, 28, 28, .14) 48%, rgba(217, 28, 28, 0) 72%);
  mix-blend-mode: screen; transform-origin: 50% 50%; transition: opacity .5s var(--ease-out);
}
[data-section="challenge"] .challenge__flare.is-placed { opacity: var(--flare-o, .55); transition: none; }
[data-section="challenge"] .challenge__stage.is-live ~ .challenge__flare { opacity: 0 !important; }

[data-section="challenge"] .challenge__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 95% at 60% 50%, rgba(5, 5, 5, 0) 45%, rgba(5, 5, 5, .6) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, .35) 0%, rgba(5, 5, 5, 0) 30%, rgba(5, 5, 5, 0) 70%, rgba(5, 5, 5, .5) 100%);
}
/* the lights come on as the band scrolls in (opacity tween from JS; no-JS and reduced motion: never dark) */
[data-section="challenge"] .challenge__dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }

/* hint chip (only when the band reacts to press-and-hold) */
[data-section="challenge"] .challenge__hint {
  position: absolute; z-index: 2; right: var(--safe-r); top: clamp(56px, 12%, 128px);
  display: none; align-items: center; gap: 10px; margin: 0; padding: 9px 12px;
  background: rgba(11, 11, 12, .92); border: 1px solid var(--line-2); border-radius: var(--radius);
  font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
  transition: opacity .4s var(--ease-out);
}
[data-section="challenge"] .challenge__scene.is-interactive .challenge__hint { display: inline-flex; }
[data-section="challenge"] .challenge__scene.is-revving .challenge__hint { opacity: .35; }
[data-section="challenge"] .challenge__hint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blood-hot); box-shadow: 0 0 0 0 rgba(255, 59, 48, .6); animation: challenge-ping 1.8s var(--ease-out) infinite; }
[data-section="challenge"] .challenge__hint-touch { display: none; }
html[data-pointer="coarse"] [data-section="challenge"] .challenge__hint-fine { display: none; }
html[data-pointer="coarse"] [data-section="challenge"] .challenge__hint-touch { display: inline; }
@keyframes challenge-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 59, 48, 0); } }
[data-section="challenge"] .challenge__scene.is-interactive { cursor: grab; touch-action: pan-y; }
[data-section="challenge"] .challenge__scene.is-revving { cursor: grabbing; }

/* ------------------------------------------------------------------ copy plate + victory photo over the band's foot */
[data-section="challenge"] .challenge__body {
  position: relative; z-index: 2; display: grid; gap: clamp(16px, 2.4vw, 32px);
  margin-top: calc(-1 * clamp(64px, 16vw, 132px));
}
[data-section="challenge"] .challenge__copy { display: grid; gap: 16px; max-width: 46rem; }
[data-section="challenge"] .challenge__copy .lead { max-width: 34ch; }
[data-section="challenge"] .challenge__photo { border: 1px solid var(--line); }
@media (min-width: 640px) and (max-width: 1023.98px) {
  [data-section="challenge"] .challenge__copy { max-width: 34rem; }
}
@media (min-width: 1024px) {
  [data-section="challenge"] .challenge__body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start;
    margin-top: calc(-1 * clamp(150px, 15vw, 260px));
  }
  [data-section="challenge"] .challenge__photo { margin-top: clamp(120px, 12vw, 220px); }
}
@media (orientation: landscape) and (max-height: 520px) {
  [data-section="challenge"] .challenge__body { margin-top: -72px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  [data-section="challenge"] .challenge__photo { margin-top: 48px; }
}

/* ------------------------------------------------------------------ reduced motion: static still, no hint, no flare */
[data-motion="reduced"] [data-section="challenge"] .challenge__flare,
[data-motion="reduced"] [data-section="challenge"] .challenge__hint { display: none !important; }