/* 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 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 art used by the playable demo */
.px { shape-rendering: crispEdges; display: block }

/* 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 colour 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 colours 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, .pong { display: none }
  .band span, .band-x span { transform: none }
}