/*! blitz-halo.css — elektrischer Mehrfarb-Halo (Rotationswort + Highlight-Wort + Blitze + Tiles)
 *  Quelle der Wahrheit: shared/blitz-halo/  ·  Version 1.1.0
 *  Benötigt blitz-halo.js (injiziert den SVG-Knister-Filter #zap-text + Wort-Rotation + Mini-Blitze).
 *
 *  Klassen / IDs (nicht umbenennen, sonst Filter/Keyframes-Referenzen anpassen):
 *    .hl-rot / .hl-ghost / .hl-w   → Rotationswort (dunkle Füllung, vom Halo umrissen + Knistern)
 *    .hl-w--outline                → optionaler Alt-Look: zusätzlich weiße Kontur (Stand 1.0.0)
 *    .fx[data-t]                   → Highlight-Wort (weiß & ruhig; nur der Halo dahinter knistert)
 *    [data-zaps]                   → Mini-Blitze um das Wort (JS; "" = dicht, "soft" = dezent)
 *    .blitz-tile                   → Karte/Tile mit umlaufender Conic-Gradient-Umrandung beim Hover
 *    .blitz-tile--on               → Umrandung läuft dauerhaft (z. B. CTA-Panel)
 *    #zap-text                     → SVG-Filter (von blitz-halo.js injiziert)
 *    @keyframes halo               → orbitierender Mehrfarb-Halo
 *
 *  Konfig per CSS-Variablen (optional):
 *    --halo-bg   Füllfarbe des Rotationsworts (= eure Seitenfarbe!)
 *                Fallback-Kette: --halo-bg → --bg → #08080B
 *  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 — dunkle Füllung, vom Halo umrissen + Knistern (Look der Hauptseite) ============ */
.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 -> Wort nur vom Halo umrissen */
  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;
}
/* Alt-Look (Stand 1.0.0): zusätzlich weiße Kontur um die Buchstaben */
.hl-w--outline{-webkit-text-stroke:2.4px #fff;text-stroke:2.4px #fff;paint-order:stroke}

/* ============ 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;
}

/* ============ C) Mini-Blitze ums Wort — Layer wird von blitz-halo.js in [data-zaps]-Elemente injiziert ============ */
.hl-zaps{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hl-zaps path{
  fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(124,130,242,1)) drop-shadow(0 0 9px rgba(124,130,242,.7));
}

/* ============ D) Tiles — umlaufende Conic-Gradient-Umrandung + Shine-Sweep ============ */
/* Markup: class="blitz-tile" auf eine Karte mit eigenem border-radius + Hintergrund legen.
   Hover: Umrandung läuft um + Lichtstreifen wischt durch. ".blitz-tile--on" = Umrandung dauerhaft an. */
@property --blitz-a{syntax:'<angle>';initial-value:0deg;inherits:false}
.blitz-tile{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .25s ease}
.blitz-tile::after{                                   /* 1px-Gradient-Rahmen (Mask-Trick), rotiert via --blitz-a */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--blitz-a,0deg),rgba(124,130,242,.85),rgba(52,224,207,.35),rgba(192,97,255,.6),rgba(91,155,255,.35),rgba(124,130,242,.85));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s;
}
.blitz-tile::before{                                  /* Shine-Sweep */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.055) 50%,transparent 58%);
  transform:translateX(-130%);transition:transform .9s cubic-bezier(.4,0,.2,1);
}
.blitz-tile:hover{transform:translateY(-3px);box-shadow:0 22px 60px rgba(0,0,0,.4)}
.blitz-tile:hover::after{opacity:1;animation:blitzBorderSpin 3.2s linear infinite}
.blitz-tile:hover::before{transform:translateX(130%)}
.blitz-tile--on::after{opacity:1;animation:blitzBorderSpin 9s linear infinite}
@keyframes blitzBorderSpin{to{--blitz-a:360deg}}

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