/* ============================================================
   43-hero-text-gradient.css — animated gradient sweep on hero accent

   The hero H1 has an `<em>` element wrapping the yellow accent
   words ("Done by the builder, not a sales rep"). Currently it's
   a flat `--c-yellow`. This module replaces that with a slowly
   animated gradient that sweeps gold → yellow → warm-gold →
   yellow → gold over 6 seconds, then loops.

   Uses background-clip: text + an animatable @property for the
   gradient angle. Browsers without @property support get the
   static gradient (still looks premium).

   Tasteful: 6 second loop, low contrast between stops, no
   pulsing. Reads as "warm light catching the surface" not
   "neon sign."
   ============================================================ */

@property --btb-text-gradient-pos {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.hero-copy h1 em,
.hero-copy h2 em {
  /* Replace the existing flat yellow with a multi-stop gradient.
     The middle stop is brighter so the "highlight" reads as a
     sweep, not a flicker. */
  background-image: linear-gradient(
    100deg,
    var(--c-yellow-dark) 0%,
    var(--c-yellow) 30%,
    #ffe184 50%,
    var(--c-yellow) 70%,
    var(--c-yellow-dark) 100%
  );
  background-size: 300% 100%;
  background-position: var(--btb-text-gradient-pos) center;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: btb-hero-text-sweep 6s ease-in-out infinite;
  /* Soft drop-shadow gives depth without losing the gradient */
  filter: drop-shadow(0 1px 0 rgba(180, 120, 0, 0.25));
}

@keyframes btb-hero-text-sweep {
  0%   { --btb-text-gradient-pos: 0%; }
  50%  { --btb-text-gradient-pos: 100%; }
  100% { --btb-text-gradient-pos: 0%; }
}

/* Fallback: browsers without @property animation get a static
   gradient — still richer than a flat colour, no animation jitter. */
@supports not (background-position: var(--btb-text-gradient-pos)) {
  .hero-copy h1 em,
  .hero-copy h2 em {
    animation: none;
    background-position: 50% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy h1 em,
  .hero-copy h2 em {
    animation: none;
    background-position: 50% center;
  }
}