/* Will of Fire — VFX overlay styles (impact frames, speed lines). FX owns this file (plan §5.1).
 *
 * One element, .sp-fx-overlay, created by js/fx/vfx.js inside #game (over the canvas, under #ui). vfx.js sets
 * --sp-fx-lines to a PNG data URL of radial ink lines (built once from a canvas) and toggles the classes:
 *   .is-speed   speed lines while the own player sprints or chakra-leaps (continuous, flickering)
 *   .is-flash   70 ms ink-line flash on hit-stop
 *   .is-impact  70 ms inverted "impact frame" (big jutsu impacts, >= 0.6 s apart)
 * Only opacity/transform animate (compositor-only). vfx.js never adds a class with prefers-reduced-motion; the
 * media query below is a second guard. docs/VFX_AND_AUDIO.md "Impact frames and hit-stop".
 */
.sp-fx-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-image: var(--sp-fx-lines, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: opacity, transform;
  z-index: 0;
}

.sp-fx-overlay.is-speed {
  opacity: 0.32;
  animation: sp-fx-speed 0.16s steps(2, jump-none) infinite;
}

.sp-fx-overlay.is-flash {
  opacity: 0.18;
  animation: none;
  transform: scale(1.04);
}

/* Inverted frame: white + difference blend inverts the scene; the ink lines show through un-inverted. */
.sp-fx-overlay.is-impact {
  opacity: 0.9;
  animation: none;
  transform: none;
  background-color: #fff;
  mix-blend-mode: difference;
}

@keyframes sp-fx-speed {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1.06) rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sp-fx-overlay { display: none; }
}