/* ==========================================================================
   Landing hero animation — BUILD F (2026-09-19).
   Approved mockup: hero-anim-v1.html (gleam travels through the GLYPHS),
   orb ported from orb-listening.html, with Andrew's tweak: the mini orb
   sits centered UNDER the "Try a demo" CTA (not beside it). Build D bumps
   the orb from ~64px to 96px (Andrew: more presence). Build E raises
   the orb's opacity (Andrew: a tad more solidness). Build F pushes the
   orb fully solid AND removes all ambient haze (Andrew: "none of that"
   blue cloud) — the CSS halo is deleted, the canvas wash is gone; only
   the dots remain, each with a tight luminous core.

   Three layers, all scoped to .hero-anim on the landing hero:
   1. Mini listening orb (~96px canvas 2D) below the hero CTA.
   2. Barely-there gleam sweep through the H1 every ~6s. The headline is
      split into two stacked layers by the JS:
        .hero-gleam-back  — absolute, aria-hidden, identical markup, fully
          opaque, keeps the H1's ORIGINAL text-shadow (so no shadow can
          ever show through transparent glyphs — the iOS extruded-text
          bug of build 20260919 cannot regress).
        .hero-gleam-front — in-flow (carries the layout), NO text-shadow;
          glyphs painted with an animated gradient via
          background-clip:text, so the bright band travels through the
          LETTERS, not across a box. @supports-guarded: browsers without
          background-clip:text show plain solid cream (identical to the
          back layer — a visual no-op).
      At rest the band parks fully off the left edge; the headline is
      indistinguishable from the pre-animation styling.
   3. Very slow drift of the hero photo backdrop (JS moves background-position
      in a seamless 2-minute loop, +/-~1.6%, on the real .fixa-hero-photo).

   prefers-reduced-motion: the JS never builds the gleam layers — the H1
   renders exactly the pre-animation styling. Static orb, no drift.

   C replaces the B2 blend-mode overlay (Andrew: it read as a bar sliding
   across the headline box, not the letters catching light).
   ========================================================================== */

/* --- 1. Orb placement: centered, symmetrical, below the hero CTA --------- */
/* The CTA's bottom edge is anchored at bottom:35% (desktop) / 39.5% (mobile);
   the orb hangs 24px beneath it (96px orb + 24px gap = 120px). */
.fixa-hero-photo > .hero-orb {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: calc(35% - 120px);
  display: flex;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}
.hero-orb canvas {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  display: block;
}
/* No ambient halo: Andrew killed the blue cloud (build F). The orb reads
   purely from the dots themselves, drawn in the canvas. */
@media (max-width: 700px) {
  .fixa-hero-photo > .hero-orb { bottom: calc(39.5% - 120px); }
}

/* --- 2. H1 gleam: the bright band travels through the LETTERS ----------- */
.hero-anim #hero-title { position: relative; }
/* Back layer: identical markup, fully opaque, inherits the H1's original
   text-shadow — the depth/readability never changes. */
.hero-gleam-back {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
}
/* Front layer: carries the layout, no shadow; the animated gradient paints
   only the glyphs, so the gleam lives ON the letters. */
.hero-gleam-front {
  position: relative;
  display: block;
  margin: 0;
  color: #f7f4eb;       /* no-support fallback: plain solid cream text */
  text-shadow: none;    /* the shadow lives on the back layer only */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-gleam-front {
    background-image: linear-gradient(100deg,
      #f7f4eb 0%, #f7f4eb 42%, #ffffff 50%, #f7f4eb 58%, #f7f4eb 100%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0; /* parked: band fully off the left edge */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    will-change: background-position;
  }
}