/* ════════════════════════════════════════════════════════════════════════
   critical.css — Kritisches Anti-FOUC (bewusst die ERSTE, un-layered CSS-Datei)
   ────────────────────────────────────────────────────────────────────────
   Zweck: JS-hydrierte Zonen (Server liefert nur ein Leer-Default, JS füllt sie)
   verborgen halten, bis ihr Modul sie als `data-ready` markiert — damit NIE das
   Default („Kein Charakter", leere Listen, leere Doll) durchblitzt.

   WARUM hier und nicht in einer @layer-Datei: Die übrigen 13 Stylesheets laden
   einzeln nacheinander; bei langsamem Netz greift eine Versteck-Regel in einer
   späten Datei erst nach Sekunden → Default sichtbar (verifizierter FOUC). Diese
   Datei wird als ERSTES `<link>` geladen und ist un-layered → gilt vor jedem
   @layer-CSS und ist vor dem ersten Paint aktiv, unabhängig von der Ladereihenfolge.

   Generisch: JEDE hydrierte Zone trägt im Server-Markup `data-hydrate`; bootstrap.js
   `lazy()` setzt nach dem Init `data-ready`. Neue Features erben das automatisch —
   kein Anti-FOUC-Pflaster pro Feature mehr.

   Fallback: Nach 8s blendet die Animation auch ohne/bei defektem JS ein (kein
   Dauer-Blank). data-ready gewinnt (animation:none) und blendet sanft ein.
   ════════════════════════════════════════════════════════════════════════ */
[data-hydrate] {
  opacity: 0;
  animation: evpw-hydrate-fallback 0s linear 8s forwards;
}

[data-hydrate][data-ready] {
  opacity: 1;
  animation: none;
  transition: opacity 0.15s ease;
}

@keyframes evpw-hydrate-fallback {
  to {
    opacity: 1;
  }
}