/* ==========================================================================
   THE HELLFIGHTER — site stylesheet
   Nidobrand build. Tokens first, then base, then components, then pages.
   ========================================================================== */

/* --------------------------------------------------------------- fonts ---
   Self-hosted (SIL Open Font License) so the site has no third-party
   font request and no flash of fallback text.                            */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/anton-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-semi-condensed-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2');
}

:root {
  /* Ink */
  --ink:        #080706;
  --ink-2:      #0d0b09;
  --ink-3:      #141110;

  /* Bone / type */
  --bone:       #e2d6bb;
  --bone-hi:    #ffffff;
  --bone-1:     #b7a894;
  --bone-2:     #9d9082;
  /* bone-3 5.40:1 and bone-4 4.85:1 on --ink — both clear WCAG AA. */
  --bone-3:     #8d8375;
  --bone-4:     #857b6e;

  /* Fire */
  --fire:       #d4462c;
  --fire-hi:    #e2622c;
  --amber:      #e2a02c;

  /* Rules */
  --rule:       rgba(226, 214, 187, .14);
  --rule-2:     rgba(226, 214, 187, .24);

  /* Type */
  --display: Anton, "Arial Narrow", Impact, sans-serif;
  --body: "Barlow Semi Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Body scale. Five steps instead of every integer from 12 to 19, so two
     things that do the same job are never one pixel apart. */
  --fs-xs:   13px;   /* fine print, nav, footer nav, social, meta */
  --fs-sm:   15px;   /* uppercase labels and eyebrows */
  --fs-base: 17px;   /* secondary prose: answers, captions, disclaimer */
  --fs-md:   19px;   /* primary prose */
  --fs-lg:   clamp(19px, 1.7vw, 24px);

  /* Leading. One value per role, not per element. */
  --lh-tight: 1.35;  /* short uppercase lines */
  --lh-ui:    1.5;   /* UI text and single-line copy */
  --lh-prose: 1.62;  /* anything read in paragraphs */

  /* Uppercase tracking. Three tracks, chosen by how small the text is. */
  --tr-label:   .26em;  /* nav, footer nav, social, spec terms, meta */
  --tr-eyebrow: .4em;   /* section eyebrows, kickers, hero eyebrow */
  --tr-btn:     .12em;

  /* Layout */
  --wrap: 1180px;
  --wrap-wide: 1400px;
  --gutter: clamp(20px, 4vw, 28px);
  /* Nav height = the content band plus a strip of air above it, so the
     wordmark never sits hard against the top of the browser window. */
  --nav-bar: 136px;
  --nav-pad: clamp(16px, 1.9vw, 24px);
  --nav-h: calc(var(--nav-bar) + var(--nav-pad));
  /* Height of the bar once it sticks — roughly half, to give the page back
     a fifth of the viewport. Anchors offset against this, not --nav-h. */
  --nav-stuck: 84px;
}

/* --------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--bone); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--fire-hi); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0;
  line-height: .95;
}

p { text-wrap: pretty; }

::selection { background: var(--fire); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--fire-hi);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--fire); color: var(--ink); padding: 12px 20px;
  font-family: var(--display); letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--wrap-wide); }

.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;
}

/* ---------------------------------------------------------- animation --- */

@keyframes hfKen   { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@keyframes hfRise  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hfGlow  { 0%, 100% { opacity: .42; } 50% { opacity: .78; } }
@keyframes hfEmber { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 100% { transform: translate(30px, -88vh); opacity: 0; } }
@keyframes hfBar   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hfSpin  { to { transform: rotate(360deg); } }

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ ember fx --- */

.embers {
  position: absolute; inset: auto 0 0 0; height: 60vh;
  pointer-events: none; overflow: hidden; z-index: 1;
}
.embers i {
  position: absolute; bottom: -10px; border-radius: 50%;
  animation: hfEmber linear infinite;
}

/* ---------------------------------------------------------------- nav --- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  padding-top: var(--nav-pad);
  display: flex; align-items: center;
  background: rgba(8, 7, 6, 0);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease,
              height .35s ease, padding-top .35s ease;
}
.nav.is-stuck {
  /* Height set directly: the hero and page-hero keep padding off --nav-h,
     so shrinking the bar does not move the content beneath it. */
  height: var(--nav-stuck);
  padding-top: 0;
  background: rgba(8, 7, 6, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
}
.nav__inner {
  width: 100%; max-width: var(--wrap-wide); margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* One wordmark per page, not three. The full lockup reads over the hero;
   once the bar sticks it hands off to the H, so the chrome never collides
   with the title card in the fire band or repeat itself in the footer. */
.nav__logo { position: relative; display: block; flex-shrink: 0; line-height: 0; }
/* Sized by height, not width, so the wordmark always sits centred in the bar
   with even air above and below instead of touching the browser edge. */
.nav__wordmark {
  height: clamp(60px, 6.8vw, 88px); width: auto;
  transition: height .35s ease, opacity .3s ease;
}
.nav__mark {
  position: absolute; left: 0; top: 50%;
  height: clamp(38px, 3.6vw, 46px); width: auto;
  transform: translateY(-50%);
  opacity: 0; transition: opacity .3s ease;
}
/* The wordmark keeps its box while fading, so the hit area stays generous
   and the links do not shift sideways on the handoff. */
.nav.is-stuck .nav__wordmark { height: clamp(38px, 3.6vw, 46px); opacity: 0; }
.nav.is-stuck .nav__mark { opacity: 1; }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav__link {
  font-size: var(--fs-xs); letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--bone-2); position: relative; padding: 6px 0; white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--fire); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--bone); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Way back out to the Station 13 Comics landing page. Set apart from the
   site's own links by a short fire-coloured divider (a rule under it in the
   mobile menu). */
.nav__station {
  --sep: clamp(18px, 2.4vw, 34px);
  padding-right: var(--sep);
  background: linear-gradient(var(--fire), var(--fire)) right center / 1px 14px no-repeat;
}
.nav__station::after { right: var(--sep); }
.nav__station-arrow { display: inline-block; transition: transform .25s ease; }
.nav__station:hover .nav__station-arrow { transform: translateX(-3px); }
.nav__station-full { display: none; }

.nav__cta {
  white-space: nowrap;
  font-family: var(--display); font-size: 14px; letter-spacing: var(--tr-btn);
  text-transform: uppercase; color: var(--ink); background: var(--fire);
  padding: 12px 22px; border: 1px solid var(--fire);
  transition: background .25s ease, border-color .25s ease;
}
.nav__cta:hover { background: var(--fire-hi); border-color: var(--fire-hi); color: var(--ink); }

.nav__toggle {
  display: none; background: none; border: 0; padding: 10px; cursor: pointer;
  width: 46px; height: 44px;
}
.nav__toggle span {
  display: block; height: 2px; background: var(--bone); margin: 5px 0;
  transition: transform .3s ease, opacity .25s ease;
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1220px) { /* nav only: the full link row needs ~1200px */
  :root { --nav-bar: 104px; --nav-stuck: 68px; }
  .nav__toggle { display: block; }
  .nav.is-open { background: rgba(8, 7, 6, .96); backdrop-filter: blur(10px); }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(8, 7, 6, .98);
    border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter) 30px;
    transform: translateY(-12px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }
  .nav.is-stuck .nav__links { inset-block-start: var(--nav-stuck); }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .nav__link { padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
  .nav__station { padding-right: 0; background: none; border-bottom: 2px solid var(--fire); }
  .nav__station::after { display: none; }
  .nav__station-full { display: inline; }
  .nav__cta { margin-top: 22px; text-align: center; padding: 16px 22px; font-size: 16px; }
}

/* --------------------------------------------------------- section rule --- */

/* Section headings. Constrained to the narrow measure and centred, so a heading
   in a wrap--wide section starts on exactly the same left edge as one in a
   normal section — every title on the site lines up down one axis. */
.rule {
  display: flex; align-items: baseline; justify-content: flex-start;
  width: 100%; max-width: calc(var(--wrap) - var(--gutter) * 2);
  margin-inline: auto;
  margin-bottom: clamp(40px, 6vw, 70px);
}
.rule__label {
  font-family: var(--body); font-weight: 500; line-height: var(--lh-tight);
  font-size: var(--fs-sm); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--bone-3);
}

/* Anchored sections land below the fixed bar instead of behind it. */
:where(section, .band)[id] { scroll-margin-top: calc(var(--nav-stuck) + 24px); }

.section { padding-block: clamp(78px, 11vw, 130px); }
.section--tight { padding-block: clamp(56px, 8vw, 96px); }

/* --------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  min-height: 640px; height: 100svh;
  padding: calc(var(--nav-h) + 28px) 0 56px;
  overflow: hidden;
  display: grid; place-items: center;
}
.hero__bg {
  position: absolute; inset: 0; overflow: hidden;
  z-index: 0; isolation: isolate;
}
/* The plate never moves. He stands still; only the weather does. */
.hero__plate {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  filter: saturate(.92) contrast(1.05);
}
.hero__scrim-1 {
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 30%, rgba(8,7,6,.22) 0%, rgba(8,7,6,.7) 55%, var(--ink) 100%);
}
.hero__scrim-2 {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,7,6,.88) 0%, rgba(8,7,6,0) 30%, rgba(8,7,6,.12) 58%, var(--ink) 100%);
}
.hero__body {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); height: 100%;
  padding-inline: var(--gutter);
  padding-bottom: clamp(64px, 16vh, 200px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: clamp(14px, 2.6vh, 30px); text-align: center;
}
.hero__eyebrow {
  font-size: clamp(var(--fs-xs), 1.1vw, 16px); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--bone-1);
  animation: hfRise 1.1s .6s ease-out both;
}
.hero__line {
  margin: 0; max-width: 780px;
  font-size: clamp(var(--fs-md), 2vw, 30px); line-height: var(--lh-ui); color: var(--bone-1);
  animation: hfRise 1.2s .9s ease-out both;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: clamp(6px, 1.4vh, 16px);
  animation: hfRise 1.2s 1.15s ease-out both;
}

/* Scroll cue. Sits under the actions and fades out the moment the page moves,
   so it never competes with the copy once the visitor is already going. */
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(18px, 3.4vh, 34px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: var(--fs-xs); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--bone-3);
  animation: hfRise 1.2s 1.5s ease-out both;
  transition: opacity .4s ease;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 38px;
  background: linear-gradient(180deg, var(--bone-3) 0%, rgba(226,214,187,0) 100%);
  animation: hfCue 2.4s ease-in-out infinite;
}
.is-scrolled .hero__scroll { animation: none; opacity: 0; pointer-events: none; }
@keyframes hfCue {
  0%, 100% { transform: scaleY(.5); transform-origin: top; opacity: .5; }
  50%      { transform: scaleY(1);  transform-origin: top; opacity: 1; }
}

@media (max-width: 619px) {
  .hero { min-height: 620px; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__scroll { display: none; }
}

/* page hero (interior pages) */
.phero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(70px, 12vw, 130px)) 0 clamp(50px, 8vw, 88px);
  border-bottom: 1px solid var(--rule);
}
.phero__bg { position: absolute; inset: 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(.8); }
.phero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,7,6,.92) 0%, rgba(8,7,6,.72) 45%, var(--ink) 100%);
}
.phero__inner { position: relative; z-index: 2; }
.phero h1 { font-size: clamp(46px, 8.5vw, 104px); color: var(--bone); }
.phero p {
  margin: 22px 0 0; max-width: 620px;
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; color: var(--bone-2);
}
.phero__kicker {
  font-size: var(--fs-sm); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--fire); margin-bottom: 22px;
}

/* -------------------------------------------------------------- button --- */

.btn {
  display: inline-block; text-align: center;
  font-family: var(--display);
  font-size: clamp(16px, 1.3vw, 20px); letter-spacing: var(--tr-btn); text-transform: uppercase;
  padding: 18px 36px; border: 1px solid var(--fire);
  background: var(--fire); color: var(--ink);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.btn:hover { background: var(--fire-hi); border-color: var(--fire-hi); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--bone); border-color: var(--rule-2); }
.btn--ghost:hover { background: transparent; border-color: var(--bone); color: var(--bone-hi); }
.btn--sm { font-size: 15px; padding: 13px 26px; }

/* ------------------------------------------------------------- story ---- */

.story { display: grid; gap: clamp(50px, 7vw, 84px); }
.story__row {
  display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: start;
}
.story__row h3 { font-size: clamp(28px, 3vw, 34px); color: var(--bone); }
.story__row--accent h3 { color: var(--fire); }
.story__row p {
  margin: 0; max-width: 640px;
  font-size: var(--fs-lg); line-height: var(--lh-prose); color: var(--bone-1);
}
@media (max-width: 760px) {
  .story__row { grid-template-columns: 1fr; gap: 16px; }
}

/* -------------------------------------------------------------- stats --- */

.lede {
  margin: 0 0 clamp(44px, 6vw, 66px); max-width: 720px;
  font-size: clamp(var(--fs-md), 1.5vw, 21px); line-height: var(--lh-prose); color: var(--bone-2);
}
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 34px 30px;
}
@media (max-width: 1024px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .stats { grid-template-columns: 1fr; } }
.stat { border-top: 1px solid var(--rule-2); padding-top: 28px; }
.stat__num {
  font-family: var(--display); font-size: clamp(46px, 5vw, 62px); line-height: .9; color: var(--fire);
}
.stat__label { margin-top: 14px; font-size: var(--fs-base); line-height: var(--lh-prose); color: var(--bone-2); }

/* --------------------------------------------------------- band image --- */

/* Sized to the artwork's own aspect so the title treatment is held almost
   whole instead of being cropped to a letterbox strip. */
.band {
  position: relative; overflow: hidden;
  aspect-ratio: var(--band-ratio, 16 / 9);
  max-height: 88vh; min-height: 300px;
}
.band--skyline { --band-ratio: 1920 / 753; }
.band--city    { --band-ratio: 1884 / 1068; }
.band picture { display: block; height: 100%; }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Feathered top and bottom only — the middle of the frame stays clear so the
   wordmark reads at full strength. */
.band__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    var(--ink) 0%,
    rgba(8,7,6,.45) 9%,
    rgba(8,7,6,0) 20%,
    rgba(8,7,6,0) 78%,
    rgba(8,7,6,.5) 92%,
    var(--ink) 100%);
}

/* ----------------------------------------------------------- live fire ---
   The flicker is a warm layer masked by the fire pixels lifted straight out
   of the artwork, so the glow sits exactly on the painted flames rather than
   near them. Three vertical slices, each on its own irregular clock, so the
   fire line never pulses as one. Masks are ~5KB greyscale PNGs. */

.band__fire {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: screen;
}
.band__fire span {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #ffc457 0%, #ff8c22 55%, #ff5a12 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: cover;       mask-size: cover;
  animation: hfFlicker linear infinite;
  will-change: opacity;
}

/* Uneven steps — a steady sine reads mechanical, fire does not. */
@keyframes hfFlicker {
  0%   { opacity: .16; }
  9%   { opacity: .74; }
  17%  { opacity: .38; }
  26%  { opacity: 1;   }
  35%  { opacity: .52; }
  44%  { opacity: .86; }
  52%  { opacity: .24; }
  61%  { opacity: .92; }
  70%  { opacity: .44; }
  79%  { opacity: 1;   }
  88%  { opacity: .34; }
  100% { opacity: .16; }
}

/* A second, hotter pass over the same masks — fast crackle on top of the slow
   breathe, which is what stops it reading as a single pulsing glow. */
.band__fire span:nth-child(n+4) {
  background: linear-gradient(180deg, #fff0c4 0%, #ffbe4a 45%, #ff7d1a 100%);
  animation-name: hfCrackle;
}
@keyframes hfCrackle {
  0%   { opacity: .06; }
  11%  { opacity: .46; }
  19%  { opacity: .12; }
  30%  { opacity: .58; }
  39%  { opacity: .10; }
  51%  { opacity: .40; }
  63%  { opacity: .16; }
  74%  { opacity: .62; }
  86%  { opacity: .14; }
  100% { opacity: .06; }
}

.band--skyline .band__fire span:nth-child(3n+1) { -webkit-mask-image: url("/assets/img/skyline-fire-0.png?v=10"); mask-image: url("/assets/img/skyline-fire-0.png?v=10"); }
.band--skyline .band__fire span:nth-child(3n+2) { -webkit-mask-image: url("/assets/img/skyline-fire-1.png?v=10"); mask-image: url("/assets/img/skyline-fire-1.png?v=10"); }
.band--skyline .band__fire span:nth-child(3n+3) { -webkit-mask-image: url("/assets/img/skyline-fire-2.png?v=10"); mask-image: url("/assets/img/skyline-fire-2.png?v=10"); }

.band--city .band__fire span:nth-child(3n+1) { -webkit-mask-image: url("/assets/img/title-city-fire-0.png?v=10"); mask-image: url("/assets/img/title-city-fire-0.png?v=10"); }
.band--city .band__fire span:nth-child(3n+2) { -webkit-mask-image: url("/assets/img/title-city-fire-1.png?v=10"); mask-image: url("/assets/img/title-city-fire-1.png?v=10"); }
.band--city .band__fire span:nth-child(3n+3) { -webkit-mask-image: url("/assets/img/title-city-fire-2.png?v=10"); mask-image: url("/assets/img/title-city-fire-2.png?v=10"); }

/* Slow breathe */
.band__fire span:nth-child(1) { animation-duration: 3.7s; animation-delay: -0.4s; }
.band__fire span:nth-child(2) { animation-duration: 4.9s; animation-delay: -2.1s; }
.band__fire span:nth-child(3) { animation-duration: 4.3s; animation-delay: -3.3s; }
/* Fast crackle */
.band__fire span:nth-child(4) { animation-duration: 1.35s; animation-delay: -0.2s; }
.band__fire span:nth-child(5) { animation-duration: 1.05s; animation-delay: -0.7s; }
.band__fire span:nth-child(6) { animation-duration: 1.62s; animation-delay: -1.1s; }

/* Embers and fire dust lifting off the ruin line. Each spark gets its own
   drift, rise, brightness and lifetime from site.js, so no two share a path. */
.embers--band { inset: 0; height: 100%; }
.embers--band i {
  bottom: 26%;
  animation-name: hfEmberShort;
  animation-timing-function: cubic-bezier(.35, .05, .55, .95);
}
@keyframes hfEmberShort {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: var(--peak, .85); }
  55%  { opacity: var(--peak, .85); }
  100% { transform: translate(var(--drift, 20px), var(--rise, -210px)) scale(.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .band__fire span { opacity: .6; }
}

/* On narrow screens let the artwork's own aspect win — cropping a wide band
   to a taller box would cut the ends off the wordmark. */
@media (max-width: 700px) {
  .band { min-height: 0; }
}

/* ---------------------------------------------------------- char split --- */

.split {
  display: grid; grid-template-columns: minmax(300px, 1.35fr) minmax(280px, .82fr);
  gap: clamp(32px, 4.5vw, 56px); align-items: center;
}
.split__art { position: relative; overflow: hidden; }
.split__art::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 90px 30px rgba(8,7,6,.55);
}
.split h3 { font-size: clamp(40px, 5vw, 56px); color: var(--bone); }
.split__bar {
  height: 2px; width: 74px; background: var(--fire);
  margin: 24px 0 28px; transform-origin: left;
}
.split p { margin: 0 0 28px; font-size: clamp(var(--fs-base), 1.5vw, 20px); line-height: var(--lh-prose); color: var(--bone-1); }
.specs { display: grid; gap: 18px; font-size: var(--fs-base); line-height: var(--lh-prose); }
.spec { display: grid; grid-template-columns: 104px 1fr; gap: 16px; }
.spec dt {
  font-size: var(--fs-sm); letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--bone-4); margin: 0;
}
.spec dd { margin: 0; color: var(--bone-1); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- roster --- */

.roster {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1000px) { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px)  { .roster { grid-template-columns: 1fr; } }
.card {
  position: relative; overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--ink-2);
  transition: border-color .35s ease, transform .35s ease;
}
.card:hover { border-color: var(--rule-2); }
.card__art { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.card__art img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16,.84,.28,1);
}
.card:hover .card__art img { transform: scale(1.05); }
.card__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,7,6,0) 40%, rgba(8,7,6,.9) 100%);
}
.card__body { padding: 22px 24px 26px; }
.card__name { font-size: 26px; line-height: var(--lh-tight); color: var(--bone); }
.card__role {
  margin-top: 8px; font-size: 12px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--fire);
}
.card__copy { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--bone-2); }

.card--locked .card__art { background: var(--ink-3); display: grid; place-items: center; }
.card--locked .card__art::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(226,214,187,.035) 0 12px, rgba(226,214,187,0) 12px 24px);
}
.card--locked .card__seal {
  position: relative; z-index: 2;
  font-family: var(--display); font-size: clamp(40px, 8vw, 64px);
  color: rgba(226,214,187,.09); letter-spacing: .1em;
}
.card--locked .card__name { color: var(--bone-3); }

/* -------------------------------------------------------------- gallery --- */

.grid-art { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.grid-art figure { margin: 0; overflow: hidden; position: relative; }
.grid-art img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16,.84,.28,1);
}
.grid-art figure:hover img { transform: scale(1.045); }

/* Captions sit on the image rather than under it, so the mosaic stays flush
   and the text is there on touch instead of waiting for a hover. */
.grid-art figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 44px 16px 14px;
  font-size: var(--fs-xs); line-height: var(--lh-ui);
  letter-spacing: .01em; color: var(--bone);
  /* Weighted so the text band itself sits on ~.86 ink — bone stays above 4.5:1
     even where the frame behind it is blown out. */
  background: linear-gradient(180deg,
    rgba(8,7,6,0) 0%, rgba(8,7,6,.62) 34%, rgba(8,7,6,.92) 62%, rgba(8,7,6,.96) 100%);
  text-shadow: 0 1px 3px rgba(8,7,6,.9);
  pointer-events: none;
}
@media (max-width: 480px) {
  .grid-art figcaption { padding: 34px 12px 11px; }
}
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
@media (max-width: 860px) {
  .grid-art { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-3, .span-4, .span-6 { grid-column: span 2; }
}

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 300;
  background: #050404;
  display: none; place-items: center; padding: 5vh 5vw 70px;
}
.lb.is-open { display: grid; }
.lb__figure { margin: 0; display: grid; justify-items: center; gap: 16px; max-width: 100%; }
.lb img { max-width: 100%; max-height: 78vh; object-fit: contain; }
.lb figcaption {
  max-width: 62ch; text-align: center;
  font-size: var(--fs-base); line-height: var(--lh-ui); color: var(--bone-2);
}
.lb figcaption:empty { display: none; }
.lb__close {
  position: absolute; top: 18px; right: 22px;
  background: none; border: 0; color: var(--bone); cursor: pointer;
  font-family: var(--display); font-size: 22px; letter-spacing: .1em;
}
.lb__close:hover { color: var(--fire-hi); }

/* Stepping through the set. Backed with ink so the arrows stay readable
   wherever they land on the frame. */
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  font-family: var(--body); font-size: 24px; line-height: 1;
  background: rgba(8, 7, 6, .74); border: 1px solid var(--rule-2);
  color: var(--bone); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.lb__nav:hover { background: rgba(8, 7, 6, .86); border-color: var(--fire); color: var(--fire-hi); }
.lb__nav--prev { left: max(14px, 2vw); }
.lb__nav--next { right: max(14px, 2vw); }

.lb__count {
  position: absolute; left: 0; right: 0; bottom: 22px; margin: 0;
  text-align: center;
  font-size: var(--fs-xs); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--bone-3);
}

@media (max-width: 620px) {
  /* Thumb reach beats symmetry on a phone: both arrows drop to the bottom. */
  .lb { padding: 6vh 4vw 96px; }
  .lb__nav { width: 52px; height: 52px; top: auto; bottom: 56px; transform: none; }
  .lb__nav--prev { left: 16px; }
  .lb__nav--next { right: 16px; }
  .lb__count { bottom: 20px; }
}

/* -------------------------------------------------------------- teaser --- */

.teaser-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  border: 1px solid var(--rule); padding: 28px 32px;
  transition: border-color .3s ease, background .3s ease;
}
.teaser-cta:hover { border-color: var(--fire); background: rgba(212, 70, 44, .05); }
.teaser-cta__title { font-family: var(--display); font-size: clamp(21px, 2.4vw, 26px); letter-spacing: .04em; text-transform: uppercase; color: var(--bone); }
.teaser-cta__meta { font-size: 14px; letter-spacing: .28em; text-transform: uppercase; color: var(--fire); }

.video-frame {
  display: block;
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--rule); background: var(--ink-2);
}
.video-frame picture { display: block; height: 100%; }
.video-frame img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.video-frame__play {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 16px;
  justify-items: center; text-align: center;
  background: linear-gradient(180deg, rgba(8,7,6,.25), rgba(8,7,6,.72));
}
.video-frame__disc {
  width: 78px; height: 78px; border-radius: 50%;
  border: 1px solid var(--rule-2); display: grid; place-items: center;
  transition: border-color .3s ease, background .3s ease;
}
.video-frame:hover .video-frame__disc { border-color: var(--fire); background: rgba(212,70,44,.14); }
.video-frame__disc::after {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 18px solid var(--bone);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.video-frame__label { font-size: var(--fs-xs); letter-spacing: .38em; text-transform: uppercase; color: var(--bone-2); }
.video-frame.is-playing { cursor: default; }
.video-frame.is-playing .video-frame__play { display: none; }
.video-frame:focus-visible { outline: 2px solid var(--fire-hi); outline-offset: 3px; }
.video-frame[data-video] { cursor: pointer; }

/* The date, stated under the frame the way the site states everything else. */
.teaser-meta {
  margin: 22px 0 0; text-align: center;
  font-size: 14px; letter-spacing: .28em; text-transform: uppercase; color: var(--fire);
}

/* ------------------------------------------------------------ timeline --- */

.timeline { position: relative; display: grid; gap: 0; }
.timeline__item {
  position: relative;
  display: grid; grid-template-columns: 150px 1fr; gap: clamp(24px, 4vw, 48px);
  padding: 34px 0;
  border-top: 1px solid var(--rule);
}
.timeline__item:last-child { border-bottom: 1px solid var(--rule); }
.timeline__year {
  font-family: var(--display); font-size: clamp(28px, 3.4vw, 40px);
  color: var(--fire); line-height: 1;
}
.timeline__body h3 { font-size: clamp(21px, 2.2vw, 26px); color: var(--bone); margin-bottom: 12px; }
.timeline__body p { margin: 0; font-size: var(--fs-base); line-height: var(--lh-prose); color: var(--bone-2); max-width: 660px; }

/* A frame beside the beat it illustrates. Only four of the seven carry art —
   the two hardest beats run as text on purpose, and the gaps set the rhythm. */
.timeline__item--art { grid-template-columns: 150px minmax(0, 1fr) clamp(190px, 21vw, 280px); }
.timeline__art {
  margin: 0; overflow: hidden; position: relative;
  aspect-ratio: 16 / 10; align-self: start;
}
.timeline__art img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.timeline__art:focus-visible { outline: 2px solid var(--fire-hi); outline-offset: 3px; }
.timeline__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,7,6,0) 55%, rgba(8,7,6,.45) 100%);
}

.rule__note {
  margin: -22px 0 clamp(36px, 5vw, 56px);
  font-size: var(--fs-xs); line-height: var(--lh-ui);
  color: var(--bone-4); letter-spacing: .04em;
}

@media (max-width: 900px) {
  /* Below the three-column width the frame drops under the copy, full width. */
  .timeline__item--art { grid-template-columns: 150px minmax(0, 1fr); }
  .timeline__art { grid-column: 2; margin-top: 22px; aspect-ratio: 16 / 9; }
}
@media (max-width: 700px) {
  .timeline__item, .timeline__item--art { grid-template-columns: 1fr; gap: 10px; }
  .timeline__art { grid-column: 1; }
}

/* ----------------------------------------------------------------- faq --- */

.faq { display: grid; }
.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 0; text-align: left;
  font-family: var(--display); font-size: clamp(18px, 2vw, 23px);
  letter-spacing: .02em; text-transform: uppercase; color: var(--bone);
  transition: color .25s ease;
}
.faq__q:hover { color: var(--fire-hi); }
.faq__sign {
  flex-shrink: 0; width: 16px; height: 16px; position: relative;
}
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; background: var(--fire);
  left: 0; top: 7px; width: 16px; height: 2px;
  transition: transform .3s ease;
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item.is-open .faq__sign::after { transform: rotate(0deg); }
.faq__a {
  overflow: hidden; max-height: 0;
  transition: max-height .45s cubic-bezier(.16,.84,.28,1);
}
.faq__a p {
  margin: 0 0 26px; max-width: 720px;
  font-size: var(--fs-base); line-height: var(--lh-prose); color: var(--bone-2);
}

/* -------------------------------------------------------------- notify --- */

.notify {
  position: relative; overflow: hidden;
  padding: clamp(90px, 13vw, 140px) var(--gutter) clamp(80px, 11vw, 120px);
  text-align: center;
}
.notify__glow {
  position: absolute; left: 50%; top: 0; width: min(900px, 130vw); height: 500px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 60%, rgba(212,70,44,.18) 0%, rgba(8,7,6,0) 100%);
  animation: hfGlow 7s ease-in-out infinite;
}
.notify__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.notify__kicker { font-size: var(--fs-sm); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--bone-3); }
.notify h2 {
  margin: 24px 0 0; font-size: clamp(56px, 10vw, 92px); line-height: .88; color: var(--bone);
}
.notify h2 span { color: var(--fire); }
.notify__copy { margin: 26px auto 0; max-width: 470px; font-size: var(--fs-md); line-height: var(--lh-prose); color: var(--bone-2); }

.form {
  margin: 34px auto 0; display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center; max-width: 520px;
}
.form input[type="email"], .form input[type="text"], .form textarea {
  flex: 1 1 260px; min-width: 0;
  background: transparent; border: 1px solid var(--rule-2); color: var(--bone);
  font-family: var(--body); font-size: 17px; padding: 15px 18px; outline: none;
  transition: border-color .25s ease;
}
.form input::placeholder, .form textarea::placeholder { color: var(--bone-4); }
.form input:focus, .form textarea:focus { border-color: var(--fire); }
.form__status {
  margin-top: 18px; min-height: 24px;
  font-size: 15px; letter-spacing: .06em; color: var(--fire);
}
.form__status[data-state="error"] { color: var(--amber); }
.form__hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.form__fine { margin-top: 14px; font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--bone-4); letter-spacing: .04em; }

.is-sending .btn { opacity: .6; pointer-events: none; }

/* contact form (stacked) */
.form--stack { flex-direction: column; max-width: 620px; margin-inline: 0; align-items: stretch; }
.form--stack .field { display: grid; gap: 8px; text-align: left; }
.form--stack label { font-size: var(--fs-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--bone-3); }
.form--stack textarea { min-height: 150px; resize: vertical; }
.form--stack .btn { align-self: flex-start; }

.social {
  margin-top: 50px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  font-size: var(--fs-xs); letter-spacing: var(--tr-label); text-transform: uppercase;
}
/* Padded to a 44px target rather than sized by the cap-height of the word. */
.social a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }

/* ----------------------------------------------------------- cta rail --- */

/* A single conversion prompt mid-page, so the only route to the list is not
   4,600px down. Deliberately quiet: a rule, a line, a ghost button. */
.rail {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(30px, 4.4vw, 46px);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 22px 34px;
}
.rail p {
  margin: 0; max-width: 560px;
  font-size: clamp(var(--fs-base), 1.5vw, 20px); line-height: var(--lh-prose); color: var(--bone-1);
}
.rail strong { color: var(--bone); font-weight: 500; }
@media (max-width: 620px) {
  .rail { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------- footer --- */

.footer { border-top: 1px solid rgba(226,214,187,.12); padding: 52px var(--gutter) 64px; }
.footer__inner {
  max-width: var(--wrap); margin: 0 auto;
  /* auto, so the column hugs the mark instead of holding a wordmark's width */
  display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: start;
}
/* The H, not a third wordmark. Sized to sit level with the nav block. */
.footer__logo { width: auto; height: 84px; opacity: .9; }
.footer__nav {
  display: flex; flex-wrap: wrap; gap: 0 14px; margin-bottom: 18px;
  font-size: var(--fs-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--bone-3);
}
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin-left: -10px; }
.footer p { margin: 0; max-width: 560px; font-size: var(--fs-sm); line-height: var(--lh-prose); color: var(--bone-4); }
.footer p.footer__meta {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(226,214,187,.08);
  font-size: var(--fs-xs); line-height: var(--lh-ui);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--bone-4);
}
@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .footer__logo { height: 64px; }
}

/* ---------------------------------------------------------------- misc --- */

.notice {
  border: 1px solid var(--rule); border-left: 2px solid var(--fire);
  padding: 26px 28px; background: var(--ink-2);
}
.notice p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--bone-2); }
.notice p:last-child { margin-bottom: 0; }

.two-col {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.two-col p { font-size: 17px; line-height: 1.7; color: var(--bone-2); margin: 0 0 20px; }

.pull {
  font-family: var(--display); font-size: clamp(26px, 3.6vw, 42px); line-height: 1.15;
  color: var(--bone); text-transform: uppercase; max-width: 900px; margin: 0;
}
.pull cite { display: block; margin-top: 22px; font-family: var(--body); font-style: normal;
  font-size: 14px; letter-spacing: .28em; text-transform: uppercase; color: var(--fire); }

.presskit { display: grid; gap: 14px; }
.presskit a {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border: 1px solid var(--rule); padding: 20px 24px;
  font-size: 16px; letter-spacing: .04em;
  transition: border-color .3s ease, background .3s ease;
}
.presskit a:hover { border-color: var(--fire); background: rgba(212,70,44,.05); }
.presskit span:last-child { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--bone-3); }

/* Fire and sparks idle while the band is off screen (set by site.js). */
.band:not(.is-live) .band__fire span,
.band:not(.is-live) .embers i { animation-play-state: paused; }


/* ============================================================ hero motion ===
   The figure is a still plate — nothing about him moves at all. Over
   and behind him: cloud banks tracking left to right on a seamless loop, a slow
   churn behind them, and a seven-beat storm.
   The sky mask is cut from the artwork, so every layer lands on the paint. */

/* ------------------------------------------------------------- the sky --- */
/* The weather is masked by his silhouette, but the mask has a floor rather than
   a hard cut: over him the cloud thins to about a third instead of stopping
   dead. A hard edge reads as a hole punched in the sky; a floor reads as air
   passing in front of him, which is what it is. His own detail never shifts. */
.sky {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1;
  -webkit-mask-image: url("/assets/img/hero-figure-mask.png?v=22");
          mask-image: url("/assets/img/hero-figure-mask.png?v=22");
  -webkit-mask-size: cover;       mask-size: cover;
  -webkit-mask-position: 50% 32%; mask-position: 50% 32%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* Real cloud texture, generated as a tile that wraps on itself, so the drift is
   continuous with no seam and no reset. Each band is two viewport-widths wide
   carrying a tile exactly one viewport across; sliding it by one tile puts it
   back where it started. Three of them at three speeds gives the depth that
   makes it read as weather moving rather than a picture sliding. */
.sky__band {
  position: absolute; left: -100%; width: 200%; display: block;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  will-change: transform;
}
.sky__band--far {
  top: -8%; height: 118%;
  background-image: url("/assets/img/sky-lit.png?v=21");
  background-image: image-set(url("/assets/img/sky-lit.webp?v=21") type("image/webp"),
                              url("/assets/img/sky-lit.png?v=21")  type("image/png"));
  mix-blend-mode: screen; opacity: .26;
  animation: hfDrift 92s linear infinite;
}
.sky__band--near {
  top: -12%; height: 126%;
  background-image: url("/assets/img/sky-dark.png?v=21");
  background-image: image-set(url("/assets/img/sky-dark.webp?v=21") type("image/webp"),
                              url("/assets/img/sky-dark.png?v=21")  type("image/png"));
  opacity: .36;
  animation: hfDrift 50s linear infinite;
}
/* torn off the front of the squall, running ahead of the rest */
.sky__band--wisp {
  top: -6%; height: 110%;
  background-image: url("/assets/img/sky-wisp.png?v=21");
  background-image: image-set(url("/assets/img/sky-wisp.webp?v=21") type("image/webp"),
                              url("/assets/img/sky-wisp.png?v=21")  type("image/png"));
  mix-blend-mode: screen; opacity: .20;
  animation: hfDrift 30s linear infinite;
}
@keyframes hfDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(50%, 0, 0); }
}

/* the slow rotation underneath the drift — what makes it read as a system
   turning rather than a backdrop sliding past */
.sky__churn {
  position: absolute; left: 50%; top: -34%; width: 130%; aspect-ratio: 1; margin-left: -65%;
  background: conic-gradient(from 0deg,
    rgba(0,0,0,0) 0deg, rgba(128,114,102,.16) 62deg, rgba(0,0,0,0) 132deg,
    rgba(98,88,80,.13) 212deg, rgba(0,0,0,0) 292deg, rgba(142,126,110,.11) 342deg, rgba(0,0,0,0) 360deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.35) 52%, transparent 80%);
          mask-image: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.35) 52%, transparent 80%);
  mix-blend-mode: screen; opacity: .20;
  animation: hfChurn 150s linear infinite;
}
@keyframes hfChurn { to { transform: rotate(360deg); } }

.sky__burn {
  position: absolute; inset: 0;
  background: radial-gradient(58% 44% at 36% 24%, rgba(255,124,42,.26), transparent 66%);
  mix-blend-mode: screen;
  animation: hfGlow 13s ease-in-out infinite;
}

/* ------------------------------------------------ the layer behind him --- */
/* Lightning uses the HARD silhouette, with no floor. A bolt is a solid thing in
   front of the cloud, not haze, so it has to vanish completely behind him. Only
   the weather gets the floored mask. */
.behind {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2;
  -webkit-mask-image: url("/assets/img/hero-figure-hard.png?v=22");
          mask-image: url("/assets/img/hero-figure-hard.png?v=22");
  -webkit-mask-size: cover;       mask-size: cover;
  -webkit-mask-position: 50% 32%; mask-position: 50% 32%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* --------------------------------------------------------------- storm ---
   Six beats on one 30s clock, five seconds apart, so it repeats seamlessly:
   four forked strikes in four different parts of the sky, and two distant
   sheets that light the cloud without showing a channel. */
.strike { position: absolute; overflow: visible; opacity: 0; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 54%, transparent 93%);
          mask-image: linear-gradient(180deg, #000 0%, #000 54%, transparent 93%);
}
.strike path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.strike__aura { stroke: rgba(132,176,255,.10); stroke-width: 32; }
.strike__halo { stroke: rgba(176,206,255,.21); stroke-width: 12; }
.strike__core { stroke: #f6f9ff; stroke-width: 2.1; filter: drop-shadow(0 0 7px rgba(186,214,255,.95)); }

.strike--1 { left: 61%;  top: -10%; width: 16%; height: 68%; animation: hfZap 35s linear infinite; }
.strike--2 { left: 84%;  top: -8%;  width: 13%; height: 54%; animation: hfZap 35s linear -25s infinite; }
.strike--3 { left: -3%;  top: -12%; width: 12%; height: 42%; animation: hfZap 35s linear -20s infinite; }
.strike--4 { left: 71%;  top: -13%; width: 21%; height: 80%; animation: hfZap 35s linear -10s infinite; }
/* straight down the middle, behind him */
.strike--5 { left: 41%;  top: -14%; width: 18%; height: 58%; animation: hfZap 35s linear -5s infinite; }
.strike--5 .strike__core { stroke-width: 2.8; }
.strike--5 .strike__halo { stroke-width: 15; }
.strike--2 .strike__core { stroke-width: 1.6; }
.strike--3 .strike__core { stroke-width: 1.4; }
.strike--3 .strike__halo { stroke-width: 8; }
.strike--4 .strike__core { stroke-width: 2.6; }

@keyframes hfZap {
  0%, 100% { opacity: 0; }
  0.146% { opacity: 1; }
  0.386% { opacity: .12; }
  0.600% { opacity: .92; }
  0.857% { opacity: .05; }
  1.114% { opacity: .55; }
  1.586% { opacity: 0; }
}

/* sheet lightning — the strike is behind the cloud, so only the cloud lights */
.sheet { position: absolute; inset: 0; display: block; opacity: 0; mix-blend-mode: screen; }
.sheet--1 { background: radial-gradient(44% 34% at 78% 12%, rgba(198,218,255,.85), transparent 68%);
            animation: hfSheet 35s linear -30s infinite; }
.sheet--2 { background: radial-gradient(48% 30% at 20% 8%,  rgba(206,198,228,.75), transparent 70%);
            animation: hfSheet 35s linear -15s infinite; }
@keyframes hfSheet {
  0%, 100% { opacity: 0; }
  0.214% { opacity: .58; }
  0.771% { opacity: .18; }
  1.286% { opacity: .44; }
  2.914% { opacity: 0; }
}

/* the whole sky picks up every beat, at the strength that beat deserves */
.skyflash {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(196,216,255,.55) 0%, rgba(150,178,235,.20) 40%, transparent 72%);
  opacity: 0;
  animation: hfSkyFlash 35s linear infinite;
}
@keyframes hfSkyFlash {
  0%, 100% { opacity: 0; }
  0.21%  { opacity: .52; }  1.37%  { opacity: .15; }  2.91%  { opacity: 0; }
  14.29% { opacity: 0; }    14.50% { opacity: .28; }  15.60% { opacity: .09; } 17.00% { opacity: 0; }
  28.57% { opacity: 0; }    28.78% { opacity: .42; }  29.90% { opacity: .13; } 31.40% { opacity: 0; }
  42.86% { opacity: 0; }    43.07% { opacity: .30; }  44.20% { opacity: .09; } 45.60% { opacity: 0; }
  57.14% { opacity: 0; }    57.35% { opacity: .24; }  58.50% { opacity: .08; } 59.90% { opacity: 0; }
  71.43% { opacity: 0; }    71.64% { opacity: .56; }  72.80% { opacity: .17; } 74.40% { opacity: 0; }
  85.71% { opacity: 0; }    85.92% { opacity: .62; }  87.10% { opacity: .19; } 88.80% { opacity: 0; }
}

/* --------------------------------------------------------- hero sparks --- */
.hero .embers { height: 100%; }
.hero .embers i {
  animation-name: hfEmberHero, hfTwinkle;
  animation-timing-function: cubic-bezier(.32,.04,.55,.96), ease-in-out;
}
@keyframes hfEmberHero {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  7%   { opacity: var(--peak, .9); }
  34%  { transform: translate3d(calc(var(--drift, 20px) * .3), -26vh, 0) scale(.94); }
  63%  { transform: translate3d(calc(var(--drift, 20px) * 1.2), -55vh, 0) scale(.74); }
  85%  { opacity: calc(var(--peak, .9) * .5); }
  100% { transform: translate3d(var(--drift, 20px), -92vh, 0) scale(.4); opacity: 0; }
}
@keyframes hfTwinkle {
  0%, 100% { filter: brightness(.55); }
  28%      { filter: brightness(1.5); }
  54%      { filter: brightness(.78); }
  79%      { filter: brightness(1.75); }
}

/* Nothing runs while the hero is off screen. */
.hero.is-idle .sky span,
.hero.is-idle .strike,
.hero.is-idle .sheet,
.hero.is-idle .skyflash,
.hero.is-idle .embers i { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .strike, .sheet, .skyflash, .sky__churn { display: none; }
}

/* ------------------------------------------------------------------ eyes --- */
/* The visor slit lifted off the plate and lit from behind, so it reads as
   something burning inside the helmet rather than a painted highlight. */
.eyes { position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen; }
.eyes img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
}
.eyes__glow { animation: hfEyeGlow 4.6s ease-in-out infinite; }
.eyes__core { animation: hfEyeCore 4.6s ease-in-out infinite; }
@keyframes hfEyeGlow {
  0%, 100% { opacity: .52; }
  18%      { opacity: .78; }
  46%      { opacity: 1;   }
  72%      { opacity: .66; }
}
@keyframes hfEyeCore {
  0%, 100% { opacity: .74; }
  18%      { opacity: .88; }
  46%      { opacity: 1;   }
  72%      { opacity: .82; }
}
.hero.is-idle .eyes img { animation-play-state: paused; }

/* ------------------------------------------------- weather in the plate ---
   The character portrait gets the same drifting cloud as the hero, masked to
   his silhouette in that plate with the same floor, so it passes behind him
   and thins across him rather than stopping at his edge. */
.artsky {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1;
  -webkit-mask-image: url("/assets/img/char-figure-mask.png?v=24");
          mask-image: url("/assets/img/char-figure-mask.png?v=24");
  -webkit-mask-size: cover;       mask-size: cover;
  -webkit-mask-position: 50% 50%; mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.artsky__band {
  position: absolute; left: -100%; width: 200%; display: block;
  background-repeat: repeat-x; background-size: 50% 100%;
  will-change: transform;
}
.artsky__band--far {
  top: -10%; height: 122%;
  background-image: url("/assets/img/sky-lit.png?v=21");
  background-image: image-set(url("/assets/img/sky-lit.webp?v=21") type("image/webp"),
                              url("/assets/img/sky-lit.png?v=21")  type("image/png"));
  mix-blend-mode: screen; opacity: .30;
  animation: hfDrift 78s linear infinite;
}
.artsky__band--near {
  top: -14%; height: 130%;
  background-image: url("/assets/img/sky-dark.png?v=21");
  background-image: image-set(url("/assets/img/sky-dark.webp?v=21") type("image/webp"),
                              url("/assets/img/sky-dark.png?v=21")  type("image/png"));
  opacity: .34;
  animation: hfDrift 44s linear infinite;
}
/* the inset vignette stays on top of the weather */
.split__art::after { z-index: 2; }
.split__art:not(.is-live) .artsky__band { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .artsky { display: none; }
}