/* =====================================================================
   Light waves — travelling point of light along the existing wave paths.
   Separate motion layer. Not linked from index.html until integration.

   - The original <img class="light-wave"> assets are NOT touched; their
     static glow stays the base.
   - JS inserts one <svg class="light-wave lw-overlay"> right after each
     selected wave. Because it shares the .light-wave class it receives the
     exact same position/size rules from styles.css (.light-wave,
     .workflow .light-wave, .partnership-panel>.light-wave, .about>.light-wave,
     .contact-panel .light-wave, and the 1100px / 760px media rules), and it
     is excluded from `.section>*:not(.light-wave)` / `.partnership-panel>*`
     so it never becomes position:relative / z-index:1.
   - Animation runs only while `.lw-on` is set (in view + tab visible).
   ===================================================================== */

.lw-overlay {
  overflow: hidden;            /* same clip as the asset's clipPath */
  pointer-events: none;
  contain: strict;             /* paint stays inside the overlay box */
}

.lw-overlay .lw-dot {
  fill: none;
  stroke-linecap: round;
  /* stroke-width / stroke-dasharray are set by JS in screen pixels (see sizeDot) */
  stroke-dashoffset: -1000;                   /* parked past the end = invisible */
  opacity: 0;
  animation: lw-travel var(--lw-dur, 11s) cubic-bezier(.45, 0, .55, 1) var(--lw-delay, 0s) infinite;
  animation-play-state: paused;
}
.lw-overlay.lw-on .lw-dot { animation-play-state: running; }

/* three stacked strokes = soft glow without an SVG filter (cheaper to paint) */
.lw-overlay .lw-halo { stroke: #ff8a2a; }
.lw-overlay .lw-mid  { stroke: #ffb36b; }
.lw-overlay .lw-core { stroke: #fff1dc; }

/* Travels right → left (reading direction of the RTL page), then rests.
   Opacity ramps are long and gentle: no flash, no hard brightness change. */
@keyframes lw-travel {
  0%   { stroke-dashoffset: -1000; opacity: 0; }
  12%  { opacity: var(--lw-peak, .9); }
  58%  { opacity: var(--lw-peak, .9); }
  70%  { stroke-dashoffset: 20; opacity: 0; }
  100% { stroke-dashoffset: 20; opacity: 0; }
}
.lw-overlay .lw-halo { --lw-peak: .28; }
.lw-overlay .lw-mid  { --lw-peak: .6; }
.lw-overlay .lw-core { --lw-peak: .95; }

/* Reduced motion: static glow only (JS also skips creating overlays). */
@media (prefers-reduced-motion: reduce) {
  .lw-overlay { display: none !important; }
}