/* aurora-flow.css
   Animated brand-gradient highlight for hero accents.
   Wrap target text in <span class="fx-aurora">...</span>, or add the
   class to an existing accent element (e.g. .hero h1 em).

   Palette matches the existing per-page #ultra-v4 .hero h1 em gradient
   (dark = brand mid-blue -> brand light-blue, light = brand gold ->
   brand orange) so the animated state reads as the same two-tone
   accent customers already see, just in motion.

   Uses the canonical shiny-text pattern: 3-stop seamless loop
   (c1 -> c2 -> c1) at 200% width, animate background-position. Uses
   background-image longhand (not the background shorthand) so the
   bg-size/bg-position the animation drives aren't reset by the
   gradient declaration. */

.fx-aurora {
  --c1: #4da6e8;  /* matches dark-mode --accent-2 */
  --c2: #9bd0ff;  /* matches dark-mode em second stop */

  background-image: linear-gradient(
    90deg,
    var(--c1),
    var(--c2),
    var(--c1)
  ) !important;
  background-size: 200% auto !important;
  background-repeat: repeat !important;
  background-position: 0% center;
  background-color: transparent !important;

  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
          color: transparent !important;

  animation: aurora-sweep 4s linear infinite;
}

[data-theme="light"] .fx-aurora {
  --c1: #ffd76b;
  --c2: #ff7f3d;
}

@keyframes aurora-sweep {
  from { background-position:    0% center; }
  to   { background-position: -200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-aurora { animation: none; }
}

/* Fallback if background-clip: text is unsupported (very old browsers):
   paint the text in the brand accent color so the word does not vanish. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .fx-aurora {
    background-image: none !important;
    -webkit-text-fill-color: var(--c1) !important;
            color: var(--c1) !important;
  }
}