/* ============================================================================
   LIGHTNING-STRIKE SYSTEM  ·  service.tnaado.ca
   ----------------------------------------------------------------------------
   Reusable red (#c8102e) lightning hero effect, ported from the media site
   (tnaado-media-next-fix/show.html .fm-hero-lightning + fmBoltGlow/Halo +
   .fm-lightning-wash). One CSS + one JS file drive 8 distinct strike variants.

   USAGE (drop-in, see js/lightning.snippet.html for copy-paste blocks):
     1. <link rel="stylesheet" href="/css/lightning.css">
     2. Inside a position:relative hero, paste the SVG markup for strike N
        (.ltn .ltn--N) plus the optional .ltn-wash div.
     3. <script src="/js/lightning.js" defer></script>  (once per page)

   The engine auto-discovers every .ltn[data-ltn] on the page, runs the
   charge -> hold -> double-flicker -> fade -> rest cycle, and honours
   html.js-motion + prefers-reduced-motion.  No strobe when motion is off.

   The legacy .fm-hero-lightning / .fm-bolt-* class set from the media port is
   ALSO recognised by lightning.js, so existing heroes keep working.
   ============================================================================ */

:root {
  --ltn-red:  #c8102e;   /* brand red — bolt halo/outer/branch */
  --ltn-core: #ff4468;   /* hot white-red core filament       */
}

/* ── container ──────────────────────────────────────────────────────────── */
.ltn {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

/* ── bolt layers (opacity driven by JS; static fallback below) ──────────── */
.ltn-halo,
.ltn-outer,
.ltn-core,
.ltn-branch,
.ltn-branch-core { opacity: 0; }

/* ── sky-wash: the red glow that "lights the cloud" behind the strike ───── */
.ltn-wash {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  /* default placement = top-right; override per-variant with --wash-* vars  */
  top:    var(--wash-top, -8%);
  right:  var(--wash-right, -4%);
  left:   var(--wash-left, auto);
  bottom: var(--wash-bottom, auto);
  width:  var(--wash-w, 65%);
  height: var(--wash-h, 75%);
  background: radial-gradient(
    ellipse 58% 52% at var(--wash-x, 82%) var(--wash-y, 18%),
    rgba(200, 16, 46, .30) 0%,
    rgba(200, 16, 46, .11) 48%,
    transparent 70%
  );
}
html.js-motion .ltn-wash {
  animation: ltnWashBreath 14.43s cubic-bezier(.45, 0, .55, 1) infinite;
  animation-delay: var(--wash-delay, 2.8s);
}
@keyframes ltnWashBreath {
  0%   { opacity: 0;   }
  17%  { opacity: 1;   }
  24%  { opacity: .58; }
  88%  { opacity: .58; }
  94%  { opacity: 1;   }
  94.6%{ opacity: .07; }
  95.3%{ opacity: 1;   }
  96.5%{ opacity: .07; }
  100% { opacity: 0;   }
}

/* ── per-variant wash placement tweaks ──────────────────────────────────── */
.ltn--2 .ltn-wash { --wash-x: 38%; --wash-y: 14%; --wash-left: -6%; --wash-right: auto; --wash-w: 70%; }
.ltn--4 .ltn-wash { --wash-x: 96%; --wash-y: 30%; --wash-w: 50%; --wash-h: 90%; }
.ltn--6 .ltn-wash { --wash-x: 50%; --wash-y: 10%; --wash-left: 18%; --wash-right: auto; --wash-w: 64%; }
.ltn--7 .ltn-wash { background: radial-gradient(ellipse 50% 45% at 78% 22%, rgba(200,16,46,.16) 0%, transparent 68%); }
.ltn--8 .ltn-wash { --wash-x: 50%; --wash-y: 8%; --wash-left: 8%; --wash-right: auto; --wash-w: 84%; --wash-h: 60%; }

/* ── REDUCED MOTION / no-JS: a calm static glow, never a strobe ─────────── */
@media (prefers-reduced-motion: reduce) {
  .ltn-wash { opacity: .30 !important; animation: none !important; }
  .ltn-halo  { opacity: .12 !important; }
  .ltn-outer { opacity: .22 !important; }
  .ltn-core  { opacity: .35 !important; }
  .ltn-branch,
  .ltn-branch-core { opacity: 0 !important; }
}
/* When JS never ran (no .js-motion) keep the bolt invisible but show a hint
   of wash so the hero still reads as "charged". */
html:not(.js-motion) .ltn-wash { opacity: .22; }