/* The page's own pieces. Tailwind does the rest. */
:root { --cut: 7vw }
html { background: #14060c }
html, body { overflow-x: clip }
html.lenis, html.lenis body { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto !important }

/* The type: Big Shoulders, tall and condensed like a marquee or a sports print */
.wide { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.005em; line-height: .84 }
.wide-light { font-family: 'Big Shoulders Display', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; line-height: .9 }
.label { font-family: 'Martian Mono', monospace; font-stretch: 87.5%; font-size: 11px; letter-spacing: .14em; text-transform: uppercase }

/* Angled seams: every section after the first leans into the one above it */
.seam { position: relative; margin-top: calc(var(--cut) * -1); padding-top: var(--cut) }
.seam-l { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%) }
.seam-r { clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%) }
/* A film runs right up into the angle: no padding above its stage */
.scrub.seam { padding-top: 0 }

/* Scroll driven film: the section is tall, the stage sticks, createScrub draws the film behind it */
.scrub { position: relative }
.scrub-stage { position: sticky; top: 0; height: 100svh; overflow: hidden }

/* The story: two columns of facts that roll up like credits over the film, one each side.
   Each is a flat, square slab of color, tipped a few degrees, throwing a long hard extrusion off the
   edge of the screen in a deeper shade of itself: the 80s poster, not the app card. */
.credits { position: absolute; z-index: 2; top: 0; width: min(27rem, 38vw); display: flex; flex-direction: column; gap: 30vh; visibility: hidden; will-change: transform }
.credits-l { left: clamp(28px, 6vw, 110px) }
.credits-r { right: clamp(28px, 6vw, 110px) }
.credit { --face: #e655d0; --deep: #8e2479; --x: -1400px; --y: 1300px; position: relative; padding: 2.1rem 2.2rem 2.5rem; color: #f7f1e6; transform: rotate(-3deg) }
/* The face is a layer of its own: a transformed card is its own stacking context, so its background would sit under the extrusion */
.credit::after { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--face) }
.credit::before { content: ''; position: absolute; z-index: -1; top: 0; left: var(--x); width: calc(100% - var(--x)); height: calc(100% + var(--y)); background: var(--deep);
  clip-path: polygon(calc(0px - var(--x)) 0, 0 var(--y), calc(100% + var(--x)) 100%, 100% calc(100% - var(--y))) }
.credits-r .credit { --x: 1400px; transform: rotate(3deg) }
.credits-r .credit::before { left: auto; right: calc(0px - var(--x)); width: calc(100% + var(--x));
  clip-path: polygon(calc(100% - var(--x)) 0, 100% var(--y), var(--x) 100%, 0 calc(100% - var(--y))) }
.credit h3 { color: var(--deep) }
.credit-top { font-family: 'Martian Mono', monospace; font-stretch: 87.5%; font-size: 11px; letter-spacing: .14em; color: var(--deep) }
.credits-l .credit:nth-child(2) { --face: #1f5fe0; --deep: #062a7a }
.credits-l .credit:nth-child(3) { --face: #ff5a26; --deep: #9c2a08 }
.credits-r .credit:nth-child(1) { --face: #ff5a26; --deep: #9c2a08 }
.credits-r .credit:nth-child(3) { --face: #1f5fe0; --deep: #062a7a }
/* The wipe: three angled stripes; script cuts the stage away behind them, uncovering the next section */
.wipe { position: absolute; inset: 0; z-index: 3; pointer-events: none }
.wipe span { position: absolute; inset: 0; clip-path: polygon(0 0, 0 0, 0 0, 0 0) }
#story { z-index: 2 }
.under-wipe { position: relative; z-index: 1; margin-top: -170vh }
.under-wipe ~ section { z-index: 2 }
@media (max-width: 767px) {
  .credits { width: auto; left: 22px; right: 22px; gap: 60vh }
  .credit { padding: 1.4rem 1.4rem 1.6rem; --x: -260px; --y: 240px }
  .credits-r .credit { --x: 260px }
}

/* The colors: five columns of the same console, alternate ones flying in from above and below */
.lineup { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: clamp(10px, 2.4vw, 40px); padding: 4vh clamp(20px, 4vw, 64px) 14vh; height: 88vh; min-height: 460px }
.lineup-col { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; will-change: transform }
.lineup-col img { width: 100%; max-height: 54vh; object-fit: contain; filter: drop-shadow(0 34px 40px rgba(0,0,0,.5)) }
.lineup-col figcaption { color: rgba(247,241,230,.6) }

/* The feel steps, switched by the film's progress */
.step { opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .5s }
.step.on { opacity: 1; transform: none }

.stripes { background: repeating-linear-gradient(180deg, currentColor 0 6px, transparent 6px 14px) }

.rule { height: 1px; background: currentColor; opacity: .25 }

.btn { display: inline-flex; align-items: center; gap: .75rem; border-radius: 999px; padding: 1.05rem 1.6rem; font-weight: 600; transition: transform .25s, background .25s, color .25s }
.btn:hover { transform: translateY(-2px) }
.btn .arrow { transition: transform .25s }
.btn:hover .arrow { transform: translateX(4px) }

/* Arcade layer: pixel sprites that fly with the scroll, and the player's ship */
.px { shape-rendering: crispEdges; display: block }
.sprites { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden }
.sprite { position: absolute; left: 0; top: 0; color: #f7f1e6; filter: drop-shadow(3px 3px 0 rgba(20,6,12,.28)); will-change: transform; pointer-events: auto; cursor: crosshair }
.ship { position: fixed; left: 0; bottom: 22px; z-index: 41; color: #f7f1e6; pointer-events: none; filter: drop-shadow(3px 3px 0 rgba(20,6,12,.35)); will-change: transform; transition: opacity .4s }
.bullet { position: fixed; left: 0; top: 0; z-index: 41; width: 4px; height: 14px; background: #c8f400; box-shadow: 0 0 10px #c8f400; pointer-events: none }
body.gaming .ship, body.gaming .bullet, body.gaming .sprites { display: none }

/* The screen switching on, once, as the page opens */
.crt-on { position: fixed; inset: 0; z-index: 100; background: #000; pointer-events: none; animation: crt-bg .45s .55s forwards }
.crt-on::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 2px; background: #fff; box-shadow: 0 0 24px 4px #fff; transform: translate(-50%, -50%); animation: crt-line .95s cubic-bezier(.6,0,.2,1) forwards }
@keyframes crt-line { 0% { width: 0; height: 2px } 35% { width: 100%; height: 2px; opacity: 1 } 70% { width: 100%; height: 100%; opacity: .7 } 100% { width: 100%; height: 100%; opacity: 0 } }
@keyframes crt-bg { to { opacity: 0; visibility: hidden } }

/* Faint tube scanlines over the hero film */
.scanlines { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(4,10,60,.35) 100%) }

/* Pong, over the feel section */
.pong { position: absolute; inset: 0; pointer-events: none; opacity: 0 }
.pong i { position: absolute; left: 0; top: 0; display: block; background: #c8f400; box-shadow: 0 0 18px rgba(200,244,0,.75), 0 0 2px #c8f400; will-change: transform }
.pong-paddle { width: 14px; height: 96px }
.pong-ball { width: 16px; height: 16px }
.pong .pong-net { left: 50%; width: 4px; height: 100%; background: repeating-linear-gradient(180deg, rgba(200,244,0,.45) 0 16px, transparent 16px 32px); box-shadow: none }

/* The CRT: a dark set with a curved, glowing glass */
.crt { position: relative; z-index: 1; padding: clamp(14px, 1.6vw, 26px); border-radius: 34px; background: linear-gradient(160deg, #2a1220, #12050b 60%); box-shadow: 0 40px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08) }
.crt-glass { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 9% / 12%; background: radial-gradient(ellipse at center, #1b0a3a 0%, #08030f 75%); box-shadow: inset 0 0 70px rgba(0,0,0,.9), 0 0 60px rgba(240,16,115,.18); cursor: crosshair; touch-action: pan-y }
.crt-glass canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated }
.crt-lines { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.10), transparent 40%), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.6) 100%);
  animation: crt-flicker 5s infinite steps(1) }
@keyframes crt-flicker { 0%, 100% { opacity: 1 } 47% { opacity: .9 } 48% { opacity: 1 } }
.crt-led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c8f400; box-shadow: 0 0 10px #c8f400 }

/* The tri color band: three stripes that rise as their section arrives */
.band { position: absolute; z-index: 0; right: 3vw; bottom: -8vh; height: 130vh; display: flex; transform: skewX(18deg); transform-origin: bottom right }
.band span { display: block; width: clamp(28px, 4.4vw, 76px); height: 100%; transform-origin: bottom; transform: scaleY(var(--g, 0)) }
.band.band-wide span { width: clamp(44px, 7vw, 120px) }
/* The same three colors as a racing stripe across the footer */
/* A phone: the stripes lean in from the edge, and behind the CRT they rise only as far as the set */
@media (max-width: 767px) {
  .band { right: -16vw }
  .band.band-crt { bottom: auto; top: -6vh; height: 62vh; right: -6vw }
  .pong .pong-net { display: none }
}
.band-x { display: flex; flex-direction: column; gap: 0 }
.band-x span { display: block; height: clamp(10px, 1.4vw, 22px); transform-origin: left; transform: scaleX(var(--g, 0)) }

.blink { animation: blink 1.1s steps(1) infinite }
@keyframes blink { 50% { opacity: 0 } }

.game-screen { image-rendering: pixelated; width: 100%; aspect-ratio: 16 / 10; display: block; background: #14060c; border-radius: 14px; cursor: crosshair; outline: none }

@media (prefers-reduced-motion: reduce) {
  .step { transition: none }
  .blink { animation: none }
  .crt-on, .sprites, .ship, .pong { display: none }
  .credits { visibility: visible }
  .lineup-col { transform: none !important }
  .band span, .band-x span { transform: none }
}