/*! blitz-halo.css — elektrischer Mehrfarb-Halo (Rotationswort + Highlight-Wort)
 *  Quelle der Wahrheit: shared/blitz-halo/  ·  Version 1.0.0
 *  Benötigt blitz-halo.js (injiziert den SVG-Knister-Filter #zap-text + Wort-Rotation).
 *
 *  Klassen / IDs (nicht umbenennen, sonst Filter/Keyframes-Referenzen anpassen):
 *    .hl-rot / .hl-ghost / .hl-w   → Rotationswort (hohle Outline + Knistern auf der Schrift)
 *    .fx[data-t]                   → Highlight-Wort (weiß & ruhig; nur der Halo dahinter knistert)
 *    #zap-text                     → SVG-Filter (von blitz-halo.js injiziert)
 *    @keyframes halo               → orbitierender Mehrfarb-Halo
 *
 *  Konfig per CSS-Variablen (optional):
 *    --halo-bg   Hintergrundfarbe für die hohle Outline des Rotationsworts
 *                Fallback-Kette: --halo-bg → --bg → #08080B  (auf eure Seitenfarbe setzen!)
 *  Halo-Farben sind feste Hex-Werte (#5b9bff Blau · #ffa64a Amber · #34e0cf Türkis · #c061ff Violett
 *  + weißer Kern). Zum Umfärben unten in @keyframes halo und in den .hl-w/.fx text-shadows ersetzen.
 */

/* ============ orbitierender Mehrfarb-Halo: 4 Farben in verschiedene Richtungen, als Set kreisend ============ */
@keyframes halo{
  0%,100%{text-shadow:0 0 7px rgba(255,255,255,.5),10px 0 18px #5b9bff,0 10px 18px #ffa64a,-10px 0 18px #34e0cf,0 -10px 18px #c061ff}
  12.5%{text-shadow:0 0 7px rgba(255,255,255,.5),7px 7px 18px #5b9bff,-7px 7px 18px #ffa64a,-7px -7px 18px #34e0cf,7px -7px 18px #c061ff}
  25%{text-shadow:0 0 7px rgba(255,255,255,.5),0 10px 18px #5b9bff,-10px 0 18px #ffa64a,0 -10px 18px #34e0cf,10px 0 18px #c061ff}
  37.5%{text-shadow:0 0 7px rgba(255,255,255,.5),-7px 7px 18px #5b9bff,-7px -7px 18px #ffa64a,7px -7px 18px #34e0cf,7px 7px 18px #c061ff}
  50%{text-shadow:0 0 7px rgba(255,255,255,.5),-10px 0 18px #5b9bff,0 -10px 18px #ffa64a,10px 0 18px #34e0cf,0 10px 18px #c061ff}
  62.5%{text-shadow:0 0 7px rgba(255,255,255,.5),-7px -7px 18px #5b9bff,7px -7px 18px #ffa64a,7px 7px 18px #34e0cf,-7px 7px 18px #c061ff}
  75%{text-shadow:0 0 7px rgba(255,255,255,.5),0 -10px 18px #5b9bff,10px 0 18px #ffa64a,0 10px 18px #34e0cf,-10px 0 18px #c061ff}
  87.5%{text-shadow:0 0 7px rgba(255,255,255,.5),7px -7px 18px #5b9bff,7px 7px 18px #ffa64a,-7px 7px 18px #34e0cf,-7px -7px 18px #c061ff}
}

/* ============ A) Rotationswort — hohle weiße Outline + Knistern auf der Schrift + Halo ============ */
.hl-rot{position:relative;display:inline-block;white-space:nowrap;vertical-align:top}
.hl-ghost{visibility:hidden}   /* reserviert die Breite des LÄNGSTEN Wortes -> kein Springen/Umbruch (von JS gesetzt) */
.hl-w{
  position:absolute;left:0;top:0;
  color:var(--halo-bg, var(--bg, #08080B));          /* Füllung = Hintergrund -> hohle Buchstaben */
  -webkit-text-stroke:2.4px #fff; text-stroke:2.4px #fff; paint-order:stroke;
  filter:url(#zap-text);                             /* Knistern (Schrift UND Halo vibrieren) */
  text-shadow:0 0 7px rgba(255,255,255,.5),10px 0 18px #5b9bff,0 10px 18px #ffa64a,-10px 0 18px #34e0cf,0 -10px 18px #c061ff;
  animation:halo 9s linear infinite;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .42s cubic-bezier(.16,1,.3,1);
  will-change:transform,opacity,filter;
}

/* ============ B) Highlight-Wort — weiß & ruhig; nur der Halo dahinter knistert ============ */
.fx{position:relative;display:inline-block;color:#fff;z-index:0}   /* das Wort selbst: KEIN Filter -> bleibt scharf */
.fx::before{
  content:attr(data-t);                              /* Wort-Kopie (nur für den Halo) — data-t = sichtbares Wort */
  position:absolute;inset:0;z-index:-1;color:transparent;pointer-events:none;
  text-shadow:0 0 7px rgba(255,255,255,.5),10px 0 18px #5b9bff,0 10px 18px #ffa64a,-10px 0 18px #34e0cf,0 -10px 18px #c061ff;
  filter:url(#zap-text);                             /* Knistern nur auf dem Halo */
  animation:halo 9s linear infinite;
}

/* ============ Barrierefreiheit ============ */
@media(prefers-reduced-motion:reduce){
  .fx,.hl-w{filter:none;animation:none}
  .fx::before{filter:none}
}