/* ==========================================================================
   DEADRABBIT RACING — BASE STYLESHEET
   Dark / Brutalist system. Palette below is a placeholder built to feel
   right with the brand direction chosen (raw, high-contrast, industrial).
   Swap --color-accent / logo once real brand colors are supplied.
   ========================================================================== */

:root {
  --color-bg: #0a0a0a;
  --color-bg-alt: #141414;
  --color-fg: #f2f0ec;
  --color-fg-dim: #a5a5a0; /* lightened for legibility against the grain texture */
  --color-accent: #cc0c0c; /* sampled from real DeadRabbit Racing logo */
  --color-metal: #949494; /* sampled metal-gray from logo */
  --color-border: #2a2a2a;

  /* LED/neon accent trio — used only on The Rabbit Hole page. Kept separate
     from the core brand palette above so the rest of the site stays in its
     red/black world; this page gets to run hotter. */
  --color-neon-red: #ff1744;
  --color-neon-cyan: #00e5ff;
  --color-neon-magenta: #ff2ee6;

  /* Caution/checkered-flag yellow — used only on Upcoming Races, its own
     "race day" world, same way the neon trio above is scoped to Rabbit Hole. */
  --color-caution: #ffc400;

  /* Military dispatch/typewriter look, applied sitewide per request — both
     display and body share the same face. Special Elite only ships one
     weight (400); browsers will fake-bold the font-weight:700/500 spots
     used for eyebrows/buttons/nav, which is expected with a single-weight
     font. */
  --font-display: "Special Elite", "Courier New", monospace;
  --font-body: "Special Elite", "Courier New", monospace;

  --container-pad: clamp(1.25rem, 4vw, 4rem);
  --section-pad-y: clamp(4rem, 10vw, 9rem);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
}

/* Film-grain texture over the whole page — keeps the dark flats from
   feeling flat/digital, reads more like grainy race footage than a UI. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
}

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

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

a {
  color: inherit;
}

/* ==========================================================================
   ENTER GATE — click-to-enter overlay
   Browsers block audio autoplay without a user gesture, so the site opens
   behind a full-screen gate. One click both starts the background music and
   releases the hero's "impact" entrance animations, so the sound and the
   visual punch land together instead of the hero firing silently on load.
   ========================================================================== */
body.gate-active {
  overflow: hidden;
  height: 100vh;
}

.enter-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: var(--color-bg);
  text-align: center;
  padding: var(--container-pad);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.enter-gate__logo {
  width: clamp(240px, 36vw, 500px);
  filter: drop-shadow(0 0 55px rgba(204, 12, 12, 0.55));
  opacity: 0;
  animation:
    gateLogoSlam 0.75s cubic-bezier(.2, .85, .25, 1.4) 0s 1 forwards,
    heartbeat 1.15s ease-in-out 0.75s infinite;
}

/* One-shot slam on load — oversized + blurred, punches down hard past
   resting size, then settles — before handing off straight into the
   heartbeat loop below (its delay is tuned to match this animation's
   duration). */
@keyframes gateLogoSlam {
  0% {
    opacity: 0;
    transform: scale(3.2);
    filter: blur(18px) drop-shadow(0 0 0 rgba(204, 12, 12, 0));
  }
  55% {
    opacity: 1;
    transform: scale(0.88);
    filter: blur(0) drop-shadow(0 0 80px rgba(204, 12, 12, 0.85));
  }
  75% {
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 55px rgba(204, 12, 12, 0.55));
  }
}

/* Two-beat thump — lub-dub — instead of a smooth pulse, so the logo reads
   like it's alive on the gate rather than just breathing. */
@keyframes heartbeat {
  0%, 28%, 70%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 55px rgba(204, 12, 12, 0.55));
  }
  14% {
    transform: scale(1.14);
    filter: drop-shadow(0 0 95px rgba(204, 12, 12, 0.95));
  }
  42% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 85px rgba(204, 12, 12, 0.85));
  }
}

.enter-gate__hint {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
}

.enter-gate.is-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.enter-gate .button {
  appearance: none;
  background: transparent;
  font-family: var(--font-body);
  cursor: pointer;
}

/* Fallback control — only ever appears if a browser blocks the automatic
   handoff of music between pages, so playback can always be picked back up
   with one click instead of going silent. */
.audio-resume {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 500;
  appearance: none;
  background: var(--color-accent);
  border: none;
  color: var(--color-bg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.8rem 1.4rem;
  cursor: pointer;
  transform: skewX(-12deg);
  box-shadow: 0 0 30px rgba(204, 12, 12, 0.5);
  animation: audioResumeIn 0.3s ease-out;
}

.audio-resume span {
  display: block;
  transform: skewX(12deg);
}

@keyframes audioResumeIn {
  from { opacity: 0; transform: skewX(-12deg) translateY(12px); }
  to { opacity: 1; transform: skewX(-12deg) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .enter-gate__logo {
    opacity: 1;
    animation: none;
  }
}

.container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.eyebrow::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  background: var(--color-accent);
}

.section-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-shadow: 6px 6px 0 var(--color-accent);
  margin-top: 0.5rem;
}

/* Shared "readable body copy" treatment — every secondary/supporting line
   of text on the site (card descriptions, bio paragraphs, CTA text) uses
   this so weight/leading/tracking stay one system instead of drifting
   per-section. Lighter weight than default so it reads clean against the
   bold display headlines rather than competing with them. */
.discipline-card__desc,
.partner-card__blurb,
.bio__copy p,
.partners__cta-text {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   SCROLL REVEAL SYSTEM
   Elements start hidden/offset and are flipped to .is-visible by the
   IntersectionObserver in script.js as they enter the viewport. One-time
   reveal (not repeating) — feels like the story unfolding as you scroll,
   not a UI gimmick that replays every time.
   ========================================================================== */

/* Same energy as the hero slam: overshoot past resting size then settle,
   instead of a polite ease — every section should feel like it's landing,
   not drifting in. */
.reveal {
  opacity: 0;
  transform: translateY(72px) scale(0.88);
  filter: blur(11px);
  transition: opacity 0.55s cubic-bezier(.34,1.56,.64,1),
              transform 0.65s cubic-bezier(.34,1.56,.64,1),
              filter 0.5s ease-out;
}

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

/* Headline flash-pulse — a quick red bloom behind section titles as they
   land, echoing the hero's camera-flash so section arrivals read as events,
   not fades. Added via a dedicated class since :has() support can't be
   relied on everywhere. */
.reveal--headline {
  position: relative;
}

.reveal--headline::before {
  content: "";
  position: absolute;
  left: -40px;
  top: -60px;
  width: 260px;
  height: 260px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(204, 12, 12, 0.6), transparent 70%);
  opacity: 0;
}

.reveal--headline.is-visible::before {
  animation: headlineFlash 0.8s ease-out 0.1s 1;
}

@keyframes headlineFlash {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

/* Speed-stripe dividers draw themselves in left-to-right instead of just
   sitting there statically. */
.speed-divider.reveal {
  opacity: 1;
  filter: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(.16,1,.3,1);
}

.speed-divider.reveal.is-visible {
  transform: scaleX(1);
}

/* Stagger the grid items so they cascade in rather than snap at once */
.discipline-card.reveal:nth-child(1) { transition-delay: 0s; }
.discipline-card.reveal:nth-child(2) { transition-delay: 0.1s; }
.discipline-card.reveal:nth-child(3) { transition-delay: 0.2s; }
.discipline-card.reveal:nth-child(4) { transition-delay: 0.3s; }
.discipline-card.reveal:nth-child(5) { transition-delay: 0.4s; }
.discipline-card.reveal:nth-child(6) { transition-delay: 0.5s; }

.partner-card.reveal:nth-child(1) { transition-delay: 0s; }
.partner-card.reveal:nth-child(2) { transition-delay: 0.15s; }

/* Broadcast-style wipe on section headlines — a hard-edged blade of light
   sweeping the title into view, echoing the diagonal speed-stripe dividers
   and racing-graphics wipes rather than a plain fade. Layers on top of the
   parent .reveal's blur/scale/fade. */
.reveal .section-title {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.85s cubic-bezier(.16,1,.3,1) 0.1s;
}

.reveal.is-visible .section-title {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Eyebrow tick mark draws in like a stripe being painted on */
.reveal .eyebrow::before {
  width: 0;
  transition: width 0.5s ease-out 0.05s;
}

.reveal.is-visible .eyebrow::before {
  width: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal .section-title,
  .reveal .eyebrow::before {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    width: 28px;
    transition: none;
  }

  .discipline-card__media {
    clip-path: none;
    animation: none;
  }

  .discipline-card__media-wrap {
    transform: none !important;
  }

  .reveal--headline::before {
    display: none;
  }

  .speed-divider.reveal {
    transform: scaleX(1);
    transition: none;
  }
}

.placeholder-block {
  border: 2px dashed var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-fg-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1rem;
}

/* ==========================================================================
   NAV
   ========================================================================== */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--container-pad);
  mix-blend-mode: difference;
}

.site-nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-nav__logo img {
  height: 44px;
  width: auto;
}

.site-nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-nav__links a {
  text-decoration: none;
}

/* ==========================================================================
   HERO — single scream-video stage (the logo intro now lives on the
   enter-gate; see ENTER GATE above)
   ========================================================================== */

.hero {
  position: relative;
}

.hero__stage {
  min-height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

/* The logo/flash/shockwave "impact" moment now lives on the enter-gate
   itself (see ENTER GATE, above, including its heartbeat keyframe) — the
   gate IS the landing page, so the hero no longer needs its own separate
   logo stage. Once visitors click through, they land straight on the
   video stage. */

.hero__stage--video {
  min-height: 100svh;
  background: var(--color-bg);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  /* Light darken + contrast pull so the clip sits in the same
     dark-cinematic range as the rest of the site. */
  filter: brightness(0.94) contrast(1.1) saturate(0.95);
}

.hero__video.is-active {
  opacity: 1;
}

/* Walk video (Vegas sign + aerial strip shot) — slightly warmer/moodier
   grade so the crossfade from the scream video feels intentional rather
   than like a hard cut to a different clip's native color. */
#hero-video-2 {
  filter: brightness(0.88) contrast(1.12) saturate(0.88) sepia(0.15) hue-rotate(-10deg);
}

/* Vignette + red-black wash over the video. */
.hero__video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.4) 100%),
    linear-gradient(180deg, rgba(20, 0, 0, 0.08), rgba(10, 0, 0, 0.22));
  box-shadow: inset 0 0 120px 40px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    transition: none;
  }
}

/* ==========================================================================
   WORD DEFINITION — "DeadRabbit" as a dictionary entry
   Its own big, distinct moment: an oversized slam (bigger than any other
   headline on the site) with a flash burst, a typewriter phonetic spelling,
   and a highlighter underline drawing in beneath the word.
   ========================================================================== */

.word-def {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 11vw, 8rem) 0;
  text-align: center;
}

.word-def .container {
  max-width: 900px;
  margin: 0 auto;
}

/* Ghosted watermark of the full logo, breathing behind the text — the
   brand mark emerging from the same glow that lights up the rest of the
   background system, instead of a plain crest floating on its own. */
.word-def__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(760px, 92vw);
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0.08;
  pointer-events: none;
  animation: markBreathe 6s ease-in-out infinite;
}

.word-def__mark img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes markBreathe {
  0%, 100% { opacity: 0.06; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.13; transform: translate(-50%, -50%) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .word-def__mark {
    animation: none;
    opacity: 0.08;
  }
}

.word-def__term {
  font-family: var(--font-display);
  text-transform: uppercase;
  /* Special Elite runs much wider per character than Anton did — sized
     down and capped so "DeadRabbit" never gets wide enough to overflow
     and throw off centering on narrower screens. */
  font-size: clamp(2.5rem, 10vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0;
  opacity: 0;
  display: block;
  width: 100%;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
}

.word-def.is-visible .word-def__term {
  animation: wordSlam 0.9s cubic-bezier(.2, .85, .25, 1.4) forwards;
}

@keyframes wordSlam {
  0% {
    opacity: 0;
    transform: scale(2.6);
    filter: blur(18px);
  }
  55% {
    opacity: 1;
    transform: scale(0.93);
    filter: blur(0);
  }
  75% {
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.word-def__underline {
  height: 5px;
  width: 220px;
  max-width: 60%;
  margin: 1.25rem auto 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  box-shadow: 0 0 25px rgba(204, 12, 12, 0.7);
}

.word-def.is-visible .word-def__underline {
  animation: underlineDraw 0.6s cubic-bezier(.16, 1, .3, 1) 0.7s forwards;
}

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

.word-def__phonetic {
  margin-top: 1.75rem;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  letter-spacing: 0.08em;
  color: var(--color-fg-dim);
  min-height: 1.6em;
}

.word-def__pos {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
}

.word-def__definition {
  margin: 1.75rem auto 0;
  max-width: 62ch;
  color: var(--color-fg-dim);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .word-def__term {
    opacity: 1;
    animation: none;
  }
  .word-def__underline {
    transform: scaleX(1);
    animation: none;
  }
}

/* ==========================================================================
   ENERGY BACKGROUND SYSTEM
   Shared, reusable "living background" — used behind every section on the
   site (except the hero, which has its own bespoke treatment, and the
   still-placeholder video stages). One system reused everywhere is what
   makes it read as cohesive rather than a pile of one-off effects: a slow
   rotating sunburst of light rays exploding out from a breathing red glow,
   plus rising spark particles (generated by script.js). Drop `.energy-bg`
   as the first child of any `position: relative; overflow: hidden;`
   section to use it.
   ========================================================================== */

.energy-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Raw scanline texture — reads like onboard/broadcast camera footage
   rather than a decorative pattern. */
.energy-bg__lines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(242, 240, 236, 0.03) 0px,
    rgba(242, 240, 236, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* A hard light streak that blows past like a car/bike ripping through
   frame — sits idle most of the cycle, then rips across fast. An event,
   not a decoration. */
.energy-bg__lines::after {
  content: "";
  position: absolute;
  top: -25%;
  left: -60%;
  width: 38%;
  height: 150%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(242, 240, 236, 0.12) 45%,
    rgba(204, 12, 12, 0.4) 52%,
    transparent 72%
  );
  transform: skewX(-20deg);
  filter: blur(9px);
  animation: streakSweep 8s cubic-bezier(.3, .6, .3, 1) infinite;
}

@keyframes streakSweep {
  0%, 52% { left: -60%; opacity: 0; }
  58% { opacity: 1; }
  78% { left: 130%; opacity: 1; }
  88%, 100% { left: 130%; opacity: 0; }
}

.energy-bg__glow {
  position: absolute;
  top: -15%;
  left: 50%;
  width: min(1000px, 140vw);
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(204, 12, 12, 0.28), transparent 65%);
  animation: energyPulse 6s ease-in-out infinite;
}

@keyframes energyPulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.15); }
}

.energy-bg__sparks {
  position: absolute;
  inset: 0;
}

.spark {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 7px 1px rgba(204, 12, 12, 0.85);
  opacity: 0;
  animation-name: sparkRise;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

.spark--white {
  background: var(--color-fg);
  box-shadow: 0 0 6px 1px rgba(242, 240, 236, 0.7);
}

@keyframes sparkRise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 0.5; }
  100% { transform: translateY(-70vh) scale(0.3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .energy-bg__lines,
  .energy-bg__lines::after,
  .energy-bg__glow {
    animation: none;
  }
  .energy-bg__sparks {
    display: none;
  }
}

/* ==========================================================================
   CORE DISCIPLINES
   ========================================================================== */

/* Speed-stripe divider — reusable diagonal accent bar that replaces flat
   borders between major sections. Very Redbull/Monster: a hard diagonal
   color-block break instead of a quiet line. */
.speed-divider {
  position: relative;
  height: 14px;
  background: var(--color-accent);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.disciplines {
  position: relative;
  overflow: hidden;
  padding: var(--section-pad-y) 0;
  background: var(--color-bg-alt);
}

.disciplines__header {
  margin-bottom: 3rem;
}

.disciplines__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

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

.discipline-card {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 3rem 2.25rem;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.discipline-card:hover {
  box-shadow: inset 0 0 0 1px var(--color-accent), 0 0 40px rgba(204, 12, 12, 0.25);
  transform: translateY(-2px);
}

/* Photo layer, split in two so each motion can run independently without
   fighting over the `transform` property:
   - media-wrap: bleeds past the card edges and is nudged up/down by JS as
     the page scrolls (parallax drift).
   - media: the actual image — plays a one-time curtain wipe on scroll-in,
     then a continuous slow Ken Burns zoom for as long as it's on screen.
   Desaturated + darkened uniformly so wildly different source photos read
   as one consistent DeadRabbit look instead of a mismatched stock grid. */
.discipline-card__media-wrap {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  will-change: transform;
}

.discipline-card__media {
  position: absolute;
  inset: 0;
  background-image: var(--card-image);
  background-size: cover;
  background-position: center;
  filter: grayscale(0.3) contrast(1.2) brightness(0.55) saturate(1.05);
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.9s cubic-bezier(.16,1,.3,1) 0.15s, filter 0.4s ease;
}

.discipline-card.is-visible .discipline-card__media {
  clip-path: inset(0 0 0 0%);
  animation: kenBurns 16s ease-in-out 1.1s infinite alternate;
}

@keyframes kenBurns {
  0% { transform: scale(1); }
  100% { transform: scale(1.12); }
}

.discipline-card:hover .discipline-card__media {
  filter: grayscale(0.15) contrast(1.25) brightness(0.68) saturate(1.1);
}

/* Dark scrim + red ember at the base so text stays legible and every card
   carries the same brand color-grade regardless of source photo. */
.discipline-card--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.1) 0%, rgba(10, 10, 10, 0.55) 55%, rgba(10, 10, 10, 0.94) 100%),
    linear-gradient(0deg, rgba(204, 12, 12, 0.3), transparent 45%);
}

/* Cards without a photo yet get a branded stripe texture instead of a flat
   dead panel, so the grid still reads as intentional. */
.discipline-card:not(.discipline-card--photo) {
  background-image: repeating-linear-gradient(
    135deg,
    var(--color-bg-alt) 0px,
    var(--color-bg-alt) 18px,
    #101010 18px,
    #101010 36px
  );
}

.discipline-card__body {
  position: relative;
  z-index: 2;
}

/* Hollow, race-livery style door-number treatment */
.discipline-card__index {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-accent);
  text-stroke: 2px var(--color-accent);
}

.discipline-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.9rem;
  line-height: 1.05;
}

.discipline-card--photo .discipline-card__title {
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}

.discipline-card__desc {
  font-size: 0.9rem;
  color: var(--color-fg-dim);
  margin-top: 0.75rem;
}

.discipline-card--photo .discipline-card__desc {
  color: #d8d6d0;
}

/* Sub-topic preview list — small tracked row of what's inside this
   category, shown before you click through. */
.discipline-card__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  list-style: none;
  margin-top: 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d8d6d0;
}

.discipline-card__topics li {
  position: relative;
  padding-right: 0.9em;
}

.discipline-card__topics li:not(:last-child)::after {
  content: "/";
  position: absolute;
  right: 0;
  color: var(--color-accent);
}

/* Explore CTA — signals the card is a link out to a new tab */
.discipline-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 1.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.discipline-card__cta .arrow {
  transition: transform 0.25s ease;
  display: inline-block;
}

.discipline-card:hover .discipline-card__cta .arrow {
  transform: translate(4px, -4px);
}

/* ==========================================================================
   BIOGRAPHY
   ========================================================================== */

.bio {
  position: relative;
  overflow: hidden;
  padding: var(--section-pad-y) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 900px) {
  .bio {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.bio__visual {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
  box-shadow: 0 0 60px rgba(204, 12, 12, 0.15);
}

.bio__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  filter: grayscale(35%) contrast(1.05);
  transition: opacity 1.4s ease;
}

.bio__visual-img.is-active {
  opacity: 1;
}

/* Cinematic vignette to tie the crossfade to the rest of the site's
   hero/detail-page photo treatment. */
.bio__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 90px 30px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  z-index: 1;
}

.bio__outfit-states {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.bio__outfit-chip {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.8rem;
  color: var(--color-fg-dim);
  transition: color 0.4s ease, border-color 0.4s ease;
}

.bio__outfit-chip.is-active {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .bio__visual-img {
    transition: none;
  }
}

.bio__copy p {
  margin-top: 1.5rem;
  color: var(--color-fg-dim);
  max-width: 46ch;
}

.bio__copy p:first-of-type {
  margin-top: 2rem;
}

/* Collapsed by default — long-form bio copy is clipped to roughly three
   paragraphs with a fade-to-background mask, expanding on "Read More". */
.bio__copy-text {
  position: relative;
  max-height: 15.5rem;
  overflow: hidden;
  transition: max-height 0.6s ease;
}

.bio__copy-text::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4.5rem;
  background: linear-gradient(180deg, transparent, var(--color-bg) 90%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.bio__copy-text.is-expanded {
  max-height: 200rem;
}

.bio__copy-text.is-expanded::after {
  opacity: 0;
}

.bio__read-more {
  appearance: none;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  cursor: pointer;
}

.bio__read-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bio__read-more-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.bio__read-more[aria-expanded="true"] .bio__read-more-arrow {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .bio__copy-text {
    transition: none;
  }
}

/* ==========================================================================
   PARTNERS
   ========================================================================== */

.partners {
  position: relative;
  overflow: hidden;
  padding: var(--section-pad-y) 0;
  background: var(--color-bg-alt);
}

.partners__header {
  margin-bottom: 3rem;
}

.partners__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-border);
}

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

.partner-card {
  background: var(--color-bg);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-top: 3px solid var(--color-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 32px 100%, 0 calc(100% - 32px));
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.partner-card:hover {
  box-shadow: 0 0 40px rgba(204, 12, 12, 0.2);
  transform: translateY(-2px);
}

.partner-card__logo {
  position: relative;
  height: 140px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.partner-card__logo img {
  max-width: 78%;
  max-height: 78%;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: scale(0.55);
}

/* Impact slam — logo punches in oversized-to-settled with a red glow kick,
   same "landing" energy as the hero mark. */
.partner-card.is-visible .partner-card__logo img {
  animation: partnerLogoImpact 0.7s cubic-bezier(.2, .85, .25, 1.4) 0.1s forwards;
}

@keyframes partnerLogoImpact {
  0% {
    opacity: 0;
    transform: scale(0.5);
    filter: drop-shadow(0 0 0 rgba(204, 12, 12, 0));
  }
  55% {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 45px rgba(204, 12, 12, 0.85));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 16px rgba(204, 12, 12, 0.35));
  }
}

/* Shockwave ring bursting outward right as the logo lands */
.partner-card__logo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.partner-card.is-visible .partner-card__logo::after {
  animation: partnerShockwave 0.9s cubic-bezier(.16, 1, .3, 1) 0.15s 1;
}

@keyframes partnerShockwave {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(26); }
}

/* Continuous chrome shine sweeping across the logo — keeps it feeling
   alive/premium after it lands, not just a one-time entrance. */
.partner-card__logo::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}

.partner-card.is-visible .partner-card__logo::before {
  opacity: 1;
  animation: partnerShine 5s ease-in-out 1.4s infinite;
}

@keyframes partnerShine {
  0% { left: -60%; }
  30% { left: 130%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .partner-card__logo img {
    opacity: 1;
    transform: none;
    animation: none;
    filter: none;
  }
  .partner-card__logo::after,
  .partner-card__logo::before {
    display: none;
  }
}

.partner-card__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.3rem;
}

.partner-card__blurb {
  color: var(--color-fg-dim);
  font-size: 0.9rem;
}

.inline-link {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(204, 12, 12, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.inline-link:hover {
  text-decoration-color: var(--color-accent);
}

.partners__cta {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.partners__cta-text {
  color: var(--color-fg-dim);
  max-width: 50ch;
}

.button {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-fg);
  padding: 0.9rem 1.75rem;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  transform: skewX(-12deg);
}

.button span {
  display: block;
  transform: skewX(12deg);
}

.button:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}

.button--accent {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.button--accent:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  box-shadow: 0 0 30px rgba(204, 12, 12, 0.5);
}

/* ==========================================================================
   DISCIPLINE DETAIL PAGES
   Shared by automotive-racing.html / endurance-sports.html /
   adventure-climbing.html — each opens in a new tab from a Core Disciplines
   card and explains that category's sub-topics.
   ========================================================================== */

.topic-main {
  position: relative;
  overflow: hidden;
}

.topic-main .topic-list,
.topic-main .topic-outro {
  position: relative;
  z-index: 1;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: var(--color-accent);
}

.topic-hero {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
  padding-top: 6rem;
  overflow: hidden;
}

.topic-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--card-image);
  background-size: cover;
  background-position: center;
  filter: grayscale(0.3) contrast(1.2) brightness(0.45) saturate(1.05);
  animation: kenBurns 20s ease-in-out infinite alternate;
}

.topic-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0.65) 60%, rgba(10, 10, 10, 0.96) 100%),
    linear-gradient(0deg, rgba(204, 12, 12, 0.3), transparent 45%);
}

.topic-hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: 3rem;
}

.topic-hero .eyebrow {
  margin-bottom: 0.75rem;
}

.topic-intro {
  max-width: 60ch;
  margin-top: 1.5rem;
  color: var(--color-fg-dim);
  font-weight: 300;
  line-height: 1.7;
}

.topic-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--color-border);
  margin-top: 1px;
}

.topic-item {
  position: relative;
  background: var(--color-bg);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  padding: clamp(2rem, 5vw, 3.5rem) var(--container-pad);
  align-items: center;
  transition: box-shadow 0.2s ease;
}

.topic-item:hover {
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

@media (min-width: 800px) {
  .topic-item {
    grid-template-columns: 300px 1fr;
  }
}

.topic-item__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.topic-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.15) brightness(0.8) saturate(1.05);
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.9s cubic-bezier(.16, 1, .3, 1) 0.15s, filter 0.4s ease;
}

.topic-item.is-visible .topic-item__media img {
  clip-path: inset(0 0 0 0%);
  animation: kenBurns 16s ease-in-out 1.1s infinite alternate;
}

.topic-item:hover .topic-item__media img {
  filter: grayscale(0.1) contrast(1.2) brightness(0.9) saturate(1.1);
}

/* Stagger the 3 rows so they cascade in rather than land together */
.topic-item.reveal:nth-child(1) { transition-delay: 0s; }
.topic-item.reveal:nth-child(2) { transition-delay: 0.12s; }
.topic-item.reveal:nth-child(3) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .topic-item__media img {
    clip-path: none;
    animation: none;
  }
}

.topic-item__index {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-accent);
  display: block;
  margin-bottom: 0.5rem;
}

.topic-item__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.6rem;
}

.topic-item__desc {
  margin-top: 0.75rem;
  color: var(--color-fg-dim);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
  max-width: 60ch;
}

.topic-outro {
  padding: var(--section-pad-y) 0;
  text-align: center;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 3rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .site-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-footer__social svg {
  width: 20px;
  height: 20px;
}

.site-footer__meta {
  color: var(--color-fg-dim);
  font-size: 0.75rem;
}

/* ==========================================================================
   THE RABBIT HOLE — video showcase page
   LED/neon, "extreme sports highlight reel" treatment. Deliberately louder
   and more electric than the rest of the site's red/black world: a chasing
   RGB LED strip, a flickering neon title, scanlines, and glowing video
   frames. Everything still sits on the same dark base + energy-bg system
   as every other page so it reads as part of the site, just turned up.
   ========================================================================== */

.site-nav__link--rabbit-hole {
  position: relative;
  color: var(--color-neon-red);
  text-shadow: 0 0 8px rgba(255, 23, 68, 0.65);
}

.site-nav__link--rabbit-hole:hover,
.site-nav__link--rabbit-hole.is-current {
  color: #ff5c78;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5), 0 0 14px rgba(255, 23, 68, 0.9), 0 0 28px rgba(255, 23, 68, 0.5);
}

/* Falling/vortex page transition, triggered from the nav link's click
   handler in script.js. A circular red-glow "hole" expands from the click
   point to cover the screen (exit), then on rabbit-hole.html it starts
   covering the screen and shrinks away to reveal the page (entry) — reads
   as one continuous fall across the hard page-load boundary. */
.rh-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  clip-path: circle(0% at var(--tx, 50%) var(--ty, 50%));
}

.rh-transition.is-exiting {
  clip-path: circle(150% at var(--tx, 50%) var(--ty, 50%));
  transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

.rh-transition.is-entering {
  clip-path: circle(150% at 50% 50%);
}

.rh-transition.is-entering.is-settling {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.05s;
}

.rh-transition__tunnel {
  position: absolute;
  inset: -25%;
  background:
    repeating-radial-gradient(
      circle at center,
      rgba(255, 23, 68, 0.55) 0px,
      rgba(255, 23, 68, 0.55) 2px,
      transparent 2px,
      transparent 26px
    ),
    radial-gradient(circle at center, #2a0000 0%, #050000 65%, #000 100%);
  animation: rhTunnelSpin 1.6s linear infinite;
}

@keyframes rhTunnelSpin {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(360deg) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .rh-transition,
  .rh-transition.is-exiting,
  .rh-transition.is-entering.is-settling {
    transition: none;
  }
  .rh-transition__tunnel {
    animation: none;
  }
}

/* Chasing RGB gradient bar — the page's signature "LED strip" motif, used
   top and bottom of the hero. */
.led-strip {
  position: relative;
  z-index: 3;
  height: 4px;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--color-neon-red),
    var(--color-neon-magenta),
    var(--color-neon-cyan),
    var(--color-neon-red)
  );
  background-size: 300% 100%;
  animation: ledChase 4s linear infinite;
  box-shadow: 0 0 12px rgba(255, 23, 68, 0.5), 0 0 20px rgba(0, 229, 255, 0.35);
}

@keyframes ledChase {
  0% { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

.rh-hero {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0 3.5rem;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 23, 68, 0.16), transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(0, 229, 255, 0.14), transparent 50%),
    var(--color-bg);
}

/* Faint horizontal scanlines drifting slowly downward, like a screen/LED
   panel — pure CSS, no image asset needed. */
.rh-hero__scanlines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: scanlineDrift 9s linear infinite;
  opacity: 0.6;
}

@keyframes scanlineDrift {
  0% { transform: translateY(0); }
  100% { transform: translateY(12px); }
}

.rh-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

.rh-hero__content {
  position: relative;
  z-index: 2;
  padding: 2.5rem 0 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rh-hero__eyebrow {
  color: var(--color-neon-cyan);
}

.rh-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 8vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--color-neon-red);
  margin-top: 0.5rem;
  max-width: 100%;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Tight, near-field glow layers only — a crisp lit-up core instead of a
     wide blur wash, so the letterforms stay sharp instead of reading as
     pixelated/blurry at large sizes. */
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.9),
    0 0 6px rgba(255, 23, 68, 0.85),
    0 0 14px rgba(255, 23, 68, 0.5),
    0 0 26px rgba(255, 23, 68, 0.28);
  animation: neonFlicker 6s ease-in-out infinite;
}

/* Subtle, irregular flicker — most of the time it's steady, occasionally it
   dips like a real neon tube momentarily losing current. */
@keyframes neonFlicker {
  0%, 89%, 92%, 96%, 100% { opacity: 1; }
  90% { opacity: 0.72; }
  93% { opacity: 0.88; }
  95% { opacity: 0.65; }
}

.rh-hero__intro {
  color: var(--color-fg-dim);
}

.rh-main {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.5rem, 6vw, 4rem);
}

.rh-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

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

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

.video-card {
  position: relative;
}

.video-card__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-bg-alt);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  box-shadow: 0 0 0 1px var(--color-border);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.video-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shown whenever a card's <video> has no src yet — swap out per-card once
   real clips are dropped in (the placeholder div can just be removed). */
.video-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 2px, transparent 2px, transparent 10px),
    linear-gradient(160deg, #1a1a1a, #0a0a0a);
}

.video-card__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 2px solid var(--color-neon-cyan);
  color: var(--color-neon-cyan);
  font-size: 1.1rem;
  padding-left: 3px;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.45);
}

.video-card__placeholder-text {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
}

/* Glowing edge that intensifies on hover — the "LED-lit frame" effect. */
.video-card__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.25);
  transition: box-shadow 0.3s ease;
}

.video-card:hover .video-card__frame {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--color-neon-cyan), 0 0 24px rgba(0, 229, 255, 0.4), 0 0 50px rgba(255, 23, 68, 0.2);
}

.video-card:hover .video-card__glow {
  box-shadow: inset 0 0 0 1px var(--color-neon-magenta);
}

.video-card:hover .video-card__play {
  border-color: var(--color-neon-magenta);
  color: var(--color-neon-magenta);
  box-shadow: 0 0 20px rgba(255, 46, 230, 0.55);
}

.video-card__caption {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 1rem;
}

.video-card__index {
  font-size: 0.85rem;
  color: var(--color-neon-red);
  text-shadow: 0 0 10px rgba(255, 23, 68, 0.5);
}

.video-card__title {
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--color-fg);
}

/* YouTube embeds — real players, standard 16:9 rather than the placeholder
   frame's 16:10. */
.video-card__frame--16x9 {
  aspect-ratio: 16 / 9;
}

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

/* Instagram's official embed widget enforces its own light UI and sizing
   that can't be restyled (it renders in a cross-origin iframe) — give it
   room to size itself instead of forcing it into the video aspect-ratio,
   and let it span 2 grid columns on desktop so it isn't cramped next to
   the fixed-ratio video cards. */
.video-card__frame--auto {
  aspect-ratio: auto;
  min-height: 26rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  clip-path: none;
}

.video-card__frame--auto iframe {
  max-width: 100%;
}

.video-card--instagram .video-card__frame--auto {
  min-height: 30rem;
}

/* Each Instagram embed takes its own full-width row on desktop. Without this,
   grid auto-placement packs 3 cards per row, which meant one of the two link
   cards below got pulled into the same row as an Instagram card (and got
   stretched to match its tall height) while the other link card landed alone
   on the next row — exactly the "separated" layout bug that was reported.
   Giving each Instagram card the whole row guarantees the two link cards
   that follow always land together on their own row. */
@media (min-width: 1050px) {
  .video-card--instagram {
    grid-column: 1 / -1;
  }
  .video-card--instagram .video-card__frame--auto {
    max-width: 40rem;
    margin: 0 auto;
  }
}

/* External link cards (National Geographic / Explorers.org) — same frame
   treatment as a video card but built as a bold CTA tile instead of a
   player, since there's nothing to preview. */
.video-card--link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.video-card__frame--link {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 2px, transparent 2px, transparent 10px),
    linear-gradient(160deg, #1a1a1a, #0a0a0a);
}

.video-card__link-icon {
  font-size: 2rem;
  color: var(--color-neon-red);
  text-shadow: 0 0 14px rgba(255, 23, 68, 0.55);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.video-card__link-label {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
}

.video-card--link:hover .video-card__link-icon {
  color: var(--color-neon-cyan);
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .led-strip,
  .rh-hero__scanlines,
  .rh-hero__title {
    animation: none;
  }
}

/* ==========================================================================
   UPCOMING RACES — checkered-flag / race-day world. Scoped the same way
   Rabbit Hole's neon trio is: its own accent color (--color-caution) and its
   own visual language (checkerboard strips, hazard stripes, ticket-stub date
   badges) instead of borrowing the neon look, so the two "extra" pages each
   feel distinct rather than like variations on one theme.
   ========================================================================== */

.site-nav__link--upcoming-races {
  position: relative;
  color: var(--color-caution);
}

.site-nav__link--upcoming-races:hover,
.site-nav__link--upcoming-races.is-current {
  color: #ffd84d;
  text-shadow: 0 0 6px rgba(255, 196, 0, 0.6), 0 0 16px rgba(255, 196, 0, 0.35);
}

/* Checkerboard strip — classic 4-gradient CSS checkerboard trick, used as a
   top/bottom border on the hero in place of Rabbit Hole's LED chase strip. */
.checker-strip {
  position: relative;
  z-index: 3;
  height: 14px;
  width: 100%;
  background-color: #f2f0ec;
  background-image:
    linear-gradient(45deg, #0a0a0a 25%, transparent 25%),
    linear-gradient(-45deg, #0a0a0a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #0a0a0a 75%),
    linear-gradient(-45deg, transparent 75%, #0a0a0a 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
}

.ur-hero {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 0 3.5rem;
  background: linear-gradient(160deg, #1a1a1a, #0a0a0a);
}

/* Faint diagonal hazard stripes behind the hero content — the "caution tape"
   equivalent of Rabbit Hole's scanlines, but static (no motion) so the two
   pages don't read as the same trick recolored. */
.ur-hero__stripes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color-caution) 0px,
    var(--color-caution) 18px,
    transparent 18px,
    transparent 36px
  );
}

.ur-hero__content {
  position: relative;
  z-index: 2;
  padding: 2.5rem 0 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ur-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 8vw, 5rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--color-caution);
  margin-top: 0.5rem;
  max-width: 100%;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-shadow:
    2px 2px 0 #0a0a0a,
    -2px -2px 0 #0a0a0a,
    2px -2px 0 #0a0a0a,
    -2px 2px 0 #0a0a0a;
}

.ur-hero__intro {
  color: var(--color-fg-dim);
}

.ur-main {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.5rem, 6vw, 4rem);
}

.ur-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

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

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

.ur-card {
  position: relative;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.ur-card:hover {
  border-color: var(--color-caution);
  transform: translateY(-3px);
}

.ur-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.ur-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.05);
  transition: transform 0.5s ease, filter 0.5s ease;
}

.ur-card:hover .ur-card__media img {
  transform: scale(1.05);
  filter: grayscale(0) contrast(1.05);
}

/* Ticket-stub date badge, pinned to the photo's top-right corner. */
.ur-card__date {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  background: #0a0a0a;
  border: 1px solid var(--color-caution);
  padding: 0.5rem 0.65rem;
  min-width: 3.5rem;
}

.ur-card__date-label {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-caution);
}

.ur-card__body {
  padding: 1.5rem 1.35rem 1.75rem;
}

.ur-card__eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-caution);
  margin-bottom: 0.5rem;
}

.ur-card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.35rem;
}

.ur-card__location {
  font-size: 0.85rem;
  color: var(--color-fg-dim);
  margin-bottom: 0.85rem;
}

.ur-card__location::before {
  content: "\2691  ";
}

.ur-card__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-fg-dim);
}

.ur-card__status {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-caution);
  border: 1px solid var(--color-caution);
  padding: 0.3rem 0.6rem;
}

.ur-outro {
  text-align: center;
  color: var(--color-fg-dim);
  font-size: 0.9rem;
  padding-bottom: clamp(2rem, 5vw, 3rem);
}