/* ============================================================
   39-hero-spotlight.css — cursor-following spotlight on hero

   A radial gradient "light" follows the cursor around the hero
   section, painting a subtle warm halo wherever the mouse is.
   Reads as if the visitor is shining a small torch onto the
   product photo. Adds tactile depth.

   Implementation: two CSS custom properties (`--cursor-x`, `--cursor-y`)
   on the hero element are updated by a tiny pointermove handler
   in the existing hero JS. The CSS draws the radial gradient
   keyed off those properties.

   The JS hook is wired in `js/hero-spotlight.js` (8 lines of
   JS, no dependencies). Falls back to a static off-centre
   spotlight if the script doesn't load.
   ============================================================ */

@property --btb-cursor-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 70%;
}
@property --btb-cursor-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 30%;
}

#hero {
  --btb-cursor-x: 70%;
  --btb-cursor-y: 30%;
}

#hero::before {
  /* This pseudo-element already exists in 04-hero.css for the
     existing gold radial. We chain a second radial here that
     responds to cursor position. The two compose cleanly. */
  background:
    radial-gradient(
      circle 320px at var(--btb-cursor-x) var(--btb-cursor-y),
      rgba(249, 199, 79, 0.22) 0%,
      rgba(249, 199, 79, 0.10) 30%,
      transparent 60%
    ),
    radial-gradient(ellipse at 80% 20%, rgba(249,199,79,0.18) 0%, transparent 60%);
  /* Smooth transition between updates so the spotlight doesn't
     snap mid-motion */
  transition: background-position 0.4s ease;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  /* Phones + reduce-motion: keep the original static gradient */
  #hero::before {
    background: radial-gradient(ellipse at 80% 20%, rgba(249,199,79,0.18) 0%, transparent 60%);
  }
}