/* ============================================================
   Keaton Caldwell — Sound Design Portfolio
   Design tokens
   ============================================================ */
:root {
  --bg: #0a0a14;
  --bg-elevated: #12121f;
  --bg-elevated-2: #191929;
  --fg: #f4f4f7;
  --fg-muted: #a8a8c0;
  --fg-faint: #7d7d99;
  --accent: #ff6a2b;      /* warm signal orange — primary / P1 */
  --accent-dim: #ff6a2b26;
  --accent-2: #2be8d9;    /* signal cyan — secondary / P2 */
  --accent-2-dim: #2be8d926;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 28px;
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --font-display: "Press Start 2P", "Chakra Petch", monospace;
  --font-body: "Archivo", sans-serif;
  --font-ui: "Chakra Petch", "Space Mono", monospace;
  --font-mono: var(--font-ui);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  min-height: 100dvh;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -5%, var(--accent-dim), transparent 60%),
    radial-gradient(ellipse 800px 600px at 105% 15%, var(--accent-2-dim), transparent 60%);
  background-attachment: fixed;
}

/* Pages carrying .site-backdrop move the glow onto that layer instead, so it
   sits above the car rather than under it. */
body:has(.site-backdrop) { background-image: none; }

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* Press Start 2P is a pixel face: one em per character, glyphs filling the em
   box. It needs far more leading than a normal display font or lines collide,
   and every heading size is set well below a proportional font's equivalent to
   absorb the extra width. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 768px) {
  .container { padding: 0 40px; }
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 2px var(--accent-dim);
}

/* ============================================================
   Skip link / a11y
   ============================================================ */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #0a0a14;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 200;
  font-family: var(--font-mono);
  font-size: 14px;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Nav
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  transition: background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

@media (min-width: 768px) {
  .site-nav { padding: 22px 40px; }
}

.site-nav.is-scrolled {
  background: rgba(10, 10, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
}

.nav-mark .dot { color: var(--accent); }

.nav-links {
  display: none;
  align-items: center;
  gap: 36px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 860px) {
  .nav-links { display: flex; }
}

.nav-links a {
  position: relative;
  overflow: hidden;
  color: var(--fg-muted);
  padding: 6px 2px;
  transition: color var(--dur) var(--ease);
}

.nav-sprite {
  position: absolute;
  top: 50%;
  left: 0;
  height: 28px;
  width: auto;
  transform: translate(-110%, -50%);
  pointer-events: none;
  z-index: 1;
}

.nav-links a:hover .nav-sprite,
.mobile-menu a:hover .nav-sprite {
  animation: navSpriteWipe 950ms linear forwards;
}

@keyframes navSpriteWipe {
  from { transform: translate(-110%, -50%); }
  to { transform: translate(180%, -50%); }
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}

.nav-links a:hover,
.nav-links a.is-active {
  color: var(--fg);
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
  width: 100%;
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  color: var(--fg);
}

@media (min-width: 860px) {
  .nav-toggle { display: none; }
}

.nav-toggle svg { width: 18px; height: 18px; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 32px;
  gap: 28px;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), visibility 0s;
}

.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.mobile-menu a {
  position: relative;
  overflow: hidden;
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--fg-muted);
}

.mobile-menu a .nav-sprite { height: 44px; }

.mobile-menu a.is-active,
.mobile-menu a:hover { color: var(--fg); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  touch-action: manipulation;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: var(--fg-muted);
}

.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a14;
  font-weight: 600;
}

.btn-primary:hover {
  box-shadow: 0 8px 30px -6px var(--accent-dim);
  border-color: var(--accent);
  background: #ff7c45;
}

.btn svg { width: 14px; height: 14px; }

/* ============================================================
   Site backdrop — the car sits fixed behind the whole page.
   The opening scrub happens on this same layer; past the scrub it
   holds its last frame, blurred, and the content scrolls over it.
   ============================================================ */
.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #000;
}

.site-backdrop .seedance-video,
.backdrop-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scaled up only while blurred — blur pulls transparency in at the edges.
   During the sharp scrub the framing is left exactly as shot. */
.site-backdrop .seedance-video {
  transform: scale(calc(1 + var(--bd-zoom, 0)));
}

.backdrop-still { transform: scale(1.16); }

.site-backdrop .seedance-video {
  filter: blur(var(--bd-blur, 0px)) brightness(var(--bd-bright, 1));
  will-change: filter;
}

.backdrop-still {
  display: none;
  background: url("../assets/img/seedance-poster.jpg") center / cover no-repeat;
  filter: blur(18px) brightness(0.35);
}

.backdrop-glow {
  position: absolute;
  inset: 0;
  opacity: var(--bd-glow, 1);
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -5%, var(--accent-dim), transparent 60%),
    radial-gradient(ellipse 800px 600px at 105% 15%, var(--accent-2-dim), transparent 60%);
}

.backdrop-fade {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: var(--bd-fade, 0);
}

body:has(.site-backdrop) main,
body:has(.site-backdrop) .site-footer {
  position: relative;
  z-index: 1;
}

/* Phones never hold a blurred video behind the scroll — once the scrub is
   done the video is dropped for the pre-blurred poster. */
@media (max-width: 899px) {
  .site-backdrop .seedance-video { filter: none; }
  .site-backdrop.is-past .seedance-video { display: none; }
  .site-backdrop.is-past .backdrop-still { display: block; }
}

/* ============================================================
   Seedance — scroll-scrubbed opening sequence
   ============================================================ */
.seedance-wrap {
  position: relative;
  height: 280vh;
}

.seedance-pin {
  position: sticky;
  top: 0;
  height: 100dvh;
}

/* Doubles as the audio unlock: wheel events don't grant user activation, so
   without a real click the engine hit can never play. */
.seedance-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: 12px 18px;
  cursor: pointer;
  transition: opacity 300ms var(--ease), color 200ms var(--ease);
}

.seedance-scroll-cue span:first-child {
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.6;
}

.seedance-scroll-cue:hover { color: var(--accent); }
.seedance-scroll-cue:hover .bar { background: linear-gradient(to bottom, var(--accent), transparent); }

.seedance-scroll-cue .bar {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollpulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .seedance-wrap { height: 0; }
  .seedance-pin { display: none; }
  .site-backdrop .seedance-video { display: none; }
  .backdrop-still { display: block; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 120px 24px 80px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero { padding: 140px 40px 100px; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* The name is set to span the viewport exactly: Press Start 2P is monospaced
   at one em per character, so "KEATON CALDWELL" is exactly 15em and dividing
   the available width by that fills the line edge to edge at any screen size. */
.hero-title {
  --title-em: 15;
  font-size: calc((100vw - 56px) / var(--title-em));
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  margin: 16px 0 0;
}

@media (min-width: 768px) {
  .hero-title { font-size: calc((100vw - 88px) / var(--title-em)); }
}

.hero-title .ltr { display: inline-block; }

.hero-foot {
  display: grid;
  gap: 34px;
  margin-top: 44px;
  align-items: end;
}

@media (min-width: 900px) {
  .hero-foot { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
}

.hero-sub {
  color: var(--fg-muted);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 46ch;
  margin-bottom: 30px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  width: 100%;
  max-width: 300px;
  justify-self: end;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  mix-blend-mode: luminosity;
  opacity: 0.92;
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, var(--accent-2-dim), transparent 45%, var(--accent-dim));
  pointer-events: none;
}

.hero-visual .tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(10, 10, 20, 0.55);
  backdrop-filter: blur(6px);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 2;
}

.hero-scroll .bar {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollpulse 1.8s ease-in-out infinite;
}

@keyframes scrollpulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Headlight flicker — letters strike hot in accent orange, then cool to white,
   the way the Z's headlights come up in the intro. Two variants so the bulbs
   don't all behave identically; js/main.js deals them out at random. */
.hero-title .ltr { opacity: 0; }

.hero.is-lit .ltr {
  animation: headlightOn 780ms linear forwards;
}

.hero.is-lit .ltr.flick {
  animation-name: headlightStutter;
  animation-duration: 940ms;
}

@keyframes headlightOn {
  0% { opacity: 0; color: var(--accent); text-shadow: none; }
  10% { opacity: 1; color: var(--accent); text-shadow: 0 0 34px var(--accent); }
  20% { opacity: 0.1; }
  30% { opacity: 1; color: var(--accent); text-shadow: 0 0 44px var(--accent); }
  55% { opacity: 1; color: #ffb089; text-shadow: 0 0 20px var(--accent-dim); }
  100% { opacity: 1; color: var(--fg); text-shadow: none; }
}

@keyframes headlightStutter {
  0% { opacity: 0; color: var(--accent); text-shadow: none; }
  8% { opacity: 1; color: var(--accent); text-shadow: 0 0 34px var(--accent); }
  14% { opacity: 0.08; }
  22% { opacity: 1; color: var(--accent); text-shadow: 0 0 30px var(--accent); }
  30% { opacity: 0.15; }
  40% { opacity: 1; color: var(--accent); text-shadow: 0 0 48px var(--accent); }
  48% { opacity: 0.35; }
  60% { opacity: 1; color: #ffb089; text-shadow: 0 0 22px var(--accent-dim); }
  100% { opacity: 1; color: var(--fg); text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .ltr { opacity: 1; animation: none !important; }
}

/* ============================================================
   Sections
   ============================================================ */
.section {
  position: relative;
  padding: 90px 0;
  z-index: 1;
}

@media (min-width: 768px) {
  .section { padding: 130px 0; }
}

.section-head {
  margin-bottom: 48px;
  max-width: 60ch;
}

.section-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin-top: 14px;
}

.section-head p {
  color: var(--fg-muted);
  margin-top: 16px;
  font-size: 1.05rem;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Work cards (home teaser)
   ============================================================ */
.work-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 760px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}

.work-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  padding: 32px;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  cursor: pointer;
}

.work-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }

.work-card .work-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.work-card .work-media img,
.work-card .work-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: opacity var(--dur-slow) var(--ease), transform 6s linear;
}

.work-card:hover .work-media img,
.work-card:hover .work-media video {
  opacity: 0.8;
  transform: scale(1.04);
}

.work-card .work-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, var(--bg-elevated) 95%);
}

.work-card.card-cycle .work-media::after {
  background: linear-gradient(180deg, rgba(10,10,20,0.15) 0%, var(--bg-elevated) 92%);
}

.work-card-body { position: relative; z-index: 1; }

.work-card .eyebrow { margin-bottom: 14px; }

.work-card h3 {
  font-size: 1.7rem;
  margin-bottom: 10px;
}

.work-card p {
  color: var(--fg-muted);
  font-size: 0.98rem;
  max-width: 34ch;
}

.work-card .go {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}

.work-card .go svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease);
}

.work-card:hover .go svg { transform: translateX(4px); }

/* ============================================================
   About teaser (home)
   ============================================================ */
.about-teaser {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 860px) {
  .about-teaser { grid-template-columns: 0.8fr 1.2fr; }
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 32px;
}

@media (min-width: 500px) {
  .stat-row { grid-template-columns: repeat(4, 1fr); }
}

.stat {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.stat .num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent-2);
}

.stat .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: 4px;
}

/* ============================================================
   Reel grid
   ============================================================ */
.reel-grid {
  display: grid;
  gap: 28px;
}

@media (min-width: 760px) {
  .reel-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1080px) {
  .reel-grid { grid-template-columns: repeat(3, 1fr); }
}

.reel-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.reel-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }

.reel-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.reel-media video,
.reel-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 20, 0.25);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background var(--dur) var(--ease);
}

.reel-play:hover { background: rgba(10, 10, 20, 0.4); }

.reel-play .play-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(244, 244, 247, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.reel-play:hover .play-btn {
  transform: scale(1.08);
  background: var(--accent);
}

.reel-play .play-btn svg {
  width: 20px;
  height: 20px;
  color: #0a0a14;
  margin-left: 2px;
}

.reel-play.is-hidden { opacity: 0; pointer-events: none; }

.reel-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: rgba(10, 10, 20, 0.7);
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 2;
}

.reel-body { padding: 22px 24px 26px; }

.reel-body h3 { font-size: 1.25rem; margin-bottom: 8px; }

.reel-body p {
  color: var(--fg-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.reel-tags {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.reel-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-2);
  border: 1px solid var(--accent-2-dim);
  background: var(--accent-2-dim);
  padding: 4px 9px;
  border-radius: 100px;
}

/* ============================================================
   Game page
   ============================================================ */
.game-hero {
  padding-top: 150px;
}

.game-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 36px;
}

.pill {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pill.p1 { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-dim); }
.pill.p2 { color: var(--accent-2); border-color: var(--accent-2-dim); background: var(--accent-2-dim); }

.game-stage {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.game-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.game-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background:
    radial-gradient(circle at 30% 20%, var(--accent-dim), transparent 55%),
    radial-gradient(circle at 75% 80%, var(--accent-2-dim), transparent 55%),
    #05050a;
  cursor: pointer;
  border: none;
  width: 100%;
  padding: 24px;
  text-align: center;
}

.game-poster .grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 75%);
  opacity: 0.6;
}

.game-poster .play-btn-lg {
  position: relative;
  z-index: 2;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow: 0 0 0 0 var(--accent-dim);
}

.game-poster:hover .play-btn-lg {
  transform: scale(1.08);
  box-shadow: 0 0 0 16px var(--accent-dim);
}

.game-poster .play-btn-lg svg { width: 26px; height: 26px; color: #0a0a14; margin-left: 3px; }

.game-poster .play-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.game-poster .play-label strong { color: var(--fg); }

.loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #05050a;
}

.loading-overlay.is-hidden { display: none; }

.loading-bar {
  width: 220px;
  height: 3px;
  border-radius: 100px;
  background: var(--bg-elevated-2);
  overflow: hidden;
}

.loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 150ms linear;
}

.loading-overlay .loading-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.game-controls-hint {
  display: flex;
  justify-content: center;
  gap: 10px;
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(10, 10, 20, 0.6);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.icon-btn:hover { background: rgba(255,255,255,0.1); border-color: var(--fg-muted); }
.icon-btn svg { width: 17px; height: 17px; }

.controls-panel {
  margin-top: 40px;
  display: grid;
  gap: 20px;
}

@media (min-width: 700px) {
  .controls-panel { grid-template-columns: repeat(2, 1fr); }
}

.control-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
  background: var(--bg-elevated);
}

.control-card.p1 { border-color: var(--accent-dim); }
.control-card.p2 { border-color: var(--accent-2-dim); }

.control-card h4 {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.control-card.p1 h4 { color: var(--accent); }
.control-card.p2 h4 { color: var(--accent-2); }

.keys {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.key {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
}

.perf-note {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--fg-muted);
  font-size: 0.9rem;
  border-left: 2px solid var(--border-strong);
  padding-left: 16px;
}

.perf-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--accent-2); }

/* ============================================================
   About page
   ============================================================ */
.about-hero {
  padding-top: 150px;
  display: grid;
  gap: 40px;
}

@media (min-width: 860px) {
  .about-hero { grid-template-columns: 1fr 1.3fr; align-items: start; }
}

.about-portrait {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 5;
  position: relative;
}

.about-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.about-portrait::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, var(--accent-2-dim), transparent 50%, var(--accent-dim));
}

.bio-text p { margin-bottom: 18px; color: var(--fg-muted); font-size: 1.05rem; }
.bio-text p strong { color: var(--fg); font-weight: 600; }

.interest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 20px;
}

@media (min-width: 500px) {
  .interest-grid { grid-template-columns: repeat(4, 1fr); }
}

.interest-chip {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.interest-chip svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

.gallery-grid {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

@media (min-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
  position: relative;
}

.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }

.gallery-item .cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.edu-card {
  margin-top: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 30px;
  background: var(--bg-elevated);
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.edu-card svg { width: 26px; height: 26px; color: var(--accent-2); flex-shrink: 0; margin-top: 3px; }
.edu-card h4 { font-size: 1.1rem; margin-bottom: 6px; }
.edu-card p { color: var(--fg-muted); font-size: 0.95rem; }

.pull-quote { margin: 16px 0 26px; }

.pull-quote p {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}

.pull-quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 44px 0 36px;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

@media (min-width: 700px) {
  .footer-inner { flex-direction: row; align-items: center; }
}

.footer-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}

.footer-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
  letter-spacing: 0.03em;
}

/* ============================================================
   Retro / pixel personality layer
   ============================================================ */
:root {
  --font-pixel: "Press Start 2P", var(--font-mono);
}

::selection {
  background: var(--accent);
  color: #0a0a14;
}

html {
  scrollbar-color: var(--accent) var(--bg);
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border: 2px solid var(--bg);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }

:focus-visible {
  outline: 2px dashed var(--accent-2);
  outline-offset: 4px;
  border-radius: 0;
}

.eyebrow.has-index::before { display: none; }

.eyebrow .idx {
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1;
  color: var(--accent-2);
  background: var(--accent-2-dim);
  border: 1px solid var(--accent-2-dim);
  padding: 5px 7px 4px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.pill, .reel-duration, .key, .hero-scroll span, .reel-tag {
  font-family: var(--font-pixel);
  letter-spacing: 0.01em;
}

.pill { font-size: 10.5px; padding: 10px 16px 8px; }
.reel-duration { font-size: 10px; padding: 5px 8px 4px; }
.key { font-size: 11px; }
.key svg { width: 15px; height: 15px; }
.reel-tag { font-size: 9px; padding: 5px 9px 4px; }
.hero-scroll span:first-child { font-size: 9px; }

.loading-bar {
  height: 14px;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.loading-bar-fill {
  border-radius: 0;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0px 8px,
    var(--accent-2) 8px 10px
  );
}

.loading-overlay .loading-label {
  font-family: var(--font-pixel);
  font-size: 10px;
  animation: pixelBlink 1.1s steps(2, jump-none) infinite;
}

.game-poster .play-label {
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.8;
}

@keyframes pixelBlink {
  50% { opacity: 0.35; }
}

/* Corner-bracket "frame" reveal on hover — a stand-in for future pixel-sprite treatments */
.pixel-frame { position: relative; }

.pixel-frame::before,
.pixel-frame::after {
  content: "";
  position: absolute;
  z-index: 5;
  width: 24px;
  height: 24px;
  top: 8px;
  left: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  background-image:
    linear-gradient(to right, var(--accent-2) 3px, transparent 3px),
    linear-gradient(to bottom, var(--accent-2) 3px, transparent 3px);
  background-repeat: no-repeat;
  background-size: 100% 3px, 3px 100%;
  filter: drop-shadow(0 0 4px var(--accent-2));
}

.pixel-frame::after {
  top: auto;
  left: auto;
  bottom: 8px;
  right: 8px;
  transform: rotate(180deg);
}

.pixel-frame:hover::before,
.pixel-frame:hover::after {
  opacity: 1;
}

/* Custom pixel cursor (desktop, fine-pointer only — see js/main.js) */
.pixel-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--accent);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 140ms var(--ease), height 140ms var(--ease), background 140ms var(--ease);
  will-change: transform;
}

.pixel-cursor.is-active {
  width: 20px;
  height: 20px;
  background: var(--accent-2);
}

.pixel-cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border: 1px solid var(--accent-2);
  opacity: 0.55;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  will-change: transform;
}

html.has-pixel-cursor,
html.has-pixel-cursor * {
  cursor: none !important;
}

/* ============================================================
   Video lightbox (reel)
   ============================================================ */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 10, 0.94);
  opacity: 0;
  visibility: hidden;
  padding: 40px;
  transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow) var(--ease);
}

.video-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-inner {
  width: min(92vw, 1500px);
  max-height: 88vh;
}

.lightbox-inner video {
  display: block;
  width: 100%;
  max-height: 88vh;
  border-radius: var(--radius);
  background: #000;
  box-shadow: var(--shadow);
}

.lightbox-caption {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.lightbox-close {
  position: fixed;
  top: 26px;
  right: 30px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9001;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.lightbox-close svg { width: 18px; height: 18px; }
.lightbox-close:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--fg-muted); }

/* ============================================================
   Page transition — lightcycle duel wipe
   Two walls (P1 orange, P2 cyan) race in from opposite edges,
   collide center-screen with a spark, then peel back outward
   to reveal the next page.
   ============================================================ */
#page-transition {
  position: fixed;
  inset: 0;
  z-index: 100000;
  visibility: hidden;
  pointer-events: none;
}

.pt-wall {
  position: fixed;
  top: 0;
  height: 100%;
  width: 51%;
  transform: scaleX(0);
}

.pt-wall.pt-p1 { left: 0; transform-origin: left; background: var(--accent); }
.pt-wall.pt-p2 { right: 0; transform-origin: right; background: var(--accent-2); }

.pt-spark {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
}

html.pt-visible #page-transition { visibility: visible; }

html.pt-covered .pt-wall { transform: scaleX(1); }

html.pt-anim .pt-wall {
  transition: transform 450ms cubic-bezier(0.65, 0, 0.35, 1);
}

html.pt-spark-flash .pt-spark {
  animation: ptSpark 380ms ease-out forwards;
}

@keyframes ptSpark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.8); box-shadow: 0 0 46px 12px var(--fg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); box-shadow: 0 0 0 0 transparent; }
}

/* ============================================================
   Type + layout pass — the display font is a single-weight pixel face,
   so hierarchy comes from size, casing and rules rather than weight.
   ============================================================ */
.nav-mark,
.mobile-menu a,
.footer-mark,
.stat .num {
  font-weight: 400;
  letter-spacing: 0;
}

.nav-mark { font-size: 11px; text-transform: uppercase; line-height: 1.4; }

.nav-links {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  gap: 30px;
}

.btn {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1.6;
  border-radius: 4px;
  min-height: 48px;
}

.btn-primary { font-weight: 400; }

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.2em;
}

.work-card .go,
.control-card h4,
.stat .label,
.interest-chip,
.lightbox-caption,
.gallery-item .cap,
.footer-note {
  font-family: var(--font-ui);
  font-weight: 600;
}

.hero-title,
.pull-quote p,
.section-head h2 { text-transform: uppercase; }

.hero-sub { max-width: 42ch; line-height: 1.7; }

.pull-quote p {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(0.95rem, 2.1vw, 1.5rem);
  line-height: 1.7;
}

/* Section headers: ghost index numeral + gradient rule */
.section-head {
  position: relative;
  max-width: 62ch;
}

.section-head h2 {
  font-size: clamp(0.9rem, 1.9vw, 1.35rem);
  line-height: 1.75;
}

.section-head p { max-width: 60ch; }

.section-head::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.section-head.is-centered {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head.is-centered .eyebrow { justify-content: center; }
.section-head.is-centered p { margin-left: auto; margin-right: auto; }
.section-head.is-centered::after { margin-left: auto; margin-right: auto; }

/* Centered page intro used by reel + game */
.page-intro {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.pill svg { width: 15px; height: 15px; flex-shrink: 0; }
.pill { line-height: 1.3; }

.page-intro .eyebrow { justify-content: center; }

.page-intro h1 {
  text-transform: uppercase;
  font-size: clamp(1.1rem, 3.2vw, 2.1rem);
  line-height: 1.6;
  margin: 20px 0 22px;
}

.page-intro p {
  color: var(--fg-muted);
  margin: 0 auto;
  max-width: 58ch;
}

.page-intro .game-meta-row,
.page-intro .hero-cta { justify-content: center; }

.measure { max-width: 66ch; }

/* Bento work grid — unequal columns break the two-identical-boxes look */
@media (min-width: 760px) {
  .work-grid { grid-template-columns: 1.32fr 0.68fr; }
  .work-grid .work-card:first-child { min-height: 420px; }
  .work-grid .work-card:last-child { min-height: 420px; }
}

.work-card { border-radius: var(--radius); }
.work-card h3 { font-size: clamp(0.85rem, 1.5vw, 1.15rem); line-height: 1.7; text-transform: uppercase; margin-bottom: 14px; }
.work-card p { max-width: 42ch; font-size: 1rem; }

.work-card:hover {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2-dim), 0 24px 60px -30px var(--accent-2);
}

/* Featured reel card spans the row and splits media / copy */
.reel-card { border-radius: var(--radius); }
.reel-body h3 { font-size: 0.8rem; text-transform: uppercase; line-height: 1.7; margin-bottom: 12px; }
.reel-body p { font-size: 0.95rem; line-height: 1.65; }

@media (min-width: 760px) {
  .reel-card.is-featured { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .reel-grid { grid-template-columns: repeat(2, 1fr); }
  .reel-card.is-featured {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    align-items: stretch;
  }
  .reel-card.is-featured .reel-media { aspect-ratio: auto; height: 100%; min-height: 340px; }
  .reel-card.is-featured .reel-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 40px;
  }
  .reel-card.is-featured .reel-body h3 { font-size: 1.05rem; }
  .reel-card.is-featured .reel-body p { font-size: 1.02rem; }
}

@media (min-width: 1080px) {
  .reel-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Stats read as cards, not a bare border-top row */
.stat {
  border-top: 2px solid var(--accent-dim);
  border-left: 1px solid var(--border);
  background: var(--bg-elevated);
  padding: 16px 16px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.stat .num { font-size: 0.85rem; line-height: 1.6; text-transform: uppercase; }
.stat .label { font-size: 11px; line-height: 1.45; letter-spacing: 0.08em; }

.bio-text p { line-height: 1.75; max-width: 64ch; }
.edu-card h4 { text-transform: uppercase; font-size: 0.72rem; line-height: 1.75; letter-spacing: 0; margin-bottom: 10px; }
.control-card h4 { letter-spacing: 0.14em; }
.interest-chip { min-height: 52px; font-size: 13px; letter-spacing: 0.04em; }

.footer-inner { align-items: center; }
.footer-mark { font-size: 10px; line-height: 1.6; text-transform: uppercase; }
.footer-note { font-size: 12.5px; letter-spacing: 0.06em; }

@media (max-width: 699px) {
  .footer-inner { align-items: flex-start; }
}

.mobile-menu a { font-size: clamp(16px, 5vw, 24px); line-height: 1.6; text-transform: uppercase; }

@media (max-width: 899px) {
  .hero-scroll { display: none; }
  .nav-mark { font-size: 9px; }
}

/* ============================================================
   Utility
   ============================================================ */
.text-center { text-align: center; }
.mt-lg { margin-top: 48px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}