/* hero-live.css — what the live background adds to a page's hero (built from Projects/Internal/2026-10-26-Hero-Live-Backgrounds).
   Everything is scoped to .has-live-bg, which hero-scenes.js sets only once WebGL2 is running:
   without it the hero is exactly today's. The host is the element with data-live-bg (else .hero);
   the home page's .hero brings its own layers, other heroes get them from the script. */

/* Any host: a positioned box, background and scrim behind, content above. */
[data-live-bg] { position: relative; overflow: hidden; }
.has-live-bg > .hero-bg { position: absolute; inset: 0; z-index: 0; }
.has-live-bg > .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.has-live-bg > :not(.hero-bg):not(.hero-scrim):not(.hero-scenes-bar) { position: relative; z-index: 2; }

/* The 404 (a .page-hero) needs room for its black hole: as tall as the home page's hero. */
.page-hero[data-live-bg] { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
.has-live-bg .not-found p { color: var(--color-text); }

/* The canvas takes the video's place, including its 40 px bleed for the parallax. */
/* It stays transparent until hero-scenes.js has drawn the first frame, then fades in. */
.hero-canvas { position: absolute; left: 0; top: -40px; z-index: 0; width: 100%; height: calc(100% + 80px); display: block; will-change: transform; opacity: 0; transition: opacity 0.8s ease; }
.has-live-bg .hero-canvas { opacity: 1; }
.hero-scenes-bar[hidden] { display: none; }   /* display: flex would beat the hidden attribute */
@media (prefers-reduced-motion: reduce) { .hero-canvas { transition: none; } }

/* Vertical swipes keep scrolling the page; horizontal drags reach the scene. */
.has-live-bg { touch-action: pan-y; cursor: grab; }
.has-live-bg a, .has-live-bg button { cursor: pointer; }

/* A lighter scrim than the video needed: the scenes are darker, and the point is to see them.
   It stays darkest behind the text column and at the bottom, where the hero meets the page. */
.has-live-bg .hero-scrim {
  background:
    radial-gradient(ellipse 46% 52% at 50% 50%, rgba(6, 10, 18, 0.58) 0%, rgba(6, 10, 18, 0.30) 70%, rgba(6, 10, 18, 0) 100%),
    linear-gradient(180deg, rgba(6, 10, 18, 0.25) 0%, rgba(6, 10, 18, 0.10) 55%, var(--color-bg) 100%);
}
.has-live-bg h1, .has-live-bg .intro, .has-live-bg .not-found p { text-shadow: 0 1px 18px rgba(6, 10, 18, 0.9); }
/* The blue eyebrow drowns in a bright disk: a lighter blue and a tight dark halo. */
.has-live-bg .eyebrow { color: var(--kd-blue-300); text-shadow: 0 0 6px rgba(6, 10, 18, 0.95), 0 0 14px rgba(6, 10, 18, 0.8); }
.has-live-bg .not-found .links a { color: var(--kd-blue-300); text-shadow: 0 0 6px rgba(6, 10, 18, 0.95), 0 0 14px rgba(6, 10, 18, 0.8); }

/* Phones: the intro runs to six lines and covers most of the picture, so the dark centre grows. */
@media (max-width: 767px) {
  .has-live-bg .hero-scrim {
    background:
      radial-gradient(ellipse 85% 48% at 50% 58%, rgba(6, 10, 18, 0.70) 0%, rgba(6, 10, 18, 0.45) 65%, rgba(6, 10, 18, 0.10) 100%),
      linear-gradient(180deg, rgba(6, 10, 18, 0.20) 0%, rgba(6, 10, 18, 0.15) 55%, var(--color-bg) 100%);
  }
}

/* The scene switch: bottom of the hero, small, above the scrim. */
.hero-scenes-bar { position: absolute; z-index: 3; left: 50%; bottom: 1.1rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: max-content; max-width: calc(100% - 2rem); }
.hero-scenes { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: rgba(11, 17, 32, 0.9); border: 1px solid var(--color-border); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-scenes button { font: 500 0.78rem/1 var(--font-body); color: var(--color-text-muted); background: transparent; border: 0; border-radius: var(--radius-pill); padding: 0.5rem 0.85rem; white-space: nowrap; }
/* Contrast (WCAG AA, 4.5:1 for this small text): white on --kd-blue-600 is 6.6:1, on the brand blue only 4.0:1;
   the 90 % bar keeps the muted inactive labels at 5.6:1 even over the brightest part of a scene. */
.hero-scenes button[aria-pressed="true"] { color: var(--color-heading); background: var(--kd-blue-600); }
@media (hover: hover) and (pointer: fine) { .hero-scenes button[aria-pressed="false"]:hover { color: var(--color-heading); } }
.hero-scenes button:focus-visible { outline: 2px solid var(--kd-blue-300); outline-offset: 2px; }
.hero-scenes-hint, .hero-scenes-note { font: 400 0.7rem/1.3 var(--font-mono); letter-spacing: 0.04em; color: var(--color-text-muted); text-align: center; text-shadow: 0 1px 6px rgba(6, 10, 18, 0.9); }
.hero-scenes-note { color: var(--kd-blue-300); }
/* A scene's live read-out (the network's epoch and accuracy); takes no room while empty. */
.hero-scenes-status { font: 400 0.7rem/1.3 var(--font-mono); letter-spacing: 0.04em; color: var(--color-text); text-align: center; text-shadow: 0 1px 6px rgba(6, 10, 18, 0.9); font-variant-numeric: tabular-nums; }
.hero-scenes-status:empty { display: none; }
@media (pointer: coarse) { .hero-scenes-hint { display: none; } }   /* "Ziehen" means little on a phone; the note stays */

/* The hero's content must clear the bar. */
.has-live-bg { padding-bottom: 6.5rem; }

@media (max-width: 480px) {
  .hero-scenes button { padding: 0.5rem 0.65rem; font-size: 0.74rem; }
}

/* Pause: part of the pill, set apart, never filled. */
.hero-scenes .hero-scenes-pause { margin-left: 4px; border-left: 1px solid var(--color-border); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; color: var(--color-text-muted); }
.hero-scenes .hero-scenes-pause { min-width: 2.4rem; display: inline-flex; align-items: center; justify-content: center; }
.hero-scenes-pause::before { content: ""; display: block; }
.hero-scenes-pause[data-state="pause"]::before { width: 3px; height: 10px; margin-right: 5px; background: currentColor; box-shadow: 5px 0 0 currentColor; }
.hero-scenes-pause[data-state="play"]::before { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; }
/* A page with one scene shows the pause button alone: a round button, not a pill's last segment. */
.hero-scenes .hero-scenes-pause:first-child { margin-left: 0; border-left: 0; border-radius: var(--radius-pill); }
.hero-scenes:empty { display: none; }   /* one scene and no pause (reduced motion): nothing to show */