ferst-core 0.7.13 → 0.8.0

package/components/recipes/Hero.astro

@@ -1,530 +1,533 @@
----
-/**
- * Hero — the first Level-2 recipe: a curated page-opening band that composes
- * primitives (Heading + Button) into a designed layout. Presets: `centered`
- * (stacked and centred), `split` (text beside an image) and `media` (text over a
- * background — a looping video, a slow crossfade of images, or one image). A
- * media hero can be a band, `tall`, or fill the first `screen` edge to edge.
- * Recipes are locked components so quality can't drift (BLOCK-ARCHITECTURE §6).
- *
- * Moving backgrounds (video, slideshow) are accessible by construction: a pause
- * button (WCAG 2.2.2), still under prefers-reduced-motion (the poster / first
- * image), and the slideshow pauses while off-screen or the tab is hidden.
- */
-import Heading from '../blocks/Heading.astro';
-import Button from '../Button.astro';
-import { backgroundEmbed, videoEmbed } from '../../lib/video';
-
-interface Props {
-  eyebrow?: string;
-  title: string;
-  subtitle?: string;
-  cta?: { label: string; href: string };
-  image?: { src: string; alt?: string };
-  media?: { image?: string; images?: string[]; video?: string; poster?: string; overlay?: number; link?: string; linkLabel?: string };
-  layout?: 'centered' | 'split' | 'media';
-  size?: 'compact' | 'standard' | 'tall' | 'screen';
-  parallax?: boolean;
-  background?: 'none' | 'mesh';
-  fullBleed?: boolean;
-  focus?: string;
-}
-const { eyebrow, title, subtitle, cta, image, media, layout = 'centered', size = 'standard', parallax = false, background = 'none', fullBleed = false, focus } = Astro.props;
-// A YouTube / Vimeo link plays as an embedded background (after consent); anything else
-// in `video` is a file for a native <video>.
-const embed = media?.video ? backgroundEmbed(media.video) : null;
-const slides = !media?.video && (media?.images?.length ?? 0) >= 2 ? media!.images! : [];
-const still = media?.image ?? media?.images?.[0];
-const isMedia = layout === 'media' && media && (media.video || slides.length || still);
-const motion = isMedia ? (embed ? 'embed' : media?.video ? 'video' : slides.length ? 'slides' : undefined) : undefined;
-const overlay = (media?.overlay ?? 45) / 100;
-const isMesh = background === 'mesh' && !isMedia;
-// The background can lead somewhere — e.g. the full video on YouTube (new tab; the app on phones).
-const linkTo = media?.link ?? embed?.watchUrl; // an embedded video links to itself by default
-const bgLink = isMedia && linkTo && /^(https?:\/\/|\/)/i.test(linkTo) ? linkTo : undefined;
-const provider = bgLink ? videoEmbed(bgLink)?.provider : undefined;
-const watchLabel = media?.linkLabel || (provider ? `Watch the full video on ${provider}` : 'Watch the full video');
-// The still: the image (no motion), or an embed's poster until the player may load.
-const stillSrc = embed ? media?.poster ?? still : !media?.video && !slides.length ? still : undefined;
-// Drawn as a real <img>, never a CSS background: a picture set through a CSS variable is
-// found late (never by the preload scanner), so the hero sat grey until it arrived, and
-// some browsers kept it grey. A real image, loaded first, is found early and painted.
-const heroImg = isMedia && stillSrc ? stillSrc : undefined;
----
-
-<section
-  class="b-hero"
-  data-layout={layout}
-  data-size={isMedia ? size : undefined}
-  data-bg={isMesh ? 'mesh' : undefined}
-  data-motion={motion}
-  data-linked={bgLink ? 'true' : undefined}
-  data-parallax={isMedia && parallax ? 'true' : undefined}
-  data-full-bleed={isMedia && fullBleed ? 'true' : undefined}
-  style={isMedia ? `--hero-overlay: ${overlay}${focus ? `; --hero-focus: ${focus}` : ''}` : undefined}
->
-  {isMedia && (
-    <div class="b-hero__bg" aria-hidden="true">
-      {heroImg && <img class="b-hero__img" src={heroImg} alt="" loading="eager" fetchpriority="high" decoding="async" />}
-      {embed && <div class="b-hero__embed" data-embed-url={embed.embedUrl} data-provider={embed.provider}></div>}
-      {media?.video && !embed ? (
-        <video autoplay muted loop playsinline poster={media.poster} preload="metadata">
-          <source src={media.video} />
-        </video>
-      ) : null}
-      {slides.map((src, i) => (
-        <img class:list={['b-hero__slide', { 'is-on': i === 0 }]} src={src} alt="" loading={i === 0 ? 'eager' : 'lazy'} fetchpriority={i === 0 ? 'high' : undefined} decoding="async" />
-      ))}
-      <span class="b-hero__scrim"></span>
-    </div>
-  )}
-  {bgLink && <a class="b-hero__bglink" href={bgLink} target="_blank" rel="noopener" tabindex="-1" aria-hidden="true"></a>}
-  {isMesh && <div class="b-hero__mesh" aria-hidden="true"></div>}
-  <div class="b-hero__text">
-    {eyebrow && <p class="b-hero__eyebrow">{eyebrow}</p>}
-    <Heading text={title} level={1} align={layout === 'split' ? 'start' : 'center'} />
-    {subtitle && <p class="b-hero__subtitle">{subtitle}</p>}
-    {cta && (
-      <div class="b-hero__cta">
-        <Button href={cta.href} variant={layout === 'media' ? 'cta' : 'primary'}>{cta.label}</Button>
-      </div>
-    )}
-  </div>
-  {bgLink && (
-    <a class="b-hero__watch" href={bgLink} target="_blank" rel="noopener">
-      <span class="b-hero__watch-icon" aria-hidden="true"></span>{watchLabel}<span class="b-hero__sr"> (opens in a new tab)</span>
-    </a>
-  )}
-  {motion && (
-    <button type="button" class="b-hero__pause" aria-pressed="false" aria-label="Pause background" hidden={motion === 'embed'}>
-      <span class="b-hero__pause-icon" aria-hidden="true"></span>
-    </button>
-  )}
-  {layout === 'split' && image && (
-    <div class="b-hero__media">
-      <img src={image.src} alt={image.alt ?? ''} loading="eager" decoding="async" />
-    </div>
-  )}
-</section>
-
-<script>
-  // Moving hero backgrounds: pause button, reduced-motion, the slideshow timer, and an
-  // embedded (YouTube / Vimeo) background that loads only once the visitor consents.
-  import { hasConsent, onConsentChange } from '../../lib/consent-client';
-  import { playerStarted } from '../../lib/video';
-  const SLIDE_MS = 6000;
-  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  for (const hero of document.querySelectorAll<HTMLElement>('.b-hero[data-motion]')) {
-    const button = hero.querySelector<HTMLButtonElement>('.b-hero__pause');
-    const video = hero.querySelector('video');
-    const slides = [...hero.querySelectorAll<HTMLElement>('.b-hero__slide')];
-    const embedSlot = hero.querySelector<HTMLElement>('.b-hero__embed');
-    let player: HTMLIFrameElement | null = null;
-    // Play / pause an embedded player by message, with no provider API script.
-    const command = (play: boolean) => {
-      if (!player?.contentWindow) return;
-      const msg = embedSlot!.dataset.provider === 'Vimeo'
-        ? { method: play ? 'play' : 'pause' }
-        : { event: 'command', func: play ? 'playVideo' : 'pauseVideo', args: [] };
-      player.contentWindow.postMessage(JSON.stringify(msg), new URL(player.src).origin);
-    };
-    const loadPlayer = () => {
-      if (player || !embedSlot || reduce) return; // reduced motion keeps the still
-      player = document.createElement('iframe');
-      player.src = embedSlot.dataset.embedUrl!;
-      player.title = 'Background video';
-      player.tabIndex = -1;
-      player.setAttribute('aria-hidden', 'true');
-      player.allow = 'autoplay; encrypted-media; picture-in-picture';
-      // Keep the poster up until the player says it is PLAYING, then cross-fade: no black,
-      // loading player on screen. Ask it to report (YouTube 'listening' / Vimeo listener).
-      const provider = embedSlot.dataset.provider!;
-      const origin = new URL(player.src).origin;
-      window.addEventListener('message', (e) => {
-        if (e.origin !== origin || e.source !== player!.contentWindow) return;
-        if (playerStarted(provider, e.data)) embedSlot.classList.add('is-on');
-      });
-      player.addEventListener('load', () => {
-        const hello = provider === 'Vimeo' ? { method: 'addEventListener', value: 'play' } : { event: 'listening', id: 1, channel: 'widget' };
-        player!.contentWindow?.postMessage(JSON.stringify(hello), origin);
-      });
-      embedSlot.appendChild(player);
-      if (button) button.hidden = false;
-      sync();
-    };
-    let paused = reduce;
-    let visible = true;
-    let index = 0;
-    let timer: number | undefined;
-
-    const tick = () => {
-      slides[index].classList.remove('is-on');
-      index = (index + 1) % slides.length;
-      slides[index].classList.add('is-on');
-    };
-    const sync = () => {
-      const run = !paused && visible && !document.hidden;
-      if (video) {
-        if (run) void video.play().catch(() => {});
-        else video.pause();
-      }
-      if (player) command(run);
-      if (slides.length > 1) {
-        window.clearInterval(timer);
-        timer = run ? window.setInterval(tick, SLIDE_MS) : undefined;
-      }
-      if (button) {
-        button.setAttribute('aria-pressed', String(paused));
-        button.setAttribute('aria-label', paused ? 'Play background' : 'Pause background');
-      }
-      hero.toggleAttribute('data-paused', paused);
-    };
-    button?.addEventListener('click', () => { paused = !paused; sync(); });
-    document.addEventListener('visibilitychange', sync);
-    new IntersectionObserver(([e]) => { visible = e.isIntersecting; sync(); }).observe(hero);
-    if (embedSlot) {
-      // Warm the connection the moment it's allowed, so the video starts sooner.
-      const preconnect = () => {
-        const href = new URL(embedSlot.dataset.embedUrl!).origin;
-        if (document.querySelector(`link[rel="preconnect"][href="${href}"]`)) return;
-        const l = document.createElement('link');
-        l.rel = 'preconnect';
-        l.href = href;
-        document.head.appendChild(l);
-      };
-      if (hasConsent()) { preconnect(); loadPlayer(); }
-      onConsentChange((allowed) => { if (allowed) { preconnect(); loadPlayer(); } });
-    }
-    sync();
-  }
-  // Parallax: the background drifts more slowly than the page. Transform-based, so it works
-  // for an image, slides, a <video> or an embedded player alike. Off on touch devices
-  // (coarse pointers) and under reduced motion; only runs while the hero is on screen.
-  const fine = window.matchMedia('(pointer: fine)').matches;
-  for (const hero of document.querySelectorAll<HTMLElement>('.b-hero[data-parallax]')) {
-    const bg = hero.querySelector<HTMLElement>('.b-hero__bg');
-    if (!bg || reduce || !fine) continue;
-    hero.classList.add('is-parallax');
-    let ticking = false;
-    let onScreen = true;
-    const move = () => {
-      ticking = false;
-      const top = hero.getBoundingClientRect().top;
-      bg.style.transform = `translate3d(0, ${Math.round(Math.max(0, -top) * 0.35)}px, 0)`;
-    };
-    const queue = () => { if (onScreen && !ticking) { ticking = true; requestAnimationFrame(move); } };
-    new IntersectionObserver(([e]) => { onScreen = e.isIntersecting; if (onScreen) queue(); }).observe(hero);
-    window.addEventListener('scroll', queue, { passive: true });
-    move();
-  }
-</script>
-
-<style>
-  .b-hero {
-    display: grid;
-    gap: 2rem;
-    padding-block: 3rem;
-  }
-  @media (min-width: 48em) {
-    .b-hero[data-layout='split'] {
-      grid-template-columns: 1fr 1fr;
-      align-items: center;
-    }
-  }
-  .b-hero__text {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-  .b-hero[data-layout='centered'] .b-hero__text {
-    max-width: var(--max);
-    margin-inline: auto;
-    align-items: center;
-    text-align: center;
-  }
-  .b-hero__eyebrow {
-    margin: 0;
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
-    font-size: 0.8125rem;
-    font-weight: 600;
-    color: var(--gold);
-  }
-  .b-hero__subtitle {
-    margin: 0;
-    font-size: 1.125rem;
-    line-height: 1.6;
-    color: var(--muted);
-    max-width: var(--max);
-  }
-  .b-hero__cta {
-    margin-top: 0.5rem;
-  }
-
-  /* ── Mesh background: a soft, slowly drifting brand gradient behind the text.
-     Low opacity + blur keeps normal (dark) text perfectly readable. ── */
-  .b-hero[data-bg='mesh'] {
-    position: relative;
-    isolation: isolate;
-    overflow: hidden;
-    border-radius: var(--radius);
-    padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 3rem);
-  }
-  .b-hero__mesh {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    background: var(--bg);
-  }
-  .b-hero__mesh::before {
-    content: '';
-    position: absolute;
-    inset: -25%;
-    background:
-      radial-gradient(35% 45% at 20% 25%, var(--gold), transparent 70%),
-      radial-gradient(35% 45% at 80% 20%, var(--accent-2, var(--gold)), transparent 70%),
-      radial-gradient(40% 50% at 65% 85%, var(--gold-light), transparent 70%);
-    opacity: 0.35;
-    filter: blur(50px);
-    animation: b-hero-mesh 20s ease-in-out infinite alternate;
-  }
-  @keyframes b-hero-mesh {
-    from { transform: translate3d(-3%, -2%, 0) scale(1.05); }
-    to { transform: translate3d(3%, 4%, 0) scale(1.18); }
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .b-hero__mesh::before { animation: none; }
-  }
-  .b-hero__media img {
-    display: block;
-    width: 100%;
-    height: auto;
-    border-radius: 8px;
-  }
-
-  /* ── Media layout: image / slideshow / video background with a legibility scrim ── */
-  .b-hero[data-layout='media'] {
-    position: relative;
-    min-height: min(68vh, 38rem);
-    display: grid;
-    place-items: center;
-    text-align: center;
-    padding: clamp(3rem, 8vw, 6rem) 1.5rem;
-    border-radius: var(--radius);
-    overflow: hidden;
-    isolation: isolate;
-  }
-  /* A narrow band for a short, wide header strip: close to the strip's own shape, so it
-     isn't cropped to its middle and blown up. Less padding and a smaller title to fit. */
-  .b-hero[data-size='compact'] {
-    min-height: clamp(8rem, 18vw, 16rem);
-    padding-block: clamp(1.25rem, 3vw, 2.25rem);
-  }
-  .b-hero[data-size='compact'] :global(h1) {
-    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
-  }
-  /* Edge to edge across the screen, like a full-bleed banner. */
-  .b-hero[data-full-bleed='true'] {
-    width: 100vw;
-    margin-inline: calc(50% - 50vw);
-    border-radius: 0;
-  }
-  .b-hero[data-size='tall'] {
-    min-height: min(85vh, 52rem);
-  }
-  /* The full first screen below the sticky header, edge to edge — breaks out of the page
-     column. --header-h is the header's measured full height (SiteHeader); the fallback is
-     its usual height until that runs. */
-  .b-hero[data-size='screen'] {
-    width: 100vw;
-    margin-inline: calc(50% - 50vw);
-    min-height: calc(100svh - var(--header-h, 60px));
-    border-radius: 0;
-  }
-  @media (min-width: 64em) {
-    .b-hero[data-size='screen'] {
-      min-height: calc(100svh - var(--header-h, 64px));
-    }
-  }
-  .b-hero__bg {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    background-color: var(--bg-section);
-  }
-  /* The picture (and each rotating slide) covers the band, framed by `focus`. */
-  .b-hero__img,
-  .b-hero__slide {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: var(--hero-focus, center);
-    display: block;
-    max-width: none;
-  }
-  /* Parallax: give the background room to drift without uncovering an edge. */
-  .b-hero.is-parallax .b-hero__bg {
-    inset: 0 0 -35% 0;
-    will-change: transform;
-  }
-  .b-hero__bg video {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: var(--hero-focus, center);
-  }
-  /* An embedded background player, sized to COVER the hero like object-fit (16:9 kept,
-     overflow cropped). Never interactive; fades in once it has started. */
-  .b-hero__embed {
-    position: absolute;
-    inset: 0;
-    overflow: hidden;
-    pointer-events: none;
-    container-type: size;
-    opacity: 0;
-    transition: opacity 1.2s ease;
-  }
-  .b-hero__embed.is-on {
-    opacity: 1;
-  }
-  .b-hero__embed :global(iframe) {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: max(100cqw, 177.78cqh);
-    height: max(100cqh, 56.25cqw);
-    max-width: none; /* the global media reset caps iframes at 100%: cover must overflow */
-    transform: translate(-50%, -50%);
-    border: 0;
-  }
-  .b-hero__pause[hidden] {
-    display: none;
-  }
-  .b-hero__slide {
-    opacity: 0;
-    transition: opacity 1.6s ease-in-out;
-  }
-  .b-hero__slide.is-on {
-    opacity: 1;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .b-hero__slide { transition: none; }
-  }
-  .b-hero__scrim {
-    position: absolute;
-    inset: 0;
-    background: rgba(8, 10, 18, var(--hero-overlay, 0.45));
-  }
-  .b-hero[data-layout='media'] .b-hero__text {
-    max-width: var(--max);
-    align-items: center;
-    color: #fff;
-  }
-  .b-hero[data-layout='media'] .b-hero__subtitle {
-    color: rgba(255, 255, 255, 0.9);
-    margin-inline: auto;
-  }
-  .b-hero[data-layout='media'] .b-hero__eyebrow {
-    color: #fff;
-    opacity: 0.9;
-  }
-  .b-hero[data-layout='media'] :global(h1) {
-    color: #fff;
-  }
-
-  /* A linked background: the whole picture opens the full video; the text and
-     its CTA stay clickable on top, and a visible cue carries the keyboard link. */
-  .b-hero__bglink {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    cursor: pointer;
-  }
-  .b-hero[data-linked] .b-hero__text {
-    position: relative;
-    z-index: 1;
-    pointer-events: none;
-  }
-  .b-hero[data-linked] .b-hero__text :global(a),
-  .b-hero[data-linked] .b-hero__text :global(button) {
-    pointer-events: auto;
-  }
-  .b-hero__watch {
-    position: absolute;
-    left: clamp(0.75rem, 2vw, 1.25rem);
-    bottom: clamp(0.75rem, 2vw, 1.25rem);
-    z-index: 2;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 0.9rem;
-    border-radius: 999px;
-    border: 1px solid rgba(255, 255, 255, 0.55);
-    background: rgba(8, 10, 18, 0.45);
-    color: #fff;
-    font-size: 0.875rem;
-    font-weight: 600;
-    text-decoration: none;
-  }
-  .b-hero__watch:hover {
-    background: rgba(8, 10, 18, 0.65);
-  }
-  .b-hero__watch:focus-visible {
-    outline: 3px solid #fff;
-    outline-offset: 2px;
-  }
-  .b-hero__watch-icon {
-    width: 0;
-    height: 0;
-    border-block: 0.35rem solid transparent;
-    border-inline-start: 0.6rem solid currentColor;
-  }
-  .b-hero__sr {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-
-  /* Pause / play for moving backgrounds — small, quiet, always reachable. */
-  .b-hero__pause {
-    position: absolute;
-    z-index: 2;
-    right: clamp(0.75rem, 2vw, 1.25rem);
-    bottom: clamp(0.75rem, 2vw, 1.25rem);
-    width: 2.5rem;
-    height: 2.5rem;
-    display: grid;
-    place-items: center;
-    border-radius: 50%;
-    border: 1px solid rgba(255, 255, 255, 0.55);
-    background: rgba(8, 10, 18, 0.45);
-    color: #fff;
-    cursor: pointer;
-  }
-  .b-hero__pause:hover {
-    background: rgba(8, 10, 18, 0.65);
-  }
-  .b-hero__pause:focus-visible {
-    outline: 3px solid #fff;
-    outline-offset: 2px;
-  }
-  /* Two bars (pause) → a triangle (play) when paused. */
-  .b-hero__pause-icon {
-    width: 0.75rem;
-    height: 0.875rem;
-    border-inline: 0.25rem solid currentColor;
-  }
-  .b-hero[data-paused] .b-hero__pause-icon {
-    width: 0;
-    height: 0;
-    border-inline: 0;
-    border-block: 0.45rem solid transparent;
-    border-inline-start: 0.75rem solid currentColor;
-    margin-inline-start: 0.2rem;
-  }
-</style>
+---
+/**
+ * Hero — the first Level-2 recipe: a curated page-opening band that composes
+ * primitives (Heading + Button) into a designed layout. Presets: `centered`
+ * (stacked and centred), `split` (text beside an image) and `media` (text over a
+ * background — a looping video, a slow crossfade of images, or one image). A
+ * media hero can be a band, `tall`, or fill the first `screen` edge to edge.
+ * Recipes are locked components so quality can't drift (BLOCK-ARCHITECTURE §6).
+ *
+ * Moving backgrounds (video, slideshow) are accessible by construction: a pause
+ * button (WCAG 2.2.2), still under prefers-reduced-motion (the poster / first
+ * image), and the slideshow pauses while off-screen or the tab is hidden.
+ */
+import Heading from '../blocks/Heading.astro';
+import Button from '../Button.astro';
+import { backgroundEmbed, videoEmbed } from '../../lib/video';
+
+interface Props {
+  eyebrow?: string;
+  title: string;
+  subtitle?: string;
+  cta?: { label: string; href: string };
+  image?: { src: string; alt?: string };
+  media?: { image?: string; images?: string[]; video?: string; poster?: string; overlay?: number; link?: string; linkLabel?: string };
+  layout?: 'centered' | 'split' | 'media';
+  size?: 'compact' | 'standard' | 'tall' | 'screen';
+  parallax?: boolean;
+  background?: 'none' | 'mesh';
+  fullBleed?: boolean;
+  focus?: string;
+}
+const { eyebrow, title, subtitle, cta, image, media, layout = 'centered', size = 'standard', parallax = false, background = 'none', fullBleed = false, focus } = Astro.props;
+// A YouTube / Vimeo link plays as an embedded background (after consent); anything else
+// in `video` is a file for a native <video>.
+const embed = media?.video ? backgroundEmbed(media.video) : null;
+const slides = !media?.video && (media?.images?.length ?? 0) >= 2 ? media!.images! : [];
+const still = media?.image ?? media?.images?.[0];
+const isMedia = layout === 'media' && media && (media.video || slides.length || still);
+const motion = isMedia ? (embed ? 'embed' : media?.video ? 'video' : slides.length ? 'slides' : undefined) : undefined;
+const overlay = (media?.overlay ?? 45) / 100;
+const isMesh = background === 'mesh' && !isMedia;
+// The background can lead somewhere — e.g. the full video on YouTube (new tab; the app on phones).
+const linkTo = media?.link ?? embed?.watchUrl; // an embedded video links to itself by default
+const bgLink = isMedia && linkTo && /^(https?:\/\/|\/)/i.test(linkTo) ? linkTo : undefined;
+const provider = bgLink ? videoEmbed(bgLink)?.provider : undefined;
+const watchLabel = media?.linkLabel || (provider ? `Watch the full video on ${provider}` : 'Watch the full video');
+// The still: the image (no motion), or an embed's poster until the player may load.
+const stillSrc = embed ? media?.poster ?? still : !media?.video && !slides.length ? still : undefined;
+// Drawn as a real <img>, never a CSS background: a picture set through a CSS variable is
+// found late (never by the preload scanner), so the hero sat grey until it arrived, and
+// some browsers kept it grey. A real image, loaded first, is found early and painted.
+const heroImg = isMedia && stillSrc ? stillSrc : undefined;
+---
+
+<section
+  class="b-hero"
+  data-layout={layout}
+  data-size={isMedia ? size : undefined}
+  data-bg={isMesh ? 'mesh' : undefined}
+  data-motion={motion}
+  data-linked={bgLink ? 'true' : undefined}
+  data-parallax={isMedia && parallax ? 'true' : undefined}
+  data-full-bleed={isMedia && fullBleed ? 'true' : undefined}
+  style={isMedia ? `--hero-overlay: ${overlay}${focus ? `; --hero-focus: ${focus}` : ''}` : undefined}
+>
+  {isMedia && (
+    <div class="b-hero__bg" aria-hidden="true">
+      {heroImg && <img class="b-hero__img" src={heroImg} alt="" loading="eager" fetchpriority="high" decoding="async" />}
+      {embed && <div class="b-hero__embed" data-embed-url={embed.embedUrl} data-provider={embed.provider}></div>}
+      {media?.video && !embed ? (
+        <video autoplay muted loop playsinline poster={media.poster} preload="metadata">
+          <source src={media.video} />
+        </video>
+      ) : null}
+      {slides.map((src, i) => (
+        <img class:list={['b-hero__slide', { 'is-on': i === 0 }]} src={src} alt="" loading={i === 0 ? 'eager' : 'lazy'} fetchpriority={i === 0 ? 'high' : undefined} decoding="async" />
+      ))}
+      <span class="b-hero__scrim"></span>
+    </div>
+  )}
+  {bgLink && <a class="b-hero__bglink" href={bgLink} target="_blank" rel="noopener" tabindex="-1" aria-hidden="true"></a>}
+  {isMesh && <div class="b-hero__mesh" aria-hidden="true"></div>}
+  <div class="b-hero__text">
+    {eyebrow && <p class="b-hero__eyebrow">{eyebrow}</p>}
+    <Heading text={title} level={1} align={layout === 'split' ? 'start' : 'center'} />
+    {subtitle && <p class="b-hero__subtitle">{subtitle}</p>}
+    {cta && (
+      <div class="b-hero__cta">
+        <Button href={cta.href} variant={layout === 'media' ? 'cta' : 'primary'}>{cta.label}</Button>
+      </div>
+    )}
+  </div>
+  {bgLink && (
+    <a class="b-hero__watch" href={bgLink} target="_blank" rel="noopener">
+      <span class="b-hero__watch-icon" aria-hidden="true"></span>{watchLabel}<span class="b-hero__sr"> (opens in a new tab)</span>
+    </a>
+  )}
+  {motion && (
+    <button type="button" class="b-hero__pause" aria-pressed="false" aria-label="Pause background" hidden={motion === 'embed'}>
+      <span class="b-hero__pause-icon" aria-hidden="true"></span>
+    </button>
+  )}
+  {layout === 'split' && image && (
+    <div class="b-hero__media">
+      <img src={image.src} alt={image.alt ?? ''} loading="eager" decoding="async" />
+    </div>
+  )}
+</section>
+
+<script>
+  // Moving hero backgrounds: pause button, reduced-motion, the slideshow timer, and an
+  // embedded (YouTube / Vimeo) background that loads only once the visitor consents.
+  import { hasConsent, onConsentChange } from '../../lib/consent-client';
+  import { playerStarted } from '../../lib/video';
+  const SLIDE_MS = 6000;
+  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  for (const hero of document.querySelectorAll<HTMLElement>('.b-hero[data-motion]')) {
+    const button = hero.querySelector<HTMLButtonElement>('.b-hero__pause');
+    const video = hero.querySelector('video');
+    const slides = [...hero.querySelectorAll<HTMLElement>('.b-hero__slide')];
+    const embedSlot = hero.querySelector<HTMLElement>('.b-hero__embed');
+    let player: HTMLIFrameElement | null = null;
+    // Play / pause an embedded player by message, with no provider API script.
+    const command = (play: boolean) => {
+      if (!player?.contentWindow) return;
+      const msg = embedSlot!.dataset.provider === 'Vimeo'
+        ? { method: play ? 'play' : 'pause' }
+        : { event: 'command', func: play ? 'playVideo' : 'pauseVideo', args: [] };
+      player.contentWindow.postMessage(JSON.stringify(msg), new URL(player.src).origin);
+    };
+    const loadPlayer = () => {
+      if (player || !embedSlot || reduce) return; // reduced motion keeps the still
+      player = document.createElement('iframe');
+      player.src = embedSlot.dataset.embedUrl!;
+      player.title = 'Background video';
+      player.tabIndex = -1;
+      player.setAttribute('aria-hidden', 'true');
+      player.allow = 'autoplay; encrypted-media; picture-in-picture';
+      // Keep the poster up until the player says it is PLAYING, then cross-fade: no black,
+      // loading player on screen. Ask it to report (YouTube 'listening' / Vimeo listener).
+      const provider = embedSlot.dataset.provider!;
+      const origin = new URL(player.src).origin;
+      window.addEventListener('message', (e) => {
+        if (e.origin !== origin || e.source !== player!.contentWindow) return;
+        if (playerStarted(provider, e.data)) embedSlot.classList.add('is-on');
+      });
+      player.addEventListener('load', () => {
+        const hello = provider === 'Vimeo' ? { method: 'addEventListener', value: 'play' } : { event: 'listening', id: 1, channel: 'widget' };
+        player!.contentWindow?.postMessage(JSON.stringify(hello), origin);
+      });
+      embedSlot.appendChild(player);
+      if (button) button.hidden = false;
+      sync();
+    };
+    let paused = reduce;
+    let visible = true;
+    let index = 0;
+    let timer: number | undefined;
+
+    const tick = () => {
+      slides[index].classList.remove('is-on');
+      index = (index + 1) % slides.length;
+      slides[index].classList.add('is-on');
+    };
+    const sync = () => {
+      const run = !paused && visible && !document.hidden;
+      if (video) {
+        if (run) void video.play().catch(() => {});
+        else video.pause();
+      }
+      if (player) command(run);
+      if (slides.length > 1) {
+        window.clearInterval(timer);
+        timer = run ? window.setInterval(tick, SLIDE_MS) : undefined;
+      }
+      if (button) {
+        button.setAttribute('aria-pressed', String(paused));
+        button.setAttribute('aria-label', paused ? 'Play background' : 'Pause background');
+      }
+      hero.toggleAttribute('data-paused', paused);
+    };
+    button?.addEventListener('click', () => { paused = !paused; sync(); });
+    document.addEventListener('visibilitychange', sync);
+    new IntersectionObserver(([e]) => { visible = e.isIntersecting; sync(); }).observe(hero);
+    if (embedSlot) {
+      // Warm the connection the moment it's allowed, so the video starts sooner.
+      const preconnect = () => {
+        const href = new URL(embedSlot.dataset.embedUrl!).origin;
+        if (document.querySelector(`link[rel="preconnect"][href="${href}"]`)) return;
+        const l = document.createElement('link');
+        l.rel = 'preconnect';
+        l.href = href;
+        document.head.appendChild(l);
+      };
+      if (hasConsent()) { preconnect(); loadPlayer(); }
+      onConsentChange((allowed) => { if (allowed) { preconnect(); loadPlayer(); } });
+    }
+    sync();
+  }
+  // Parallax: the background drifts more slowly than the page. Transform-based, so it works
+  // for an image, slides, a <video> or an embedded player alike. Off on touch devices
+  // (coarse pointers) and under reduced motion; only runs while the hero is on screen.
+  const fine = window.matchMedia('(pointer: fine)').matches;
+  for (const hero of document.querySelectorAll<HTMLElement>('.b-hero[data-parallax]')) {
+    const bg = hero.querySelector<HTMLElement>('.b-hero__bg');
+    if (!bg || reduce || !fine) continue;
+    hero.classList.add('is-parallax');
+    let ticking = false;
+    let onScreen = true;
+    const move = () => {
+      ticking = false;
+      const top = hero.getBoundingClientRect().top;
+      bg.style.transform = `translate3d(0, ${Math.round(Math.max(0, -top) * 0.35)}px, 0)`;
+    };
+    const queue = () => { if (onScreen && !ticking) { ticking = true; requestAnimationFrame(move); } };
+    new IntersectionObserver(([e]) => { onScreen = e.isIntersecting; if (onScreen) queue(); }).observe(hero);
+    window.addEventListener('scroll', queue, { passive: true });
+    move();
+  }
+</script>
+
+<style>
+  .b-hero {
+    display: grid;
+    gap: 2rem;
+    padding-block: 3rem;
+  }
+  @media (min-width: 48em) {
+    .b-hero[data-layout='split'] {
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
+    }
+  }
+  .b-hero__text {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .b-hero[data-layout='centered'] .b-hero__text {
+    max-width: var(--max);
+    margin-inline: auto;
+    align-items: center;
+    text-align: center;
+  }
+  .b-hero__eyebrow {
+    margin: 0;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--gold);
+  }
+  .b-hero__subtitle {
+    margin: 0;
+    font-size: 1.125rem;
+    line-height: 1.6;
+    color: var(--muted);
+    max-width: var(--max);
+  }
+  .b-hero__cta {
+    margin-top: 0.5rem;
+  }
+
+  /* ── Mesh background: a soft, slowly drifting brand gradient behind the text.
+     Low opacity + blur keeps normal (dark) text perfectly readable. ── */
+  .b-hero[data-bg='mesh'] {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    border-radius: var(--radius);
+    padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 3rem);
+  }
+  .b-hero__mesh {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: var(--bg);
+  }
+  .b-hero__mesh::before {
+    content: '';
+    position: absolute;
+    inset: -25%;
+    background:
+      radial-gradient(35% 45% at 20% 25%, var(--gold), transparent 70%),
+      radial-gradient(35% 45% at 80% 20%, var(--accent-2, var(--gold)), transparent 70%),
+      radial-gradient(40% 50% at 65% 85%, var(--gold-light), transparent 70%);
+    opacity: 0.35;
+    filter: blur(50px);
+    animation: b-hero-mesh 20s ease-in-out infinite alternate;
+  }
+  @keyframes b-hero-mesh {
+    from { transform: translate3d(-3%, -2%, 0) scale(1.05); }
+    to { transform: translate3d(3%, 4%, 0) scale(1.18); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .b-hero__mesh::before { animation: none; }
+  }
+  .b-hero__media img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+  }
+
+  /* ── Media layout: image / slideshow / video background with a legibility scrim ── */
+  .b-hero[data-layout='media'] {
+    position: relative;
+    min-height: min(68vh, 38rem);
+    display: grid;
+    place-items: center;
+    text-align: center;
+    padding: clamp(3rem, 8vw, 6rem) 1.5rem;
+    border-radius: var(--radius);
+    overflow: hidden;
+    isolation: isolate;
+  }
+  /* A narrow band for a short, wide header strip: close to the strip's own shape, so it
+     isn't cropped to its middle and blown up. Less padding and a smaller title to fit. */
+  .b-hero[data-size='compact'] {
+    min-height: clamp(8rem, 18vw, 16rem);
+    padding-block: clamp(1.25rem, 3vw, 2.25rem);
+  }
+  .b-hero[data-size='compact'] :global(h1) {
+    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
+  }
+  /* Edge to edge across the screen, like a full-bleed banner. */
+  .b-hero[data-full-bleed='true'] {
+    width: 100vw;
+    margin-inline: calc(50% - 50vw);
+    border-radius: 0;
+  }
+  .b-hero[data-size='tall'] {
+    min-height: min(85vh, 52rem);
+  }
+  /* The full first screen below the sticky header, edge to edge — breaks out of the page
+     column. --header-h is the header's measured full height (SiteHeader); the fallback is
+     its usual height until that runs. */
+  .b-hero[data-size='screen'] {
+    width: 100vw;
+    margin-inline: calc(50% - 50vw);
+    min-height: calc(100svh - var(--header-h, 60px));
+    border-radius: 0;
+  }
+  @media (min-width: 64em) {
+    .b-hero[data-size='screen'] {
+      min-height: calc(100svh - var(--header-h, 64px));
+    }
+  }
+  .b-hero__bg {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background-color: var(--bg-section);
+  }
+  /* The picture (and each rotating slide) covers the band, framed by `focus`. */
+  .b-hero__img,
+  .b-hero__slide {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: var(--hero-focus, center);
+    display: block;
+    max-width: none;
+  }
+  /* Parallax: give the background room to drift (up to 35% of the hero) without uncovering
+     an edge. The room is split evenly above and below, so at rest the picture or video is
+     centred on the hero, not pushed down by the extra room. Any gap the drift opens at the
+     top stays above the screen. */
+  .b-hero.is-parallax .b-hero__bg {
+    inset: -17.5% 0 -17.5% 0;
+    will-change: transform;
+  }
+  .b-hero__bg video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: var(--hero-focus, center);
+  }
+  /* An embedded background player, sized to COVER the hero like object-fit (16:9 kept,
+     overflow cropped). Never interactive; fades in once it has started. */
+  .b-hero__embed {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    container-type: size;
+    opacity: 0;
+    transition: opacity 1.2s ease;
+  }
+  .b-hero__embed.is-on {
+    opacity: 1;
+  }
+  .b-hero__embed :global(iframe) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: max(100cqw, 177.78cqh);
+    height: max(100cqh, 56.25cqw);
+    max-width: none; /* the global media reset caps iframes at 100%: cover must overflow */
+    transform: translate(-50%, -50%);
+    border: 0;
+  }
+  .b-hero__pause[hidden] {
+    display: none;
+  }
+  .b-hero__slide {
+    opacity: 0;
+    transition: opacity 1.6s ease-in-out;
+  }
+  .b-hero__slide.is-on {
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .b-hero__slide { transition: none; }
+  }
+  .b-hero__scrim {
+    position: absolute;
+    inset: 0;
+    background: rgba(8, 10, 18, var(--hero-overlay, 0.45));
+  }
+  .b-hero[data-layout='media'] .b-hero__text {
+    max-width: var(--max);
+    align-items: center;
+    color: #fff;
+  }
+  .b-hero[data-layout='media'] .b-hero__subtitle {
+    color: rgba(255, 255, 255, 0.9);
+    margin-inline: auto;
+  }
+  .b-hero[data-layout='media'] .b-hero__eyebrow {
+    color: #fff;
+    opacity: 0.9;
+  }
+  .b-hero[data-layout='media'] :global(h1) {
+    color: #fff;
+  }
+
+  /* A linked background: the whole picture opens the full video; the text and
+     its CTA stay clickable on top, and a visible cue carries the keyboard link. */
+  .b-hero__bglink {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    cursor: pointer;
+  }
+  .b-hero[data-linked] .b-hero__text {
+    position: relative;
+    z-index: 1;
+    pointer-events: none;
+  }
+  .b-hero[data-linked] .b-hero__text :global(a),
+  .b-hero[data-linked] .b-hero__text :global(button) {
+    pointer-events: auto;
+  }
+  .b-hero__watch {
+    position: absolute;
+    left: clamp(0.75rem, 2vw, 1.25rem);
+    bottom: clamp(0.75rem, 2vw, 1.25rem);
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.9rem;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.55);
+    background: rgba(8, 10, 18, 0.45);
+    color: #fff;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-decoration: none;
+  }
+  .b-hero__watch:hover {
+    background: rgba(8, 10, 18, 0.65);
+  }
+  .b-hero__watch:focus-visible {
+    outline: 3px solid #fff;
+    outline-offset: 2px;
+  }
+  .b-hero__watch-icon {
+    width: 0;
+    height: 0;
+    border-block: 0.35rem solid transparent;
+    border-inline-start: 0.6rem solid currentColor;
+  }
+  .b-hero__sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* Pause / play for moving backgrounds — small, quiet, always reachable. */
+  .b-hero__pause {
+    position: absolute;
+    z-index: 2;
+    right: clamp(0.75rem, 2vw, 1.25rem);
+    bottom: clamp(0.75rem, 2vw, 1.25rem);
+    width: 2.5rem;
+    height: 2.5rem;
+    display: grid;
+    place-items: center;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.55);
+    background: rgba(8, 10, 18, 0.45);
+    color: #fff;
+    cursor: pointer;
+  }
+  .b-hero__pause:hover {
+    background: rgba(8, 10, 18, 0.65);
+  }
+  .b-hero__pause:focus-visible {
+    outline: 3px solid #fff;
+    outline-offset: 2px;
+  }
+  /* Two bars (pause) → a triangle (play) when paused. */
+  .b-hero__pause-icon {
+    width: 0.75rem;
+    height: 0.875rem;
+    border-inline: 0.25rem solid currentColor;
+  }
+  .b-hero[data-paused] .b-hero__pause-icon {
+    width: 0;
+    height: 0;
+    border-inline: 0;
+    border-block: 0.45rem solid transparent;
+    border-inline-start: 0.75rem solid currentColor;
+    margin-inline-start: 0.2rem;
+  }
+</style>