/* Motion system: page transitions, rev line, kinetic type, grid roll-in, pit-wall telemetry, parallax, tilt,
   the pit-stop add-to-bag, the sound toggle. Everything here is switched off under prefers-reduced-motion. */

/* ---------- page transitions (same-origin navigations, Chrome/Edge/Safari 18.2+) ---------- */
@view-transition { navigation: auto; }
.strip { view-transition-name: sp-strip; }
.head { view-transition-name: sp-head; }
.bag { view-transition-name: none; }
::view-transition-old(root) { animation: vt-out .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .46s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-2.5%) skewX(2deg); filter: blur(5px); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(3.5%) skewX(-2deg); filter: blur(8px); } }
::view-transition-group(sp-product) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); z-index: 5; }
::view-transition-old(sp-product), ::view-transition-new(sp-product) { mix-blend-mode: normal; height: 100%; object-fit: contain; }

/* ---------- rev line: page progress as a tachometer under the header ---------- */
.revline { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--rev, 0)); background: linear-gradient(90deg, var(--blue-2), #19b36b 50%, #f2b01e 72%, var(--orange) 84%, var(--red)); background-size: calc(100vw) 100%; }
.revline.redline { animation: redline .18s steps(2) infinite; }
@keyframes redline { 50% { filter: brightness(1.8); } }
.revline.shift { background: #3a7bff; box-shadow: 0 0 14px #3a7bff; }

/* ---------- kinetic type: headlines arrive like a car passing ---------- */
.kin { clip-path: polygon(-8% -25%, -8% -25%, -18% 125%, -18% 125%); transform: translateX(-26px) skewX(-12deg); transition: clip-path .9s var(--ease-out), transform .9s var(--ease-out); will-change: clip-path, transform; }
.kin.in { clip-path: polygon(-8% -25%, 118% -25%, 108% 125%, -18% 125%); transform: none; }
.kicker.kin::before { transition: transform 1s var(--ease-out); transform: translateX(-30px); }
.kicker.kin.in::before { transform: none; }

/* ---------- the grid: cars roll into their slots, the track skews with scroll speed ---------- */
.grid-sec .slot { translate: -110px 0; opacity: 0; filter: blur(4px); transition: translate .9s var(--ease-out), opacity .6s var(--ease), filter .7s var(--ease-out), transform var(--dur) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.grid-sec.in .slot { translate: 0 0; opacity: 1; filter: none; }
.track__inner { transform: skewX(calc(var(--skew, 0) * 1deg)); }
.slot__img img { transition: opacity .45s var(--ease), transform .45s var(--ease-out); }

/* ---------- pit wall telemetry ---------- */
.scope { --mx: 60%; --my: 55%; }
.scope::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 260px at var(--mx) var(--my), rgba(58, 123, 255, .22), transparent 70%); pointer-events: none; }
.scope::after { content: ''; position: absolute; top: 0; bottom: 0; width: 22%; left: -25%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(226, 6, 19, .16), rgba(255, 255, 255, .22), transparent); transform: skewX(-14deg); opacity: 0; }
.scope.scan::after { animation: scan .75s var(--ease-out); }
@keyframes scan { 0% { left: -25%; opacity: 1; } 100% { left: 110%; opacity: 0; } }
.led.roll { animation: ledroll .38s var(--ease-out); }
@keyframes ledroll { 0% { transform: translateY(-38%); opacity: 0; filter: blur(3px); } 100% { transform: none; opacity: 1; filter: none; } }
.pin.on .pin__tag { transition-delay: calc(var(--pi, 0) * 55ms); }

/* ---------- parallax + tilt ---------- */
.hero__media, .band__img, .livery__media, .cover__img { translate: 0 var(--py, 0px); will-change: translate; }
.hero__inner { opacity: var(--fade, 1); translate: 0 var(--lift, 0px); }
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-out); }
.tilt:hover { transition-duration: .12s; }
.btn.mag { translate: var(--bx, 0px) var(--by, 0px); }

/* ---------- pit-stop add to bag ---------- */
.flyer { position: fixed; z-index: 120; pointer-events: none; border-radius: 12px; object-fit: contain; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.iconbtn.gun svg { animation: gunspin .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes gunspin { to { transform: rotate(720deg); } }
.bag__bar i.unlocked { animation: purple 1.2s var(--ease-out); }
@keyframes purple { 0%, 60% { background: #b04cff; box-shadow: 0 0 16px #b04cff; } }

/* ---------- chequered flag on the confirmation ---------- */
.done .flagcheck { animation: wave 1.6s ease-in-out 2; transform-origin: 20% 50%; }
@keyframes wave { 0%, 100% { transform: rotate(0) skewY(0); } 25% { transform: rotate(-6deg) skewY(4deg); } 75% { transform: rotate(5deg) skewY(-3deg); } }

/* ---------- autoplay video ---------- */
video[data-autoplay] { background: #0a0c14; }
.vid-wrap { position: relative; }
.vid-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.vid-wrap video.playing { opacity: 1; }

/* ---------- sound toggle: a four-bar meter that dances when sound is on ---------- */
.soundbtn .eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.soundbtn .eq i { width: 3px; height: 4px; border-radius: 1px; background: currentColor; opacity: .7; transition: height .3s var(--ease); }
.sound-on .soundbtn .eq i { opacity: 1; background: var(--orange); animation: eq .9s ease-in-out infinite; }
.sound-on .soundbtn .eq i:nth-child(2) { animation-delay: -.3s; } .sound-on .soundbtn .eq i:nth-child(3) { animation-delay: -.6s; } .sound-on .soundbtn .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 15px; } }
.soundbtn .eq::after { content: ''; }
.soundhint { position: absolute; top: calc(100% + 8px); right: 0; white-space: nowrap; background: #fff; color: var(--ink); font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 8px 10px; border-radius: 8px; box-shadow: var(--shadow); opacity: 0; transform: translateY(-4px); transition: all .3s var(--ease); pointer-events: none; }
.soundbtn:hover .soundhint, .soundbtn:focus-visible .soundhint { opacity: 1; transform: none; }
.hero__lights { cursor: pointer; border: 0; }
.hero__lights:hover i:not(.on) { background: #4a0000; }
.hero__lights:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .kin, .grid-sec .slot { clip-path: none !important; transform: none !important; translate: none !important; opacity: 1 !important; filter: none !important; }
  .hero__media, .band__img, .livery__media, .cover__img, .hero__inner { translate: none !important; opacity: 1 !important; }
  .tilt { transform: none !important; }
}

/* ---------- lights out: the headline launches (transform only, so the first paint and LCP are untouched) ---------- */
.hero.go h1 { animation: launch .75s var(--ease-out) both; }
.hero.go .lede { animation: launch .75s .08s var(--ease-out) both; }
.hero.go .hero__cta { animation: launch .75s .16s var(--ease-out) both; }
@keyframes launch { 0% { transform: translateX(-34px) skewX(-14deg); filter: blur(3px); } 60% { transform: translateX(6px) skewX(3deg); filter: none; } 100% { transform: none; } }
.hero.go .hero__lights i { transition: background .05s; }
@media (prefers-reduced-motion: reduce) { .hero.go h1, .hero.go .lede, .hero.go .hero__cta { animation: none; } }