/**
 * Die beiden "Atem-Kreise" (Halo-Ringe) hinter dem Verstext. Ihre Größe
 * und Deckkraft werden NICHT mehr per festem CSS-Keyframe animiert,
 * sondern live von assets/js/breathing-engine.js an ein Atem-Muster aus
 * assets/js/breathing-patterns.js angepasst: bei "Einatmen" dehnen sie
 * sich aus, bei "Ausatmen" ziehen sie sich zusammen, bei "Halten"
 * bleiben sie unverändert stehen (die Basiswerte hier sind nur der
 * Ruhezustand, bevor die Engine übernimmt).
 *
 * Größe: An vmin (kleinere Bildschirmseite) statt vw gekoppelt, damit
 * die Kreise bei voller Ausdehnung (Einatmen) auf JEDEM Bildschirm
 * einen großen, gut gefüllten Anteil einnehmen, ohne über den Rand
 * hinauszulaufen — 70vmin Basisgröße * maximal 1.22 (Skalierung beim
 * Einatmen, siehe breathing-engine.js) ergibt ca. 85vmin, lässt also
 * bewusst etwas Luft zum Bildschirmrand.
 *
 * Ein-/Ausblenden über die Einstellung "Atem-Kreise anzeigen":
 * Body-Klasse "emds-breathing-hidden" (gesetzt von
 * assets/js/settings-applier.js). WICHTIG: hier bewusst über opacity,
 * NICHT display:none — ein per display:none verstecktes Element hat für
 * den Browser keinen "aktuellen" Zustand, von dem aus eine CSS-Transition
 * starten könnte. Würde man es per display wieder einblenden UND im
 * selben Moment (siehe breathing-engine.js: start() direkt nach dem
 * Einschalten) eine neue Transition auslösen, überspringt der Browser
 * die Animation einfach und springt hart zum Zielwert — genau das war
 * der Bug beim Aus-/Wiedereinschalten. Mit opacity bleibt das Element
 * durchgehend im Layout/Rendering, wodurch jede Transition (auch direkt
 * nach dem Wiedereinschalten) sauber animiert.
 *
 * Siehe MANUAL.md, Abschnitt "Atem-Kreise (Breathing)".
 */

.halo{
  position: absolute;
  left: 50%; top: 50%;
  width: 70vmin;
  height: 70vmin;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.7;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.halo.inner{
  width: 50vmin;
  height: 50vmin;
  border-color: color-mix(in srgb, var(--mist) 16%, transparent);
}

body.emds-breathing-hidden .halo{
  opacity: 0;
}