/* ==========================================================================
   Home hero — animated arena version
   Loaded only by index.html, after styles.css. Everything is scoped to
   .hero--home so the profile / shop / promote heroes that share the base
   .hero-* classes stay untouched.

   Motion split (never two writers on one property):
   - [data-depth] wrappers  → `transform`, written by components/heroMotion.js
   - entrance animations   → `opacity` + individual `translate` / `scale`
   - ambient loops         → run on their own inner element
   ========================================================================== */
.hero--home {
  --hx-bg: #070707;
  --hx-surface: #11100d;
  --hx-bronze: #9a581c;
  --hx-gold: #d5a442;
  --hx-gold-light: #f2cd72;
  --hx-text: #f2efe8;
  --hx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bleed: 40px; /* decorative layers overhang the hero so drift/parallax never shows an edge */
  background: var(--hx-bg);
}

/* --- layer 1–5: decorative stage ---------------------------------------- */
.hero--home .hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero--home .hero-layer { position: absolute; inset: calc(var(--bleed) * -1); }
.hero--home [data-depth] { will-change: transform; }

.hero--home .hero-bg { animation: hx-fade 600ms ease-out both; }
.hero--home .hero-bg-img { object-position: center 55%; }
/* The generated arena plate is already lit; the overlay only keeps the copy
   column and the bottom bar readable. */
.hero--home .hero-bg-overlay {
  background:
    linear-gradient(180deg, rgba(7, 7, 7, 0.62) 0%, rgba(7, 7, 7, 0.12) 26%, rgba(7, 7, 7, 0.2) 62%, rgba(7, 7, 7, 0.9) 94%, var(--hx-bg) 100%),
    linear-gradient(90deg, rgba(7, 7, 7, 0.82) 0%, rgba(7, 7, 7, 0.35) 22%, rgba(7, 7, 7, 0) 42%, rgba(7, 7, 7, 0.18) 100%);
}

/* Octagon chain-link, only on the right edge */
.hero--home .hero-grid {
  inset: 0 0 0 auto;
  width: 36%;
  opacity: 0.22; /* the arena plate already shows the real cage */
  background:
    repeating-linear-gradient(45deg, rgba(213, 164, 66, 0.12) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(-45deg, rgba(213, 164, 66, 0.12) 0 1px, transparent 1px 24px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%), linear-gradient(180deg, transparent 10%, #000 34%, #000 70%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 55%), linear-gradient(180deg, transparent 10%, #000 34%, #000 70%, transparent 90%);
  mask-composite: intersect;
  animation: hx-fade 900ms ease-out 200ms both;
}

/* Amber arena light + fire/light burst. The whole layer is screen-blended onto
   the arena, so the burst's black background disappears and only light adds. */
.hero--home .hero-layer--light {
  mix-blend-mode: screen;
  --bx: 40%;  /* burst core position in the hero */
  --by: 44%;
  --bw: 82vw; /* burst width */
}
.hero--home .hero-burst {
  position: absolute;
  left: calc(var(--bleed) + var(--bx));
  top: calc(var(--bleed) + var(--by));
  width: var(--bw);
  /* the core sits at 38% / 49% of the image */
  margin: calc(var(--bw) * -0.277) 0 0 calc(var(--bw) * -0.38);
  animation: hx-burst-in 1300ms var(--hx-ease) 150ms both;
}
.hero--home .hero-burst img {
  width: 100%;
  height: auto;
  transform-origin: 38% 49%;
  animation: hx-burst 15s ease-in-out infinite alternate;
}
/* Fire rooster, screen-blended like the burst. --rx/--ry place its head
   (66% / 20% of the image) in the hero; --rw is its width. */
.hero--home .hero-rooster {
  --rx: 64%;
  --ry: 17%;
  --rw: 80vw;
  position: absolute;
  left: calc(var(--bleed) + var(--rx));
  top: calc(var(--bleed) + var(--ry));
  width: var(--rw);
  margin: calc(var(--rw) * -0.1131) 0 0 calc(var(--rw) * -0.66);
  opacity: 0.62;
  animation: hx-fade 1600ms ease-out 250ms both;
}
.hero--home .hero-rooster img {
  width: 100%;
  height: auto;
  transform-origin: 55% 60%;
  animation: hx-rooster 12s ease-in-out infinite alternate;
}
/* Live version (components/fireRooster.js): a WebGL canvas that overhangs the
   image so flapping wing tips are never clipped; the img stays as fallback. */
.hero--home .hero-rooster-live {
  position: absolute;
  left: -6%;
  top: -10%;
  width: 112%;
  height: 120%;
  pointer-events: none;
}
.hero--home .hero-rooster.is-live img { visibility: hidden; animation: none; }
/* Amber arena light: wrapper fades in, inner span breathes */
.hero--home .hero-light { position: absolute; animation: hx-fade 1000ms ease-out 100ms both; }
.hero--home .hero-light span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 168, 78, 0.42), rgba(196, 108, 38, 0.17) 48%, transparent 100%);
  animation: hx-light 16s ease-in-out infinite alternate;
}
.hero--home .hero-light--portrait { left: 21%; top: 20%; width: 42%; height: 58%; }
.hero--home .hero-light--body { left: 67%; top: 10%; width: 30%; height: 62%; opacity: 0.75; }
.hero--home .hero-light--body span { animation-duration: 18s; animation-delay: -7s; }

/* FLUFFY wordmark: layer = parallax, .hero-wordmark = entrance, -drift = loop */
.hero--home .hero-wordmark {
  position: absolute;
  left: calc(var(--bleed) + 2.4%);
  top: calc(var(--bleed) + 6.5%);
  z-index: auto;
  width: clamp(560px, 62vw, 1180px);
  opacity: 1;
  filter: none;
  animation: hx-word-in 1000ms var(--hx-ease) 120ms both;
}
.hero--home .hero-wordmark-drift {
  position: relative;
  animation: hx-word-drift 22s ease-in-out infinite alternate;
}
.hero--home .hero-wordmark img {
  width: 100%;
  height: auto;
  /* Static recolour: the brand file is rust-brown, the hero wants burnished gold */
  filter: sepia(0.65) saturate(1.2) hue-rotate(8deg) brightness(1.08) contrast(1.07) drop-shadow(0 0 24px rgba(240, 175, 75, 0.3));
}
/* Gold sheen painted only where the brush strokes are */
.hero--home .hero-wordmark-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(154, 88, 28, 0) 5%, rgba(255, 214, 120, 0.9) 40%, rgba(242, 190, 90, 0.6) 62%, rgba(154, 88, 28, 0) 95%);
  -webkit-mask: url('public/images/anthony-hernandez/fluffy-wordmark-brand.webp') center / 100% 100% no-repeat;
  mask: url('public/images/anthony-hernandez/fluffy-wordmark-brand.webp') center / 100% 100% no-repeat;
  mix-blend-mode: soft-light;
}

/* Smoke: a tileable fractal-noise strip twice the box width, slid by one tile */
.hero--home .hero-smoke { position: absolute; overflow: hidden; pointer-events: none; }
.hero--home .hero-smoke span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='420' viewBox='0 0 1200 420' preserveAspectRatio='none'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0034 0.0105' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.79 0 0 0 0 0.7 0 0 0 1.9 -0.82'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 50% 100% repeat-x;
  animation: hx-smoke 26s linear infinite;
}
.hero--home .hero-smoke--back {
  inset: auto;
  left: 8%;
  top: 38%;
  width: 66%;
  height: 46%;
  opacity: 0.34;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 25%, transparent 75%);
  animation: hx-fade 1400ms ease-out 400ms both;
}
.hero--home .hero-smoke--base {
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  z-index: 3;
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 95%);
  mask-image: linear-gradient(to top, #000 15%, transparent 95%);
  animation: hx-fade 1400ms ease-out 500ms both;
}
.hero--home .hero-smoke--base span { animation-duration: 34s; animation-direction: reverse; }

/* --- layer 6: photographs ------------------------------------------------ */
.hero--home .hero-portrait,
.hero--home .hero-fullbody { animation: none; pointer-events: none; }
.hero--home .hero-px { width: 100%; height: 100%; }

.hero--home .hero-portrait img {
  height: auto;
  object-fit: initial;
  filter: contrast(1.04) drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
  /* Fades the cut-off chest and the cropped arms into the smoke, measured on
     the photo itself (the img box now has the photo's own aspect ratio). */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, 0.7) 82%, transparent 99%),
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, 0.7) 82%, transparent 99%),
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
  animation: hx-portrait-in 1100ms var(--hx-ease) 220ms both;
}
.hero--home .hero-fullbody { z-index: 5; }
.hero--home .hero-fullbody img { animation: hx-right-in 900ms var(--hx-ease) 360ms both; }

/* --- layer 7: copy, card, actions, bottom bar ---------------------------- */
.hero--home .hero-copy { z-index: 6; animation: none; }
.hero--home .hero-copy > * { animation: hx-up-in 650ms var(--hx-ease) both; }
.hero--home .hero-eyebrow  { animation-delay: 480ms; }
.hero--home .hero-name     { animation-delay: 560ms; }
.hero--home .hero-tagline  { animation-delay: 640ms; }
.hero--home .hero-divider  { animation-delay: 700ms; }
.hero--home .hero-division { animation-delay: 740ms; }

.hero--home .hero-cta-stack { z-index: 4; animation: none; }
.hero--home .next-fight-card { animation: hx-card-in 600ms var(--hx-ease) 620ms both; }
.hero--home .action-btn { animation: hx-card-in 600ms var(--hx-ease) both; }
.hero--home .action-btn:nth-child(1) { animation-delay: 720ms; }
.hero--home .action-btn:nth-child(2) { animation-delay: 800ms; }

/* Next fight headline: the base 0.8 line-height made "TO BE" and
   "ANNOUNCED" touch; give the two lines a little air. */
.hero--home .nfc-headline { line-height: 0.94; }

/* Next fight: short light sweep along the bevelled edge. The sweep sits
   between the gold edge (::before) and the dark fill (::after), so only the
   3px rim lights up. */
.hero--home .nfc-shine {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  clip-path: polygon(3% 0, 92% 0, 100% 7%, 100% 95%, 97% 100%, 3% 100%, 0 96%, 0 4%);
}
.hero--home .nfc-shine i {
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 178, 0.95) 50%, transparent);
  rotate: 20deg;
  translate: -200% 0;
  animation: hx-rim-sweep 10s ease-in-out 2.2s infinite;
}

/* Action buttons: gold tint + brighter rim + arrow nudge, same for keyboard focus */
.hero--home .action-btn { transition: color 220ms var(--hx-ease); }
.hero--home .action-btn::before { transition: filter 220ms var(--hx-ease); }
.hero--home .action-btn::after { transition: box-shadow 220ms var(--hx-ease); }
.hero--home .action-arrow {
  width: 1.25em;
  height: 1.25em;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--hx-gold);
  transition: translate 220ms var(--hx-ease), color 220ms var(--hx-ease);
}
.hero--home .action-btn:hover,
.hero--home .action-btn:focus-visible { transform: none; color: #ffe9a8; }
.hero--home .action-btn:hover .action-icon,
.hero--home .action-btn:focus-visible .action-icon { transform: none; }
.hero--home .action-btn:hover::before,
.hero--home .action-btn:focus-visible::before { filter: brightness(1.45) saturate(1.15); }
.hero--home .action-btn:hover::after,
.hero--home .action-btn:focus-visible::after {
  box-shadow: inset 0 0 0 1px rgba(242, 205, 114, 0.5), inset 0 0 48px rgba(213, 164, 66, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hero--home .action-btn:hover .action-arrow,
.hero--home .action-btn:focus-visible .action-arrow { translate: 4px 0; color: var(--hx-gold-light); }
.hero--home .action-btn:focus-visible { outline: 2px solid var(--hx-gold-light); outline-offset: 4px; }

/* Bottom bar + partner CTA */
.hero--home .hero-bottom-bar { animation: hx-fade 500ms ease-out 950ms both; }
.hero--home .hero-bottom-bar a { transition: color 200ms var(--hx-ease); }
.hero--home .hero-bottom-bar a:focus-visible { color: var(--hx-gold-light); outline-offset: 6px; }

.hero--home .partner-btn {
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(115deg, #8f5f26 0%, #c98d3e 22%, #f2cd72 47%, #ffe7a3 54%, #d5a442 72%, #9a6a2c 100%);
  transition: filter 220ms var(--hx-ease), box-shadow 220ms var(--hx-ease);
  animation: hx-fade 500ms ease-out 1000ms both;
}
.hero--home .partner-btn::before {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  z-index: -1;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  rotate: 18deg;
  translate: -180% 0;
  pointer-events: none;
  animation: hx-sheen 10.5s ease-in-out 1.8s infinite;
}
.hero--home .partner-btn svg { transition: translate 220ms var(--hx-ease); }
.hero--home .partner-btn:hover,
.hero--home .partner-btn:focus-visible {
  transform: none;
  filter: brightness(1.08);
  box-shadow: 0 14px 38px rgba(217, 164, 65, 0.42);
}
.hero--home .partner-btn:hover svg,
.hero--home .partner-btn:focus-visible svg { translate: 4px 0; }
.hero--home .partner-btn:focus-visible { outline: 2px solid var(--hx-gold-light); outline-offset: 4px; }

/* --- layer 8: gold particles --------------------------------------------- */
.hero--home .hero-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  animation: hx-fade 1200ms ease-out 900ms both;
}
.hero--home .hero-particles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--hx-gold-light);
  box-shadow: 0 0 6px 1px rgba(242, 190, 92, 0.5);
  opacity: 0;
  animation: hx-particle var(--d) linear var(--delay) infinite;
}

/* --- pause control ------------------------------------------------------- */
.hero-motion-toggle {
  position: absolute;
  right: 1.4%;
  bottom: 3.4%;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(213, 164, 66, 0.35);
  border-radius: 50%;
  background: rgba(10, 9, 7, 0.62);
  color: rgba(242, 205, 114, 0.85);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 200ms ease, border-color 200ms ease;
}
.hero-motion-toggle:hover,
.hero-motion-toggle:focus-visible { opacity: 1; border-color: var(--hx-gold); }
.hero-motion-toggle svg { grid-area: 1 / 1; width: 14px; height: 14px; }
.hero-motion-toggle .i-play,
.hero--home.is-paused .hero-motion-toggle .i-pause { display: none; }
.hero--home.is-paused .hero-motion-toggle .i-play { display: block; }

/* Loops stop while paused, off screen or in a background tab */
.hero--home:is(.is-paused, .is-offscreen, .is-tab-hidden) :is(.hero-light span, .hero-burst img, .hero-rooster img, .hero-wordmark-drift, .hero-smoke span, .hero-particles i, .nfc-shine i),
.hero--home:is(.is-paused, .is-offscreen, .is-tab-hidden) .partner-btn::before {
  animation-play-state: paused;
}

/* --- keyframes ----------------------------------------------------------- */
@keyframes hx-fade { from { opacity: 0; } }
@keyframes hx-word-in { from { opacity: 0; translate: -24px 0; } }
@keyframes hx-portrait-in { from { opacity: 0; scale: 1.025; } }
@keyframes hx-right-in { from { opacity: 0; translate: 24px 0; } }
@keyframes hx-up-in { from { opacity: 0; translate: 0 16px; } }
@keyframes hx-card-in { from { opacity: 0; translate: 0 12px; } }
@keyframes hx-burst-in { from { opacity: 0; scale: 0.9; } }
@keyframes hx-burst {
  0% { opacity: 0.78; scale: 1; translate: 0 0; }
  45% { opacity: 1; scale: 1.06; translate: 0.6% -0.8%; }
  100% { opacity: 0.86; scale: 1.02; translate: -0.6% 0.4%; }
}
@keyframes hx-rooster {
  0% { opacity: 0.85; scale: 1; }
  50% { opacity: 1; scale: 1.015; }
  100% { opacity: 0.9; scale: 1.005; }
}
@keyframes hx-word-drift {
  from { translate: -14px 0; }
  to { translate: 14px 0; }
}
@keyframes hx-light {
  0% { opacity: 0.78; translate: -2% 1%; scale: 1; }
  50% { opacity: 1; translate: 1.5% -1.5%; scale: 1.04; }
  100% { opacity: 0.86; translate: 2% 1%; scale: 0.98; }
}
@keyframes hx-smoke {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes hx-particle {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  15%, 75% { opacity: var(--o); }
  100% { opacity: 0; transform: translate3d(var(--dx), -34vh, 0); }
}
@keyframes hx-rim-sweep {
  0% { translate: -200% 0; }
  14%, 100% { translate: 480% 0; }
}
@keyframes hx-sheen {
  0% { translate: -180% 0; }
  9.5%, 100% { translate: 560% 0; }
}

/* --- tablet -------------------------------------------------------------- */
/* Photos side by side on top (portrait + full body), name and next fight below,
   so the two columns never collide; height follows the content. */
@media (min-width: 768px) and (max-width: 1199px) {
  .hero--home { min-height: 0; padding-bottom: 78px; }
  .hero--home .hero-inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas:
      "portrait body"
      "copy     card";
    gap: 0 28px;
    padding-top: 4px;
  }
  .hero--home .hero-portrait { width: 100%; height: auto; aspect-ratio: 1238 / 1271; }
  /* The portrait sets the row height; the full body fills it (and a little above)
     without feeding its own tall aspect ratio back into the grid. */
  .hero--home .hero-fullbody { align-self: stretch; height: auto; }
  .hero--home .hero-fullbody .hero-px { position: absolute; inset: -14% 0 0; width: auto; height: auto; }
  .hero--home .hero-fullbody img { height: 100%; }
  .hero--home .hero-copy { align-self: start; margin-top: -10vw; }
  .hero--home .hero-cta-stack { align-self: start; margin-top: 18px; }

  .hero--home .hero-wordmark {
    left: calc(var(--bleed) + 2vw);
    top: calc(var(--bleed) + var(--header-h) - 6px);
    width: 82vw;
  }
  .hero--home .hero-layer--light { --bx: 28%; --by: calc(var(--header-h) + 22vw); --bw: 120vw; }
  .hero--home .hero-rooster { --rx: 54%; --ry: calc(var(--header-h) - 1vw); --rw: 88vw; opacity: 0.6; }
  /* Shade behind the name block so the bronze slogan stays legible over the glow */
  .hero--home .hero-bg-overlay {
    background:
      radial-gradient(ellipse 48% 20% at 24% 52%, rgba(7, 7, 7, 0.78), transparent 100%),
      linear-gradient(180deg, rgba(7, 7, 7, 0.6) 0%, rgba(7, 7, 7, 0.1) 22%, rgba(7, 7, 7, 0.3) 60%, rgba(7, 7, 7, 0.92) 92%, var(--hx-bg) 100%);
  }
  .hero--home .hero-tagline,
  .hero--home .hero-eyebrow { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95)); }
  .hero--home .hero-light--portrait { left: 2%; top: 8%; width: 62%; height: 46%; }
  .hero--home .hero-light--body { left: 58%; top: 6%; width: 44%; height: 48%; }
  .hero--home .hero-smoke--back { left: 0; top: 22%; width: 64%; height: 36%; }
  .hero--home .hero-smoke--base {
    top: 28%;
    bottom: auto;
    height: 26%;
    -webkit-mask-image: linear-gradient(to top, transparent, #000 35%, #000 55%, transparent);
    mask-image: linear-gradient(to top, transparent, #000 35%, #000 55%, transparent);
  }
  .hero--home .hero-particles i:nth-child(n + 11) { display: none; }

  .hero-motion-toggle { right: var(--edge); bottom: 18px; }
}

/* --- phone --------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero--home .hero-inner { display: flex; flex-direction: column; }
  .hero--home .hero-portrait { order: 1; margin-bottom: 0; width: min(380px, 92vw); }
  .hero--home .hero-copy { order: 2; margin-top: -16vw; }
  .hero--home .hero-cta-stack { order: 3; }

  .hero--home .hero-wordmark {
    left: calc(var(--bleed) - 4vw);
    top: calc(var(--bleed) + var(--header-h) + 6vw);
    width: 108vw;
    opacity: 0.62;
  }
  .hero--home .hero-grid,
  .hero--home .hero-smoke--back,
  .hero--home .hero-light--body { display: none; }
  .hero--home .hero-bg-img { object-position: 36% center; }
  /* Tall phone hero: keep the glow behind the portrait, darken behind the name */
  .hero--home .hero-bg-overlay {
    background: linear-gradient(180deg, rgba(7, 7, 7, 0.55) 0%, rgba(7, 7, 7, 0.08) 14%, rgba(7, 7, 7, 0.2) 30%, rgba(7, 7, 7, 0.82) 42%, rgba(7, 7, 7, 0.86) 82%, var(--hx-bg) 100%);
  }
  .hero--home .hero-layer--light {
    -webkit-mask-image: linear-gradient(180deg, #000 32%, transparent 46%);
    mask-image: linear-gradient(180deg, #000 32%, transparent 46%);
  }
  .hero--home .hero-tagline,
  .hero--home .hero-eyebrow { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95)); }
  .hero--home .hero-layer--light { --bx: 50%; --by: calc(var(--header-h) + 40vw); --bw: 190vw; }
  .hero--home .hero-rooster { --rx: 72%; --ry: calc(var(--header-h) + 6vw); --rw: 132vw; opacity: 0.5; }
  .hero--home .hero-light--portrait { left: 6%; top: 4%; width: 88%; height: 34%; }
  .hero--home .hero-light span,
  .hero--home .hero-burst img,
  .hero--home .hero-rooster img { animation: none; }
  .hero--home .hero-smoke--base { height: 22%; opacity: 0.26; }
  .hero--home .hero-smoke--base span { animation-duration: 48s; }
  .hero--home .hero-particles i:nth-child(n + 6) { display: none; }

  .hero--home .action-btn { min-height: 64px; }
  .hero--home .hero-bottom-bar a { min-height: 44px; }

  .hero--home { min-height: 0; padding-bottom: 84px; }
  .hero-motion-toggle { right: 20px; bottom: 22px; width: 44px; height: 44px; }
}

/* --- reduced motion: static composition ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero--home *,
  .hero--home *::before,
  .hero--home *::after { animation: none !important; }
  .hero--home .hero-particles,
  .hero-motion-toggle { display: none; }
}