/* ============================================================
   erikmadsen.com — main stylesheet
   Design spec v2 Rev A (stage-light motion revisit)
   Palette: void / beam / starburst / cobalt / stage-wash
   Type: Bebas Neue (display) + Outfit (body) — self-hosted
   Thesis: the site is a lighting rig; the visitor is side-stage.
   Photos are the band. The light moves. Nothing else does.
   ============================================================ */

/* --- 0. Custom Properties (Tokens) --- */
:root {
  /* Primary palette */
  --void: #0a0e17;
  --beam: #edebe6;
  --starburst: #d4963a;
  --cobalt: #4d8ed8;
  --stage-wash: #c4234a;

  /* Extended neutrals */
  --void-raised: #111827;
  --void-mid: #1f2937;
  --smoke: #9ca3af;
  --dim: #6b7280;

  /* Spacing scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;
  --space-10: 160px;

  /* Grandfathered v1 eases */
  --ease-primary: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-secondary: cubic-bezier(0.22, 1, 0.36, 1);

  /* Cue grammar (spec §5.0) — the four rig tokens */
  --ease-attack: cubic-bezier(0.25, 0, 0.15, 1);  /* light snaps ON  */
  --ease-decay: cubic-bezier(0.33, 0, 0.20, 1);   /* light fades OFF */
  --cue-travel: cubic-bezier(0.45, 0, 0.25, 1);   /* beam movement   */
  --cue-attack: 140ms cubic-bezier(0.25, 0, 0.15, 1);
  --cue-decay: 800ms cubic-bezier(0.33, 0, 0.20, 1);
  --blackout: 90ms linear;                         /* house out      */

  /* Hero scroll (set by JS) */
  --hero-scroll: 0;
}

/* --- 0.5 Self-hosted fonts (spec §3) --- */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bebas-neue-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bebas-neue-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 1. Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* No CSS smooth-scroll: the blackout cut (§5.5) owns all anchor
     navigation and requires instant jumps while the house is out. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.1vw + 0.5rem, 1.125rem);
  line-height: 1.65;
  color: var(--beam);
  background-color: var(--void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

/* --- 2. Container --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

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

@media (min-width: 1024px) {
  .container {
    padding-left: 64px;
    padding-right: 64px;
  }
}

/* --- 3. Typography --- */
.font-display {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
}

.eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--starburst);
}

.caption {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
  line-height: 1.5;
  color: var(--smoke);
}

/* --- 4. Navigation --- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 60px;
  display: flex;
  align-items: center;
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}

.site-nav.scrolled {
  background: rgba(10, 14, 23, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--void-mid);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 768px) {
  .nav-inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1024px) {
  .nav-inner {
    padding-left: 64px;
    padding-right: 64px;
  }
}

.nav-wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--beam);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* Pilot jewel (§5.7, R6): the rig is on */
.pilot-jewel {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stage-wash);
  box-shadow: 0 0 8px rgba(196, 35, 74, 0.55);
  margin-right: 10px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .pilot-jewel {
    animation: jewelPulse 4s ease-in-out infinite;
  }
}

@keyframes jewelPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-5);
}

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

.nav-links a {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smoke);
  position: relative;
  padding: 4px 0;
  transition: color 0.3s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--starburst);
  transition: width 0.3s var(--ease-primary);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--beam);
}

.nav-links a.active {
  color: var(--beam);
}

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

/* Hamburger (mobile only) */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px 8px;
  cursor: pointer;
}

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

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--beam);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-hamburger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(10, 14, 23, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.nav-overlay.open {
  opacity: 1;
  visibility: visible;
}

.nav-overlay a {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.02em;
  color: var(--beam);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.nav-overlay a:hover,
.nav-overlay a:focus-visible {
  color: var(--starburst);
}

/* Focus ring for keyboard nav */
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--cobalt);
  border-radius: 2px;
}

/* Programmatic focus targets for the blackout cut (§5.5) */
[tabindex="-1"]:focus {
  outline: none;
}

/* --- 5. Section Base + Zone Tints (§2 retune) --- */
section,
footer {
  position: relative;
}

@media (min-width: 1024px) {
  section {
    min-height: 80vh;
  }
  .gear-section,
  .contact-footer {
    min-height: 0;
  }
}

/* Color zones — static grading ("lit darkness"), opacities per §2 */
.zone-amber {
  background: radial-gradient(ellipse at center, rgba(212, 150, 58, 0.14) 0%, transparent 70%);
}

.zone-cobalt {
  background: radial-gradient(ellipse 90% 80% at 30% 40%, rgba(77, 142, 216, 0.12) 0%, transparent 70%);
}

.zone-warm {
  background: radial-gradient(ellipse 90% 80% at 60% 30%, rgba(212, 150, 58, 0.11) 0%, transparent 70%);
}

/* Magenta zone lights WITH the gallery cue (§5.4): 0 → 0.10 over 600ms */
.zone-magenta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 40%, rgba(196, 35, 74, 0.10) 0%, transparent 72%);
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .js .zone-magenta::before {
    opacity: 0;
    transition: opacity 600ms var(--ease-decay);
  }

  .js .zone-magenta.cued::before {
    opacity: 1;
  }
}

.zone-cobalt-light {
  background: radial-gradient(ellipse at 50% 70%, rgba(77, 142, 216, 0.09) 0%, transparent 70%);
}

/* Vignette (§4.3 retune): edge alpha 0.28, ellipse 135% 100% */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  background: radial-gradient(ellipse 135% 100% at 50% 45%, transparent 55%, rgba(3, 5, 10, 0.28) 100%);
}

/* --- 6. Hero Section --- */
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hero-image-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  will-change: transform;
}

.hero-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(transparent 0%, var(--void) 100%);
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-9);
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 768px) {
  .hero-content {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1024px) {
  .hero-content {
    padding-left: 64px;
    padding-right: 64px;
  }
}

.hero-name {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--beam);
  position: relative;
}

.hero-name .mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.hero-name .word {
  display: inline-block;
}

/* Light sweep across the name (§6 retune: peak α 0.50, 800ms, 1.9s delay).
   Softness from gradient stops — no blur on an animated element (§8). */
.hero-name .light-sweep {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(240, 236, 226, 0.5) 50%, transparent 66%);
  mix-blend-mode: screen;
  transform: translateX(-130%);
  opacity: 0;
}

.hero-subtitle {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: var(--space-3);
}

/* Anamorphic cobalt flare (§6 keep, retimed) — final state fully drawn */
.hero-flare {
  width: min(380px, 42vw);
  height: 1px;
  margin-top: var(--space-4);
  background: linear-gradient(90deg, rgba(77, 142, 216, 0.95), rgba(77, 142, 216, 0));
  box-shadow: 0 0 14px rgba(77, 142, 216, 0.65), 0 0 40px rgba(77, 142, 216, 0.25);
  transform: scaleX(1);
  transform-origin: left center;
}

.hero-scroll-indicator {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--smoke);
  opacity: 0.5;
}

.hero-scroll-indicator .chevron {
  width: 20px;
  height: 20px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* --- 6.1 EVENT: House to stage (§5.1) — followspot open --- */
/* One div: 320vw × 120vh scrim with a transparent radial hole at its
   center. Hole center starts at x=−22vw, y=42vh; travels 79vw. */
.house-scrim {
  display: none;
  position: absolute;
  top: -18vh;
  left: -182vw;
  width: 320vw;
  height: 120vh;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse 46vw 62vh at 50% 50%, rgba(4, 6, 11, 0) 55%, rgba(4, 6, 11, 0.82) 78%);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: no-preference) {
  .intro .house-scrim {
    display: block;
    animation: spotTravel 1350ms var(--cue-travel) 250ms forwards,
               scrimOff 180ms var(--ease-attack) 1600ms forwards;
  }

  /* Word rise, retimed: after the followspot lands (§6) */
  .intro .hero-name .word {
    transform: translateY(112%);
    animation: wordRise 650ms var(--ease-attack) forwards;
  }

  .intro .hero-name .mask:nth-child(1) .word { animation-delay: 1.65s; }
  .intro .hero-name .mask:nth-child(2) .word { animation-delay: 1.79s; }

  .intro .hero-name .light-sweep {
    opacity: 1;
    animation: lightSweep 800ms ease-in-out 1.9s forwards;
  }

  .intro .hero-subtitle {
    opacity: 0;
    transform: translateY(12px);
    animation: heroTextIn 300ms var(--ease-attack) 2s forwards;
  }

  .intro .hero-flare {
    transform: scaleX(0);
    animation: flareGrow 1000ms var(--ease-primary) 2.1s forwards;
  }

  .intro .hero-scroll-indicator {
    opacity: 0;
    animation: heroScrollIn 300ms var(--ease-attack) 2.4s forwards;
  }
}

/* Mobile followspot (§5.1): hole 70vw × 55vh, travel −25vw → 50vw, 1100ms */
@media (max-width: 767px) {
  .house-scrim {
    left: -185vw;
    background: radial-gradient(ellipse 70vw 55vh at 50% 50%, rgba(4, 6, 11, 0) 55%, rgba(4, 6, 11, 0.82) 78%);
  }

  @media (prefers-reduced-motion: no-preference) {
    .intro .house-scrim {
      animation: spotTravelMobile 1100ms var(--cue-travel) 250ms forwards,
                 scrimOff 180ms var(--ease-attack) 1600ms forwards;
    }
  }
}

@keyframes spotTravel {
  from { transform: translateX(0); }
  to { transform: translateX(79vw); }
}

@keyframes spotTravelMobile {
  from { transform: translateX(0); }
  to { transform: translateX(75vw); }
}

@keyframes scrimOff {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

@keyframes wordRise {
  to { transform: translateY(0); }
}

@keyframes lightSweep {
  0% { transform: translateX(-130%); opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

@keyframes heroTextIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flareGrow {
  to { transform: scaleX(1); }
}

@keyframes heroScrollIn {
  to { opacity: 0.5; }
}

/* --- 6.2 EVENT: Starburst bloom (§5.2) — persistent hero life --- */
/* Anchored by JS cover-crop math to the photo's own PAR-can flare
   (38% x / 27% y of the 2048×1416 natural frame). */
.bloom {
  position: absolute;
  left: var(--bloom-x, 38%);
  top: var(--bloom-y, 27%);
  translate: -50% -50%;
  width: 220px;
  height: 220px;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.7;
  /* Core: 90px diameter, sampled from the flare (--bloom-core, §2) */
  background: radial-gradient(circle 45px at 50% 50%, rgba(255, 214, 140, 0.9) 0%, rgba(255, 178, 64, 0.35) 55%, transparent 100%);
  will-change: transform, opacity;
}

/* Rays: two crossed lines, 1px × 220px and 1px × 160px at 0°/90° */
.bloom::before,
.bloom::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
}

.bloom::before {
  width: 220px;
  height: 1px;
  margin-left: -110px;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 140, 0.9) 50%, transparent);
}

.bloom::after {
  width: 1px;
  height: 160px;
  margin-top: -80px;
  background: linear-gradient(180deg, transparent, rgba(255, 214, 140, 0.9) 50%, transparent);
}

.bloom.bloom-off {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .bloom {
    animation: bloomBreathe 3.2s ease-in-out infinite;
  }

  /* Intro: pop at 1600ms (scale 0.4 → 1.12 → 1.0 over 450ms), then breathe */
  .intro .bloom {
    opacity: 0;
    animation: bloomPop 450ms var(--ease-primary) 1.6s both,
               bloomBreathe 3.2s ease-in-out 2.05s infinite;
  }

  /* Standby: paused when hero <25% in viewport or tab hidden (§5.2) */
  .hero.bloom-standby .bloom,
  .page-hidden .bloom {
    animation-play-state: paused;
  }
}

@keyframes bloomPop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.12); opacity: 0.85; }
  100% { transform: scale(1); opacity: 0.7; }
}

@keyframes bloomBreathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  25% { transform: scale(1.06); opacity: 0.85; }
  75% { transform: scale(0.94); opacity: 0.55; }
}

/* --- 6.3 EVENT: Idle beam pass (§5.3) — hero standby --- */
/* 18vw × 160vh moving-head pass every 9s, first pass at t=8s.
   Travel occupies 0% → 17.8% of the 9s period (1600ms). */
.idle-beam {
  display: none;
  position: absolute;
  top: -30vh;
  left: 0;
  width: 18vw;
  height: 160vh;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(240, 236, 226, 0.2) 50%, transparent);
  mix-blend-mode: screen;
  transform: translateX(-30vw) rotate(-16deg);
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .js .idle-beam {
    display: block;
    animation: idleBeamPass 9s linear 8s infinite;
  }

  .hero.beam-standby .idle-beam,
  .page-hidden .idle-beam {
    animation-play-state: paused;
  }
}

@keyframes idleBeamPass {
  0% {
    transform: translateX(-30vw) rotate(-16deg);
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  17.8%, 100% {
    transform: translateX(130vw) rotate(-16deg);
  }
}

/* --- 6.4 Hero scroll-scrub (§5.8): opener ends in blackout --- */
@media (prefers-reduced-motion: no-preference) {
  .hero-image-wrap img {
    transform: scale(calc(1.08 - 0.08 * var(--hero-scroll)));
  }

  /* Bottom gradient reaches full --void opacity at 85% progress */
  .hero-gradient {
    opacity: min(1, calc(0.3 + 0.8235 * var(--hero-scroll)));
  }
}

/* --- 7. THE RIG — shared cue plumbing (§5.4) --- */

/* Lit-scrim: media loads pre-placed at final position/scale under a
   scrim; the light finds it (R5). Plain opacity — no blend. */
.lit-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(4, 6, 11, 0.62);
  opacity: 0;
  pointer-events: none;
}

.gallery-item .lit-scrim {
  background: rgba(4, 6, 11, 0.65);
}

@media (prefers-reduced-motion: no-preference) {
  .js .lit-scrim {
    opacity: 1;
    transition: opacity 160ms var(--ease-attack);
  }

  .js .aaron-section .lit-scrim,
  .js .watch-section .lit-scrim {
    transition-duration: 150ms;
  }

  .js .cued .lit-scrim {
    opacity: 0;
  }
}

/* Scrim hosts get positioning context */
.curtis-photo-col,
.curtis-band-photo,
.section-body,
.aaron-media-item,
.video-card-embed,
.gallery-item {
  position: relative;
}

/* Heading slam-in (§5.4, R4): full travel in 180ms, dead stop */
@media (prefers-reduced-motion: no-preference) {
  .js .slam-heading {
    transform: translateX(-0.6em);
    opacity: 0;
  }

  .js .cued .slam-heading {
    transform: none;
    opacity: 1;
    transition: transform 180ms var(--ease-attack), opacity 180ms var(--ease-attack);
  }
}

/* Starburst underline (§6 retune: 250ms sweep, 60ms delay) */
.section-heading,
.watch-heading,
.gallery-heading,
.gear-heading,
.aaron-heading,
.contact-heading {
  position: relative;
  padding-bottom: var(--space-3);
}

.section-heading::after,
.watch-heading::after,
.gallery-heading::after,
.gear-heading::after,
.aaron-heading::after,
.contact-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 72px;
  height: 2px;
  background: var(--starburst);
  transform: scaleX(1);
  transform-origin: left center;
}

.gear-heading::after,
.contact-heading::after {
  left: 50%;
  margin-left: -36px;
}

@media (prefers-reduced-motion: no-preference) {
  .js .section-heading::after,
  .js .watch-heading::after,
  .js .gallery-heading::after,
  .js .gear-heading::after,
  .js .aaron-heading::after,
  .js .contact-heading::after {
    transform: scaleX(0);
    transition: transform 250ms var(--ease-primary) 60ms;
  }

  .js .cued .section-heading::after,
  .js .cued .watch-heading::after,
  .js .cued .gallery-heading::after,
  .js .cued .gear-heading::after,
  .js .cued .aaron-heading::after,
  .js .cued .contact-heading::after {
    transform: scaleX(1);
  }
}

/* --- 7.1 EVENT: Nav blackout cut (§5.5) --- */
.nav-blackout {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(4, 6, 11, 1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* can never trap input */
  transition: opacity 450ms var(--ease-decay), visibility 0s linear 450ms;
}

.nav-blackout.cover {
  opacity: 1;
  visibility: visible;
  transition: opacity 90ms linear, visibility 0s;
}

/* --- 7.2 EVENT: Cursor followspot (§5.6) — desktop fine pointers --- */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  .gallery-item::after,
  .video-card-embed::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, rgba(240, 236, 226, 0.16), transparent);
    mix-blend-mode: screen;
    pointer-events: none;
    transform: translate(calc(var(--mx, -999px) - 140px), calc(var(--my, -999px) - 140px));
    opacity: 0;
    transition: opacity 500ms var(--ease-decay);
  }

  .gallery-item.spot-on::after,
  .video-card-embed.spot-on::after {
    opacity: 1;
    transition: opacity 120ms var(--ease-attack);
  }
}

/* --- 8. Curtis Salgado Section --- */
.curtis-section {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  overflow: hidden; /* contains the beam wipe */
}

.curtis-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .curtis-layout {
    flex-direction: row;
    align-items: stretch;
  }
}

.curtis-photo-col {
  width: 100%;
}

@media (min-width: 768px) {
  .curtis-photo-col {
    width: 50%;
    flex-shrink: 0;
  }
}

@media (min-width: 1024px) {
  .curtis-photo-col {
    width: 55%;
  }
}

.curtis-photo-col picture,
.curtis-photo-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.curtis-text-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .curtis-text-col {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .curtis-text-col {
    width: 45%;
  }
}

.curtis-text-col .section-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--beam);
}

.curtis-text-col .section-body {
  color: var(--smoke);
}

.curtis-band-photo {
  border: 1px solid var(--void-mid);
  margin-top: var(--space-4);
}

.curtis-band-photo picture,
.curtis-band-photo img {
  width: 100%;
  display: block;
}

/* --- 8.1 EVENT: Curtis beam wipe (§5.4) --- */
/* 18% section width (Rev B G4 remedy: widened from 14%), full height,
   −8°, cobalt, screen blend; travels the full section width in 750ms. */
.cue-beam {
  position: absolute;
  top: -12%;
  left: 0;
  width: 18%;
  height: 124%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transform: translateX(-110%) rotate(-8deg);
  will-change: transform;
}

.cue-beam-cobalt {
  background: linear-gradient(90deg, transparent, rgba(77, 142, 216, 0.28) 50%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .js .curtis-section.cued .cue-beam {
    animation: beamWipe 750ms var(--cue-travel) forwards;
  }

  /* Curtis heading is lit by its beam: clip wipe synced to the 750ms
     timeline (replaces the slam-in for this section only) */
  .js .section-heading {
    clip-path: inset(0 100% 0 0);
  }

  .js .curtis-section.cued .section-heading {
    clip-path: inset(0 0 0 0);
    transition: clip-path 750ms var(--cue-travel);
  }
}

@keyframes beamWipe {
  0% { transform: translateX(-110%) rotate(-8deg); opacity: 1; }
  100% { transform: translateX(770%) rotate(-8deg); opacity: 1; }
}

/* --- 9. Aaron Carter Section (§4.1 dead-zone fix) --- */
.aaron-section {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

/* Blinder overlay (§5.4): amber flash, 0 → 0.16 in 80ms, → 0 in 550ms */
.blinder {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--starburst);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .js .aaron-section.cued .blinder {
    animation: blinderHit 630ms linear forwards;
  }
}

@keyframes blinderHit {
  0% { opacity: 0; animation-timing-function: cubic-bezier(0.25, 0, 0.15, 1); }
  12.7% { opacity: 0.16; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  100% { opacity: 0; }
}

.aaron-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--beam);
  margin-bottom: var(--space-6);
}

/* Aaron media grid: mobile single column */
.aaron-media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.aaron-media-item {
  border-radius: 4px;
  overflow: hidden;
}

.aaron-media-item picture {
  display: block;
  width: 100%;
  height: 100%;
}

.aaron-media-item img,
.aaron-media-item video {
  width: 100%;
  height: auto;
  display: block;
}

.aaron-video-wide,
.aaron-video-small {
  aspect-ratio: 16 / 9;
}

.aaron-video-wide video,
.aaron-video-small video {
  height: 100%;
  object-fit: cover;
}

/* Mobile: natural aspect except crew capped at 3:2 cover (§4.1) */
.aaron-photo-crew {
  aspect-ratio: 3 / 2;
}

.aaron-photo-crew img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%; /* keep faces */
}

/* Tablet (768–1023px): rows 2 and 3 become 1fr 1fr */
@media (min-width: 768px) {
  .aaron-media-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .aaron-video-wide {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9; /* §15.10 anamorphic wide-loop crop, kept */
  }

  .aaron-photo-stage,
  .aaron-photo-wango,
  .aaron-photo-crew,
  .aaron-video-small {
    height: clamp(260px, 34vw, 380px);
    aspect-ratio: auto;
  }

  .aaron-media-item img,
  .aaron-media-item video {
    height: 100%;
    object-fit: cover;
  }
}

/* Desktop (≥1024px): 12-column grid, every row fills the container */
@media (min-width: 1024px) {
  .aaron-media-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .aaron-video-wide {
    grid-column: 1 / 13;
  }

  .aaron-photo-stage {
    grid-column: 1 / 8;
    height: clamp(320px, 30vw, 440px);
  }

  .aaron-photo-wango {
    grid-column: 8 / 13;
    height: clamp(320px, 30vw, 440px);
  }

  .aaron-photo-crew {
    grid-column: 1 / 6;
    height: clamp(300px, 28vw, 420px);
  }

  .aaron-video-small {
    grid-column: 6 / 13;
    height: clamp(300px, 28vw, 420px);
  }
}

.aaron-body {
  margin-top: var(--space-6);
  color: var(--beam);
  max-width: 64ch;
}

/* --- 10. Listen / Watch Section --- */
.watch-section {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

.watch-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--starburst);
  margin-bottom: var(--space-2);
}

.watch-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--beam);
  margin-bottom: var(--space-7);
}

.watch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .watch-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.video-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.video-card-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--void-raised);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.video-card-embed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play button overlay (breathing ring kept, §6) */
.video-card-embed .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(10, 14, 23, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  pointer-events: none;
}

.video-card-embed:hover .play-btn {
  background: rgba(212, 150, 58, 0.85);
}

@media (prefers-reduced-motion: no-preference) {
  .video-card-embed .play-btn {
    animation: playRing 3.2s ease-in-out infinite;
  }
}

@keyframes playRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 150, 58, 0.0); }
  50% { box-shadow: 0 0 0 10px rgba(212, 150, 58, 0.12); }
}

.play-btn svg {
  width: 24px;
  height: 24px;
  fill: var(--beam);
  margin-left: 3px;
}

.video-card-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-card-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.1vw + 0.5rem, 1.125rem);
  color: var(--beam);
}

.video-card-context {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
  line-height: 1.5;
  color: var(--smoke);
}

/* --- 11. Gallery Section --- */
.gallery-section {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

.gallery-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--beam);
  margin-bottom: var(--space-7);
}

.gallery-grid {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
}

/* Desktop: asymmetric editorial grid (7 items) */
@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: 55fr 45fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "large1  med1"
      "large1  med2"
      "med3    large2"
      "small1  large2"
      "small2  gvoid";
  }

  .gallery-item:nth-child(1) { grid-area: large1; }
  .gallery-item:nth-child(2) { grid-area: med1; }
  .gallery-item:nth-child(3) { grid-area: med2; }
  .gallery-item:nth-child(4) { grid-area: large2; }
  .gallery-item:nth-child(5) { grid-area: med3; }
  .gallery-item:nth-child(6) { grid-area: small1; }
  .gallery-item:nth-child(7) { grid-area: small2; }
  .gallery-void { grid-area: gvoid; }
}

/* Declared void (G5 Rev B.1 rule 3): renders nothing below the desktop grid */
.gallery-void { display: none; }
@media (min-width: 1024px) { .gallery-void { display: block; } }

.gallery-item {
  overflow: hidden;
  border-radius: 2px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 12. Gear / Endorsements Section --- */
.gear-section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.gear-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--beam);
  text-align: center;
  margin-bottom: var(--space-6);
}

.gear-marquee-wrap {
  overflow: hidden;
  position: relative;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--void-mid);
  border-bottom: 1px solid var(--void-mid);
  background: var(--void-raised);
}

.gear-marquee {
  display: flex;
  width: max-content;
  gap: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .gear-marquee {
    animation: marqueeScroll 35s linear infinite;
  }

  .gear-marquee-wrap:hover .gear-marquee {
    animation-play-state: paused;
  }
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.gear-marquee-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.gear-brand {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
  white-space: nowrap;
  padding: 0 var(--space-4);
  transition: color 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}

.gear-marquee-wrap:hover .gear-brand:hover {
  color: var(--beam);
}

.gear-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--starburst);
  opacity: 0.5;
  flex-shrink: 0;
}

/* Reduced motion: static wrapped grid */
@media (prefers-reduced-motion: reduce) {
  .gear-marquee {
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    gap: var(--space-3);
  }

  .gear-marquee-set:last-child {
    display: none;
  }

  .gear-dot {
    display: none;
  }

  .gear-brand {
    padding: var(--space-2) var(--space-3);
  }
}

/* --- 13. Contact / Footer --- */
.contact-footer {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.contact-divider {
  width: 60%;
  max-width: 720px;
  height: 1px;
  background: var(--void-mid);
  margin: 0 auto var(--space-10);
}

.contact-content {
  text-align: center;
}

.contact-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--beam);
  margin-bottom: var(--space-4);
}

/* Final flare (§5.4): cobalt line grows under the heading, 800ms */
.contact-flare {
  width: min(380px, 42vw);
  height: 1px;
  margin: 0 auto var(--space-6);
  background: linear-gradient(90deg, rgba(77, 142, 216, 0.95), rgba(77, 142, 216, 0));
  box-shadow: 0 0 14px rgba(77, 142, 216, 0.65), 0 0 40px rgba(77, 142, 216, 0.25);
  transform: scaleX(1);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .js .contact-flare {
    transform: scaleX(0);
  }

  .js .contact-footer.cued .contact-flare {
    animation: flareGrow 800ms var(--ease-primary) forwards;
  }
}

.contact-email {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.1vw + 0.5rem, 1.125rem);
  color: var(--cobalt);
  text-decoration: none;
  position: relative;
  min-height: 44px;
  line-height: 44px;
  transition: color 0.3s ease;
}

.contact-email::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--cobalt);
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.contact-email:hover {
  color: var(--starburst);
}

.contact-email:hover::after {
  opacity: 1;
  background: var(--starburst);
}

.contact-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.contact-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--smoke);
  transition: color 0.3s ease;
}

.contact-social a:hover,
.contact-social a:focus-visible {
  color: var(--beam);
}

.contact-social svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.footer-credit {
  margin-top: var(--space-10);
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
  line-height: 1.5;
  color: var(--dim);
}

/* --- 14. Film slates (§15.9, kept as-is) --- */
.aaron-video-wide,
.aaron-video-small {
  position: relative;
}

.film-slate {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px 6px 10px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--beam);
  background: rgba(4, 6, 11, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-left: 2px solid var(--starburst);
  border-radius: 2px;
}

.slate-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stage-wash);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .slate-dot {
    animation: recPulse 1.6s ease-in-out infinite;
  }
}

@keyframes recPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* --- 15. Utility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- 16. prefers-reduced-motion (§7): the still-lit composition ---
   The site is a finished, fully lit stage — never dimmed, never
   half-loaded. Same focus/hash handling, no overlays. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Overlays not rendered */
  .house-scrim,
  .lit-scrim,
  .nav-blackout,
  .idle-beam,
  .hero-name .light-sweep,
  .blinder {
    display: none !important;
  }

  /* Bloom: static — the practical is lit, not breathing.
     (Anchor math still runs; positioning is not motion.) */
  .bloom {
    animation: none !important;
    transform: none !important;
    opacity: 0.7 !important;
  }

  /* Pilot jewel: static at full */
  .pilot-jewel {
    animation: none !important;
    opacity: 1 !important;
  }

  /* Hero fully composed from first paint. The static 1.08 crop matches
     the motion version's top-of-page frame (crop, not motion). */
  .hero-image-wrap img {
    transform: scale(1.08) !important;
  }

  .hero-gradient {
    opacity: 0.3 !important;
  }

  .hero-name .word {
    transform: none !important;
  }

  .hero-name,
  .hero-subtitle {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-flare,
  .contact-flare {
    transform: scaleX(1) !important;
  }

  .hero-scroll-indicator {
    opacity: 0.5 !important;
  }

  /* Headings and media at full opacity/position */
  .slam-heading,
  .section-heading {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .section-heading::after,
  .watch-heading::after,
  .gallery-heading::after,
  .gear-heading::after,
  .aaron-heading::after,
  .contact-heading::after {
    transform: scaleX(1) !important;
  }

  /* Zone tints static, fully drawn */
  .zone-magenta::before {
    opacity: 1 !important;
  }
}