/* ============================================================
   35-hero-drift.css — slow ambient mesh-gradient drift on heroes

   Adds a near-imperceptible animated overlay on top of each hero
   so the background is never quite still. The motion is below
   the threshold where it pulls focus — visitors register the
   page as "alive" without consciously noticing why.

   Implementation: a conic-gradient with three colour stops in
   the brand palette, rotated slowly by animating the
   `--btb-mesh-angle` custom property (which is registered as an
   animatable <angle> via @property).
   ============================================================ */

@property --btb-mesh-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

#hero {
  position: relative;
  isolation: isolate;
}

#hero::after {
  content: "";
  position: absolute;
  /* Was `inset: -10%` originally; bled outside the hero and risked
     painting over modules directly above/below during the scroll
     parallax animation. Inset 0 keeps the mesh confined to the
     hero bounds. `#hero { overflow: hidden }` is set by
     32-scroll-driven.css so even slight bleed would be clipped,
     but inset 0 removes the risk entirely. */
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* A wide, soft conic gradient with three brand-coloured
     hot-spots and large transparent gaps. At ~18% opacity it
     adds depth without competing with the hero photo. */
  background: conic-gradient(
    from var(--btb-mesh-angle) at 50% 40%,
    rgba(249, 199, 79, 0.0) 0deg,
    rgba(249, 199, 79, 0.22) 30deg,
    rgba(45, 106, 79, 0.0) 90deg,
    rgba(30, 58, 95, 0.18) 200deg,
    rgba(249, 199, 79, 0.10) 290deg,
    rgba(249, 199, 79, 0.0) 360deg
  );
  filter: blur(60px);
  mix-blend-mode: screen;
  animation: btb-mesh-drift 24s linear infinite;
}

@keyframes btb-mesh-drift {
  from { --btb-mesh-angle: 0deg; }
  to   { --btb-mesh-angle: 360deg; }
}

/* Push the hero content above the drift layer */
#hero .container,
#hero .hero-copy,
#hero .hero-card,
#hero .hero-scroll-hint {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  #hero::after { animation: none; }
}