/* ==========================================================================
   Hero banner art — homepage hero only (linked from index.html)

   WP #53 "Hero banner image & glowing button": the glowing half already
   ships site-wide in gold-glow.css, so this file is the banner half — one
   bespoke Nano Banana 2 artwork (images/hero/hero-bg-*.webp) behind the
   homepage hero, dark on the left where the headline, lede, CTAs and stat
   cells sit, gold labyrinth linework on the right behind the DaeOne card.

   Stacking: the wrapper is z-index 0 like .grid-bg::before, and comes after
   it in the DOM, so the artwork replaces the flat grid texture inside the
   hero (the art carries its own grid lines) while .grid-bg > .container
   (z-index 1) still paints above it. Keeping it at 0 rather than -1 means no
   ancestor background can hide it, and the OP #96 elevation layer — which
   loads later and adds its own .hero::after aurora — still composites on top
   untouched.

   The ::after scrim is two gradients: a horizontal one that keeps the text
   column at ~0.9 opacity over an already dark art so white copy stays well
   past WCAG 4.5:1, and a vertical one that sinks the band under the fixed
   navbar and blends the bottom edge into the next section. All decorative:
   the wrapper is aria-hidden and the img has an empty alt.

   <picture> picks 640/960/1376-wide art by viewport, so phones pull 8 KB
   instead of 25 KB. No motion, nothing to disable under reduced-motion.
   ========================================================================== */

.hero-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-banner picture {
  position: absolute;
  inset: 0;
  display: block;
}
.hero-banner img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the gold maze in frame on wide screens; the art's left third is
     the dark text bed the overlay then deepens. */
  object-position: 70% 50%;
}
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 14, 20, 0.88) 0%,
      rgba(10, 14, 20, 0.25) 16%,
      rgba(10, 14, 20, 0) 38%,
      rgba(10, 14, 20, 0.45) 80%,
      rgba(10, 14, 20, 0.95) 100%),
    linear-gradient(90deg,
      rgba(10, 14, 20, 0.94) 0%,
      rgba(10, 14, 20, 0.90) 34%,
      rgba(10, 14, 20, 0.66) 62%,
      rgba(10, 14, 20, 0.44) 100%);
}

/* Phones: the art is decorative and the text column is full-width, so the
   scrim goes up a notch and the crop favours the calmer left side. */
@media (max-width: 767px) {
  .hero-banner img { object-position: 62% 50%; }
  .hero-banner::after {
    background:
      linear-gradient(180deg,
        rgba(10, 14, 20, 0.9) 0%,
        rgba(10, 14, 20, 0.35) 18%,
        rgba(10, 14, 20, 0.45) 60%,
        rgba(10, 14, 20, 0.95) 100%),
      linear-gradient(90deg,
        rgba(10, 14, 20, 0.92) 0%,
        rgba(10, 14, 20, 0.86) 55%,
        rgba(10, 14, 20, 0.78) 100%);
  }
}