/* The cover of the game: the opening of the intro film in a browser. Every element sits in its
   final state; the keyframes only say where it comes from, so without motion the page is whole. */

@font-face { font-family: Anton; src: url(/fonts/Anton-Regular.ttf); font-display: swap; }
@font-face { font-family: Barlow; src: url(/fonts/BarlowSemiCondensed-Regular.ttf); font-display: swap; }
@font-face { font-family: Barlow; font-weight: 600; src: url(/fonts/BarlowSemiCondensed-SemiBold.ttf); font-display: swap; }

:root {
  --night: #121214; --panel: #1d1e23; --line: #6c707c; --text: #f3e7c9; --soft: #b3ab99;
  --red: #e2412d; --yellow: #f6b931; --on-yellow: #141416;
  --beat: .833s;
  --sun: min(92vw, 46svh);
}

* { box-sizing: border-box; }
html { background: var(--night); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--night); color: var(--text); font: 400 18px/1.4 Barlow, system-ui, sans-serif; overflow-x: clip; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: var(--yellow); }

/* ---- cars ---- */
.car { position: relative; width: 100%; aspect-ratio: 1024 / 358; }
.car img { display: block; width: 100%; height: 100%; }
.wheel { position: absolute; aspect-ratio: 1; border-radius: 50%; background-color: #17171a; background-repeat: no-repeat; animation: spin .24s linear infinite; }
.wheel::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: .45; transform: rotate(14deg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- the sun of the brand ---- */
.sun {
  aspect-ratio: 1; border-radius: 50%; background:
    linear-gradient(transparent 62%, var(--night) 62%, var(--night) 67.5%, transparent 67.5%, transparent 76%, var(--night) 76%, var(--night) 81.5%, transparent 81.5%),
    var(--red);
}

/* ---- hero ---- */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }

.hero-sun {
  position: absolute; width: var(--sun); left: 50%; top: 6svh; margin-left: calc(var(--sun) / -2);
  animation: sun-rise .75s cubic-bezier(.16, 1, .3, 1) 2.05s backwards, sun-beat var(--beat) ease-out 2.9s infinite;
}
@keyframes sun-rise { from { transform: scale(.05); } }
@keyframes sun-beat { 0% { transform: scale(1.025); } 100% { transform: scale(1); } }

.lights {
  position: absolute; left: 50%; top: calc(6svh + var(--sun) / 2); display: flex; gap: 18px; padding: 16px 22px;
  background: #050506; transform: translate(-50%, -50%); opacity: 0; animation: housing 2.05s linear;
}
.lights i { width: min(11vw, 54px); aspect-ratio: 1; border-radius: 50%; background: #2a1512; animation: light-on 1.8s steps(1); }
.lights i:nth-child(1) { animation-delay: .25s; }
.lights i:nth-child(2) { animation-delay: .8s; animation-duration: 1.25s; }
.lights i:nth-child(3) { animation-delay: 1.35s; animation-duration: .7s; }
@keyframes housing { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes light-on { 0%, 100% { background: var(--red); box-shadow: 0 0 34px 8px rgba(226, 65, 45, .75); } }

.flash { position: absolute; inset: 0; background: var(--text); opacity: 0; pointer-events: none; animation: flash .4s ease-out 2.05s; }
@keyframes flash { 0% { opacity: .55; } 100% { opacity: 0; } }

.road {
  position: absolute; left: 0; right: 0; bottom: 0; height: 19svh; background:
    repeating-linear-gradient(90deg, var(--yellow) 0 90px, transparent 90px 190px) 0 62% / 190px 6px repeat-x,
    var(--panel);
  border-top: 3px solid #000;
  animation: road-run .22s linear infinite;
}
@keyframes road-run { to { background-position: -190px 62%, 0 0; } }

.streaks i { position: absolute; left: 100%; height: 3px; width: 34vw; background: linear-gradient(90deg, transparent, var(--yellow)); opacity: 0; animation: streak .7s linear infinite; }
.streaks i:nth-child(2n) { background: linear-gradient(90deg, transparent, var(--red)); }
.streaks i:nth-child(1) { top: 58%; animation-delay: 2.5s; }
.streaks i:nth-child(2) { top: 66%; animation-delay: 2.72s; width: 22vw; }
.streaks i:nth-child(3) { top: 71%; animation-delay: 2.95s; }
.streaks i:nth-child(4) { top: 62%; animation-delay: 3.2s; width: 46vw; }
.streaks i:nth-child(5) { top: 75%; animation-delay: 3.4s; width: 18vw; }
.streaks i:nth-child(6) { top: 54%; animation-delay: 3.05s; width: 26vw; }
@keyframes streak { 0% { transform: translateX(0); opacity: .85; } 100% { transform: translateX(-190vw); opacity: .85; } }

.hero-car {
  position: absolute; width: min(100vw, 760px); left: 50%; margin-left: calc(min(100vw, 760px) / -2); bottom: 9svh;
  animation: car-in .95s cubic-bezier(.12, .9, .25, 1.04) 2.3s backwards;
}
.hero-car .car { animation: idle .14s linear infinite alternate; }
@keyframes car-in { from { transform: translateX(-150vw) skewX(-14deg); } }
@keyframes idle { to { transform: translateY(1.5px); } }

.headline { position: absolute; left: 0; right: 0; top: calc(6svh + var(--sun) * .9); padding: 0 16px; text-align: center; }
h1 { font: 400 clamp(48px, 17vw, 92px)/1.02 Anton, Impact, sans-serif; text-transform: uppercase; text-shadow: 0 4px 0 #000; }
.word-1, .word-2 { display: inline-block; animation: slam .42s cubic-bezier(.2, 1.3, .4, 1) 2.2s backwards; }
.word-2 { color: var(--yellow); animation-delay: 2.42s; }
@keyframes slam { from { opacity: 0; transform: scale(2.1); } }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin-top: 10px; }
.chips li {
  background: var(--yellow); color: var(--on-yellow); font: 400 clamp(19px, 5.5vw, 28px)/1.3 Anton, Impact, sans-serif; text-transform: uppercase;
  padding: 2px 12px; transform: skewX(-9deg); box-shadow: 4px 4px 0 #000; animation: chip .32s cubic-bezier(.2, 1.2, .4, 1) 2.75s backwards;
}
.chips li:nth-child(2) { animation-delay: 2.93s; }
.chips li:nth-child(3) { animation-delay: 3.11s; }
@keyframes chip { from { opacity: 0; transform: translateX(70vw) skewX(-9deg); } }

.scroll-cue {
  position: absolute; left: 50%; bottom: 14px; width: 18px; height: 18px; margin-left: -9px;
  border: solid var(--text); border-width: 0 4px 4px 0; transform: rotate(45deg);
  animation: cue-in .4s 3.6s backwards, cue var(--beat) ease-in-out 3.6s infinite alternate;
}
@keyframes cue-in { from { opacity: 0; } }
@keyframes cue { to { translate: 0 7px; } }

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  :root { --sun: min(44vw, 70svh); }
  .hero-sun { left: 69%; top: 5svh; }
  .lights { left: 69%; top: calc(5svh + var(--sun) / 2); }
  .headline { top: 14svh; left: 6vw; right: auto; width: 46vw; padding: 0; text-align: left; }
  h1 { font-size: min(17svh, 11vw); line-height: 1.04; }
  h1 span { display: block; }
  .chips { justify-content: flex-start; margin-top: 14px; }
  .chips li { font-size: min(4.2svh, 2.5vw); }
  .hero-car { width: 52vw; left: 69%; margin-left: -26vw; bottom: 8svh; }
}

/* ---- the panorama of the store, driven by the scroll ---- */
.pano { position: relative; }
.pano-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.pano-img { display: block; height: 100svh; width: auto; max-width: none; will-change: transform; }
.pano-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0, 0, 0, .55); }
.pano-bar i { display: block; height: 100%; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(0); }
.no-pan .pano-stage { overflow-x: auto; }

/* ---- JDM, muscle, European ---- */
.band { position: relative; height: 170svh; }
.band-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.band.jdm { background: #b8261c; }
.band.muscle { background: #1f4fb0; }
.band.euro { background: #1f6b44; }
.band-sun { position: absolute; width: min(120vw, 95svh); aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, .22); }
.band-word {
  position: relative; font: 400 min(32vw, 46svh)/1 Anton, Impact, sans-serif; text-transform: uppercase; white-space: nowrap;
  color: var(--text); text-shadow: 0 8px 0 rgba(0, 0, 0, .35); will-change: transform;
}
.band-car { position: absolute; width: min(118vw, 112svh); top: 56%; left: 50%; margin-left: calc(min(118vw, 112svh) / -2); will-change: transform; }
.band-car .wheel { animation: none; transform: rotate(var(--spin, 0deg)); }

/* ---- are you ready? ---- */
.ready { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3svh; padding: 8svh 20px; overflow: hidden; text-align: center; }
.orbit { --size: min(84vw, 54svh); position: relative; width: var(--size); height: var(--size); flex: none; }
.ready-sun { position: absolute; inset: 0; animation: sun-beat var(--beat) ease-out infinite; }
.trace {
  position: absolute; inset: 9%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(10, 10, 12, 0) 0deg, rgba(10, 10, 12, 0) 110deg, rgba(10, 10, 12, .85) 358deg, rgba(10, 10, 12, 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 81%, #000 99%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 80%, #000 81%, #000 99%, transparent 100%);
  animation: orbit calc(var(--beat) * 4) linear infinite;
}
.drifter { position: absolute; inset: 9%; animation: orbit calc(var(--beat) * 4) linear infinite; }
.drifter img { position: absolute; top: -5.5%; left: 50%; width: 15%; margin-left: -7.5%; transform: rotate(128deg); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .5)); }
@keyframes orbit { to { transform: rotate(360deg); } }

.ready h2 { font: 400 min(23vw, 15svh)/1.06 Anton, Impact, sans-serif; text-transform: uppercase; text-shadow: 0 5px 0 #000; }
.ready h2 span { display: inline-block; }
.ready-1 { color: var(--yellow); }
.ready.in .ready-1 { animation: slam .42s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.ready.in .ready-2 { animation: slam .42s cubic-bezier(.2, 1.3, .4, 1) .22s backwards; }
.soon { font-weight: 600; font-size: clamp(20px, 3svh, 28px); letter-spacing: .02em; }
.ready.in .soon { animation: rise .5s ease-out .55s backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ---- footer ---- */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; padding: 22px 20px 30px; background: var(--panel); border-top: 3px solid #000; color: var(--soft); font-size: 17px; }
.foot-name { font: 400 22px/1 Anton, Impact, sans-serif; text-transform: uppercase; color: var(--text); }
.foot a { min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .streaks { display: none; }
}