/* ══════════════════════════════════════════════════════════════════════
   FIVE — HERO SPEED STREAKS  ·  hero-streaks.css          ⭐ LOCKED
   The animated blue line-flow effect from the Mach 5 hero.

   USAGE
     1. <link rel="stylesheet" href="css/hero-streaks.css">
     2. Put this INSIDE the hero, after the media layer:
          <div class="fv-streaks" data-streaks></div>
     3. <script src="js/hero-streaks.js"></script>   (before </body>)

   The host hero must be position:relative (all FIVE heroes already are).
   Streaks sit at z-index:2 — above the photo/video + its scrim, below
   the copy (hero content must be z-index:3 or higher).

   TUNING — set on the container, no CSS edits needed:
     data-streaks="20"        count          (default 14)
     data-speed="slow|fast"   duration band  (default normal)
     data-color="#00d4ff"     line color     (default FIVE blue)
     data-dir="rtl"           right-to-left  (default ltr)
   ══════════════════════════════════════════════════════════════════════ */

.fv-streaks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.fv-streaks i {
  position: absolute;
  height: 2px;
  left: -30%;
  border-radius: 2px;
  background: linear-gradient(90deg,
              transparent,
              var(--fv-streak, rgba(0, 174, 239, .85)),
              transparent);
  animation: fv-dash linear infinite;
  will-change: transform, opacity;
}

/* right-to-left variant */
.fv-streaks[data-dir="rtl"] i {
  left: auto;
  right: -30%;
  animation-name: fv-dash-rtl;
}

@keyframes fv-dash {
  0%   { transform: translateX(0);      opacity: 0; }
  8%   {                                opacity: 1; }
  92%  {                                opacity: 1; }
  100% { transform: translateX(210vw);  opacity: 0; }
}

@keyframes fv-dash-rtl {
  0%   { transform: translateX(0);       opacity: 0; }
  8%   {                                 opacity: 1; }
  92%  {                                 opacity: 1; }
  100% { transform: translateX(-210vw);  opacity: 0; }
}

/* Motion is decorative — never force it on users who opted out. */
@media (prefers-reduced-motion: reduce) {
  .fv-streaks { display: none; }
}