/* =====================================================================
   motion.css – Motion-Design-Ebene für „Aktuelle Einsätze OÖ“
   Wird nach dem Haupt-Stylesheet geladen. Alles hier ist rein additiv:
   fehlt die Datei, funktioniert das Dashboard unverändert.
   Bei „Bewegung reduzieren“ greift die bestehende globale Regel in
   index.html (animation/transition: none !important).
   ===================================================================== */

:root{
  --fx-ease-out: cubic-bezier(.16,1,.3,1);
  --fx-ease-io:  cubic-bezier(.65,0,.35,1);
  --fx-spring:   cubic-bezier(.18,1.55,.4,1);
  --fx-red: #AF2B1E;              /* RAL 3000, wie Einsatzlast */
}
:root[data-theme="dark"]{ --fx-red:#E0483B; }

/* ---------- 1. Aufbau beim Laden: Kopfzeile und Karte ----------
   Die Klasse fx-first setzt ein kleines Script im <head> bei jedem Laden der Seite
   (nicht bei „Bewegung reduzieren“, nicht im Bildschirm-Modus).
   Die Karte bleibt verborgen, bis motion.js den Aufbau startet (fx-building).
   Sicherheitsnetz: kommt der Aufbau nicht zustande, erscheint sie nach 6 Sekunden trotzdem. */
.fx-first #map{opacity:0;animation:fxSafety .5s ease 6s forwards}
.fx-first.fx-building #map{opacity:1;animation:none}
@keyframes fxSafety{to{opacity:1}}
/* Leerzustand der Liste („Keine Einsätze für diese Auswahl“) während des Zeitraffers nicht zeigen */
.fx-building .list .empty{visibility:hidden}

.fx-first .logomark path:first-of-type{stroke-dasharray:140;stroke-dashoffset:140;animation:fxDraw 1.15s var(--fx-ease-io) .05s forwards}
.fx-first .logomark path:nth-of-type(2){stroke-dasharray:80;stroke-dashoffset:80;animation:fxDraw .95s var(--fx-ease-io) .3s forwards}
.fx-first .logomark circle:first-of-type{transform-box:fill-box;transform-origin:center;animation:fxDotIn .5s var(--fx-spring) .55s backwards}
.fx-first .logomark circle:last-of-type{transform-box:fill-box;transform-origin:center;animation:fxDotIn .7s var(--fx-spring) .95s backwards}
@keyframes fxDraw{to{stroke-dashoffset:0}}
@keyframes fxDotIn{from{transform:scale(0);opacity:0}}

.fx-first .top h1{animation:fxTitle 1s var(--fx-ease-out) .2s backwards}
@keyframes fxTitle{
  from{clip-path:inset(-20% 100% -30% -5%);transform:translateX(-10px);letter-spacing:.04em}
  to  {clip-path:inset(-20% -5% -30% -5%);transform:none;letter-spacing:-.01em}
}
.fx-first #subline{animation:fxRise .7s var(--fx-ease-out) .55s backwards}
.fx-first .top-right{animation:fxRise .7s var(--fx-ease-out) .4s backwards}
@keyframes fxRise{from{opacity:0;transform:translateY(8px)}}

/* ---------- 2. Karte: Blasen, Alarmstufen, Übergänge ---------- */
.bubble{transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .22s var(--fx-ease-out)}
.bubble:hover{transform:scale(1.12)}
#map.dragging .bubble:hover{transform:none}
.bubble.fx-pop{animation:fxPop .8s var(--fx-spring) backwards}
@keyframes fxPop{0%{transform:scale(0);opacity:0}35%{opacity:1}100%{transform:scale(1)}}
.bubble.fx-pop-soft{animation:fxPopSoft .6s var(--fx-ease-out) backwards}
@keyframes fxPopSoft{from{transform:scale(.6);opacity:0}}

/* Dezente Variante (6 Stunden, Tag, 2 Tage): ruhigeres Atmen, kein Rot beim Zählen */
.fx-soft .bubble .alarmwash2,.fx-soft .bubble .alarmwash3{animation-name:fxBreathSoft;animation-duration:2.4s}
@keyframes fxBreathSoft{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
/* Puls für laufende Einsätze älter als 20 Minuten (Live-Ansicht) */
.pulse.fxpulse{animation:fxRunPulse 2.4s ease-out infinite}
@keyframes fxRunPulse{0%{transform:scale(.95);opacity:.7}70%,100%{transform:scale(1.8);opacity:0}}
.fx-soft .pulse.fxpulse{animation:fxSoftPulse 3.2s ease-out infinite}
@keyframes fxSoftPulse{0%{transform:scale(.95);opacity:.5}70%,100%{transform:scale(1.7);opacity:0}}
.fx-soft .kpi-hero .v.fx-counting,.fx-soft .kpi .v.fx-counting{color:inherit}
.fx-soft .fx-up::after{background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--fx-red) 9%,transparent) 50%,transparent 80%)}

/* Alarmstufe 2 und höher atmet: die Farbfläche pulsiert, alle im gleichen Takt */
.bubble .alarmwash2,.bubble .alarmwash3{transform-box:fill-box;transform-origin:center;animation:fxBreath 1.6s ease-in-out infinite}
@keyframes fxBreath{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}

/* Einsatzlast-Flächen blenden weich über, statt zu springen */
.heat,.heat.load{transition:fill .8s var(--fx-ease-out),fill-opacity .8s var(--fx-ease-out)}
.district{transition:fill .5s var(--fx-ease-out)}

/* Effektebene über der Karte (Wellen, Scan). Nie im Bild-Export, nie klickbar. */
.fxlayer{position:absolute;pointer-events:none;overflow:visible;z-index:1}
.fxring{fill:none;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.fxdisc{transform-box:fill-box;transform-origin:center}
.fxdist{vector-effect:non-scaling-stroke}

/* Sprechblase springt aus dem Punkt auf */
.callout:not([hidden]){transform-origin:50% 100%;animation:fxCoUp .42s var(--fx-spring)}
.callout.below:not([hidden]){transform-origin:50% 0;animation-name:fxCoDown}
@keyframes fxCoUp{from{transform:translate(-50%,-100%) scale(.55);opacity:0}}
@keyframes fxCoDown{from{transform:translate(-50%,14px) scale(.55);opacity:0}}

/* Pegel-Diagramm im Tooltip (Verlauf mit Warnmarken) */
.spk.fx-spk .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:fxDraw 1.1s var(--fx-ease-io) forwards;animation-delay:var(--fx-d,0ms)}
.spk.fx-spk .area{transform-box:fill-box;transform-origin:50% 100%;animation:fxAreaUp .9s var(--fx-ease-out) backwards;animation-delay:calc(var(--fx-d,0ms) + 250ms)}
@keyframes fxAreaUp{from{transform:scaleY(0);opacity:0}}
.spk.fx-spk .th{transform-box:fill-box;transform-origin:0 50%;animation:fxThIn .7s var(--fx-ease-out) backwards;animation-delay:calc(var(--fx-d,0ms) + 100ms)}
.spk.fx-spk .th2{animation-delay:calc(var(--fx-d,0ms) + 220ms)}
.spk.fx-spk .th3{animation-delay:calc(var(--fx-d,0ms) + 340ms)}
@keyframes fxThIn{from{transform:scaleX(0);opacity:0}}
.spk.fx-spk .end{transform-box:fill-box;transform-origin:center;animation:fxDotIn .5s var(--fx-spring) backwards;animation-delay:calc(var(--fx-d,0ms) + 1000ms)}

/* ---------- 3. Kennzahlen ---------- */
.kpi-hero,.kpi{position:relative;overflow:hidden}
.kpi-hero::after,.kpi::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--fx-red) 22%,transparent) 50%,transparent 80%);
  transform:translateX(-100%)}
.fx-up::after{animation:fxSweep 1.1s var(--fx-ease-out)}
.fx-down::after{background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--text) 10%,transparent) 50%,transparent 80%);animation:fxSweep 1.1s var(--fx-ease-out)}
@keyframes fxSweep{0%{opacity:1;transform:translateX(-100%)}100%{opacity:1;transform:translateX(100%)}}
.fx-roll{animation:fxRoll .5s var(--fx-ease-out)}
@keyframes fxRoll{from{transform:translateY(55%);opacity:0;filter:blur(2px)}}
.kpi-hero .v.fx-counting,.kpi .v.fx-counting{color:var(--fx-red)}
.kpi-hero .v,.kpi .v{transition:color .6s ease}

/* ---------- 5. Hinweise, Warnleisten, Rückmeldung ---------- */
.alertbar:not([hidden]){animation:fxBar .6s var(--fx-ease-out)}
@keyframes fxBar{from{opacity:0;transform:translateY(-12px);clip-path:inset(0 100% 0 0 round 14px)}to{clip-path:inset(0 0 0 0 round 14px)}}
.alertbar[data-level="3"]:not([hidden]) .ab-icon{animation:fxShake .6s ease .5s 2}
@keyframes fxShake{0%,100%{transform:none}20%{transform:rotate(-9deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
.toast:not([hidden]){animation:fxToast .55s var(--fx-spring)}
@keyframes fxToast{from{opacity:0;transform:translateY(-14px) scale(.96)}}

.toggle,.chip,.seg button,.iconbtn,.favbtn{transition:background .18s,color .18s,opacity .18s,transform .14s var(--fx-ease-out)}
.toggle:active,.chip:active,.seg button:active,.favbtn:active{transform:scale(.95)}
.play{transition:transform .2s var(--fx-spring)}
.play:hover{transform:scale(1.06)}

/* Rahmen-Aufleuchten bei neuer Alarmierung ab Alarmstufe 2 */
.fxedge{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0;
  box-shadow:inset 0 0 140px 24px var(--fx-edge,var(--fx-red)),inset 0 0 0 3px var(--fx-edge,var(--fx-red))}

/* Farbschema-Wechsel als kreisförmige Enthüllung (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

@media (prefers-reduced-motion:reduce){
  .fxlayer,.fxedge{display:none}
  .logomark path{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .fx-first #map{opacity:1!important}
}