/* Animationen und Effekte des Teamraums.
   Alles gilt nur mit data-animationen="an" am <html> (eigene Wahl oder Vorgabe des Admins).
   Jeder Effekt hat einen Schalter (data-ohne="licht glas …" listet die ausgeschalteten) und eine Stärke
   (--fx-<effekt>, 0 bis 2, Standard 1), beides vom Admin auf der Seite „Effekte“ (apps/raum/effekte.py).
   Bewegung läuft über transform/translate/scale/rotate und opacity. Bei vis-timeline und Excalidraw nie
   transform setzen, die positionieren selbst damit. „Bewegung reduzieren“ im System: ganz unten. */

/* ------------------------------------------------------------ Grundwerte und Übergänge (bei Animationen an) */
:root[data-animationen="an"] {
  --feder: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sanft: cubic-bezier(0.2, 0.8, 0.2, 1);
  --glas-rand: rgb(255 255 255 / 0.6);
  --glas-licht: rgb(255 255 255 / 0.7);
  --glanz: rgb(255 255 255 / 0.32);
  --a1: 0.32;
  --a2: 0.2;
  --a3: 0.17;
  --a4: 0.14;
  --a4-farbe: 194 65 12;

  & .knopf {
    transition:
      transform 280ms var(--feder),
      translate 260ms var(--feder),
      box-shadow 280ms var(--sanft),
      background-color 160ms,
      border-color 160ms,
      background-position 800ms var(--sanft);
  }
  & .knopf.symbol[aria-pressed="true"] { color: var(--aktion); }
  & .haupt a { transition: background-color 200ms, color 200ms, translate 260ms var(--feder); }
  & .marke img { transition: rotate 700ms var(--feder), scale 400ms var(--feder); }
  & .kopf-marke img { transition: rotate 900ms var(--feder); }
  & :is(.kreis, .tr-kreis) { transition: transform 320ms var(--feder), box-shadow 320ms; }
  & .reiter a { transition: translate 260ms var(--feder), background-color 200ms, border-color 200ms; }
  & :is(.kurzliste li, .ereignis) { transition: translate 300ms var(--sanft); }
  & .aufgabe {
    transition: opacity 450ms var(--sanft), translate 450ms var(--feder), scale 450ms var(--feder), background-color 250ms;
  }
  & .abhaken { transition: scale 300ms var(--feder); }
  & :is(.tr-knopf, .tr-farbe) { transition: scale 260ms var(--feder), background-color 160ms; }
  & .zeitstrahl-flaeche .vis-item { transition: translate 240ms var(--feder), box-shadow 240ms; }
}
@media (prefers-color-scheme: dark) {
  :root[data-animationen="an"][data-thema="system"] {
    --glas-rand: rgb(255 255 255 / 0.09);
    --glas-licht: rgb(255 255 255 / 0.08);
    --glanz: rgb(255 255 255 / 0.08);
    --a1: 0.3;
    --a2: 0.26;
    --a3: 0.2;
    --a4: 0.16;
    --a4-farbe: 190 24 93;
  }
}
:root[data-animationen="an"][data-thema="dunkel"] {
  --glas-rand: rgb(255 255 255 / 0.09);
  --glas-licht: rgb(255 255 255 / 0.08);
  --glanz: rgb(255 255 255 / 0.08);
  --a1: 0.3;
  --a2: 0.26;
  --a3: 0.2;
  --a4: 0.16;
  --a4-farbe: 190 24 93;
}

/* ------------------------------------------------------------ Licht im Hintergrund
   Zwei Ebenen weicher Farbflecken, Leuchtkraft = --fx-licht. Die Drift läuft über rotate/scale. */
:root[data-animationen="an"]:not([data-ohne~="licht"]) {
  --l: var(--fx-licht, 1);

  & body { isolation: isolate; }
  & body::before,
  & body::after {
    content: "";
    position: fixed;
    inset: -18vmax;
    z-index: -1;
    pointer-events: none;
    will-change: translate, rotate, scale;
  }
  & body::before {
    background:
      radial-gradient(closest-side at 24% 26%, rgb(6 154 193 / calc(var(--a1) * var(--l))), transparent),
      radial-gradient(closest-side at 78% 18%, rgb(124 58 237 / calc(var(--a2) * var(--l))), transparent),
      radial-gradient(closest-side at 62% 84%, rgb(21 128 61 / calc(var(--a3) * var(--l))), transparent);
    translate: calc(var(--maus-x, 0) * -22px * var(--px, 0))
      calc((var(--maus-y, 0) * -16px + var(--scroll, 0) * -0.06px) * var(--px, 0));
    animation: aurora-a 30s var(--sanft) infinite alternate;
  }
  & body::after {
    background:
      radial-gradient(closest-side at 30% 72%, rgb(var(--a4-farbe) / calc(var(--a4) * var(--l))), transparent),
      radial-gradient(closest-side at 86% 58%, rgb(6 154 193 / calc(var(--a1) * var(--l))), transparent),
      radial-gradient(closest-side at 50% 40%, rgb(124 58 237 / calc(var(--a2) * var(--l))), transparent 70%);
    opacity: 0.75;
    translate: calc(var(--maus-x, 0) * -58px * var(--px, 0))
      calc((var(--maus-y, 0) * -42px + var(--scroll, 0) * -0.2px) * var(--px, 0));
    animation: aurora-b 38s var(--sanft) infinite alternate;
  }
}
@keyframes aurora-a { from { rotate: 0deg; scale: 1; } to { rotate: 14deg; scale: 1.14; } }
@keyframes aurora-b { from { rotate: 0deg; scale: 1.1; } to { rotate: -18deg; scale: 0.94; } }

/* ------------------------------------------------------------ Parallaxe: Weg = --fx-parallax. effekte.js setzt
   --maus-x/--maus-y (−1 bis 1) und --scroll (Pixel). Wirkt auf das Licht. */
:root[data-animationen="an"]:not([data-ohne~="parallax"]) { --px: var(--fx-parallax, 1); }

/* ------------------------------------------------------------ Glas: Unschärfe und Durchsicht = --fx-glas */
:root[data-animationen="an"]:not([data-ohne~="glas"]) {
  --unschaerfe: calc(18px * var(--fx-glas, 1));
  --glas: color-mix(in srgb, var(--karte) calc(100% - 34% * var(--fx-glas, 1)), transparent);
  --glas-stark: color-mix(in srgb, var(--karte) calc(100% - 16% * var(--fx-glas, 1)), transparent);

  & :is(.karte, .aufgabenliste) {
    background: var(--glas);
    -webkit-backdrop-filter: blur(var(--unschaerfe)) saturate(1.6);
    backdrop-filter: blur(var(--unschaerfe)) saturate(1.6);
    border-color: var(--glas-rand);
    box-shadow: inset 0 1px 0 var(--glas-licht), 0 18px 40px -26px var(--schatten);
  }
  & .leiste {
    background: color-mix(in srgb, var(--karte) calc(100% - 42% * var(--fx-glas, 1)), transparent);
    -webkit-backdrop-filter: blur(calc(22px * var(--fx-glas, 1))) saturate(1.8);
    backdrop-filter: blur(calc(22px * var(--fx-glas, 1))) saturate(1.8);
    border-bottom-color: var(--glas-rand);
    transition: box-shadow 300ms var(--sanft);
  }
  &[data-gescrollt] .leiste { box-shadow: 0 10px 30px -18px var(--schatten); }
  & :is(.reiter a:not([aria-current]), .knopf:not(.haupt):not(.leise), input, select, textarea) {
    background-color: var(--glas-stark);
  }
  & .dialog {
    background: var(--glas-stark);
    -webkit-backdrop-filter: blur(calc(26px * var(--fx-glas, 1))) saturate(1.7);
    backdrop-filter: blur(calc(26px * var(--fx-glas, 1))) saturate(1.7);
    border: 1px solid var(--glas-rand);
  }
  & .dialog::backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  & .board-kopf {
    background: var(--glas);
    -webkit-backdrop-filter: blur(var(--unschaerfe));
    backdrop-filter: blur(var(--unschaerfe));
  }
  & .excalidraw .Island {
    background-color: color-mix(in srgb, var(--island-bg-color) calc(100% - 28% * var(--fx-glas, 1)), transparent) !important;
    -webkit-backdrop-filter: blur(calc(14px * var(--fx-glas, 1))) saturate(1.5);
    backdrop-filter: blur(calc(14px * var(--fx-glas, 1))) saturate(1.5);
  }
  & .tr-info {
    background: var(--glas-stark);
    -webkit-backdrop-filter: blur(var(--unschaerfe)) saturate(1.6);
    backdrop-filter: blur(var(--unschaerfe)) saturate(1.6);
  }
  & .zeitstrahl-flaeche .vis-timeline {
    background: var(--glas);
    -webkit-backdrop-filter: blur(var(--unschaerfe)) saturate(1.5);
    backdrop-filter: blur(var(--unschaerfe)) saturate(1.5);
    border-color: var(--glas-rand);
  }
  & .zeitstrahl-flaeche :is(.vis-panel.vis-top, .vis-time-axis.vis-foreground) {
    background: color-mix(in srgb, var(--flaeche) 55%, transparent);
  }
}

/* ------------------------------------------------------------ Karten neigen sich: Winkel = --fx-neigen
   (effekte.js setzt --kipp-x/--kipp-y und den Lichtpunkt --licht-x/--licht-y). */
:root[data-animationen="an"]:not([data-ohne~="neigen"]) {
  & .karte {
    position: relative;
    transition: transform 500ms var(--sanft), box-shadow 500ms var(--sanft), translate 500ms var(--sanft);
  }
  & .karte[data-kippt]:not(:focus-within) {
    transform: perspective(1100px) rotateX(var(--kipp-y, 0deg)) rotateY(var(--kipp-x, 0deg));
    translate: 0 calc(-4px * min(1.5, var(--fx-neigen, 1)));
    transition-duration: 140ms;
    box-shadow: inset 0 1px 0 var(--glas-licht), 0 30px 50px -28px var(--schatten);
  }
  & .karte::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(480px circle at var(--licht-x, 50%) var(--licht-y, 0%), var(--glanz), transparent 42%);
    opacity: 0;
    transition: opacity 400ms var(--sanft);
  }
  & .karte[data-kippt]::after { opacity: min(1, var(--fx-neigen, 1)); }
}

/* ------------------------------------------------------------ Federn beim Überfahren: Ausschlag = --fx-federn */
:root[data-animationen="an"]:not([data-ohne~="federn"]) {
  --hub: var(--fx-federn, 1);

  & .knopf:hover {
    transform: translateY(calc(-2px * var(--hub))) scale(calc(1 + 0.035 * var(--hub)));
    box-shadow: 0 10px 22px -12px var(--schatten);
  }
  & .knopf:active { transform: scale(calc(1 - 0.04 * var(--hub))); transition-duration: 90ms; }
  & .knopf.leise:hover { box-shadow: none; }
  /* Lichtstreifen über den Hauptknopf */
  & .knopf.haupt {
    background-image: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.38) 50%, transparent 65%);
    background-size: 260% 100%;
    background-position: 130% 0;
    background-repeat: no-repeat;
  }
  & .knopf.haupt:hover {
    background-position: -30% 0;
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--aktion) 70%, transparent);
  }
  & .haupt a:hover { translate: 0 calc(-2px * var(--hub)); }
  & .marke:hover img { rotate: calc(-14deg * var(--hub)); scale: calc(1 + 0.12 * var(--hub)); }
  & .kopf-marke:hover img { rotate: 360deg; }
  & :is(.person:hover, .person-chip:hover) .kreis,
  & .tr-kreis:hover {
    transform: scale(calc(1 + 0.2 * var(--hub))) rotate(calc(-8deg * var(--hub)));
    box-shadow: 0 0 0 calc(4px * var(--hub)) color-mix(in srgb, var(--farbe) 22%, transparent);
  }
  & .reiter a:hover { translate: 0 calc(-2px * var(--hub)); }
  & :is(.kurzliste li, .ereignis):hover { translate: calc(5px * var(--hub)) 0; }
  & .aufgabe:hover { background: color-mix(in srgb, var(--aktion) 6%, transparent); }
  & .abhaken:hover { scale: calc(1 + 0.15 * var(--hub)); }
  & .tr-knopf:hover { scale: calc(1 + 0.05 * var(--hub)); }
  & .tr-knopf:active { scale: 0.95; }
  & .tr-farbe:hover { scale: calc(1 + 0.15 * var(--hub)); }
  & .zeitstrahl-flaeche .vis-item:hover {
    translate: 0 calc(-2px * var(--hub));
    box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--farbe) 75%, transparent);
    z-index: 3;
  }
}

/* ------------------------------------------------------------ Einblenden: Weg = --fx-einblenden */
:root[data-animationen="an"]:not([data-ohne~="einblenden"]) {
  --weg: var(--fx-einblenden, 1);

  & :is(.titelzeile, .raster > *, .filterzeile, .aufgabenliste, .zeitstrahl-kopf, .board-kopf, .karte.schmal) {
    animation: auftauchen 700ms var(--sanft) backwards;
  }
  & .raster > :nth-child(2) { animation-delay: 80ms; }
  & .raster > :nth-child(3) { animation-delay: 160ms; }
  & .raster + .raster > :nth-child(1) { animation-delay: 220ms; }
  & .raster + .raster > :nth-child(2) { animation-delay: 300ms; }
  & :is(.verlauf .ereignis, .effektliste .effekt) {
    animation: auftauchen 600ms var(--sanft) backwards;
    animation-delay: calc(min(var(--n, 0), 14) * 35ms + 200ms);
  }
  /* Begrüßung: ein Lichtschimmer läuft einmal durch die Überschrift */
  & .titelzeile h1 {
    background: linear-gradient(100deg, var(--text) 0 42%, var(--logo-cyan) 50%, var(--text) 58% 100%) 0 0 / 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: schimmer 2.6s 500ms var(--sanft) both;
  }
  & .dialog[open] { animation: dialog-auf 380ms var(--feder); }
  & .dialog[open]::backdrop { animation: blende 300ms ease; }
  & .meldung { animation: meldung 520ms var(--feder); }
  & .tr-marke { animation: marke-auf 420ms var(--feder) backwards; }
  & .tr-farbmenue { animation: dialog-auf 300ms var(--feder); transform-origin: top right; }
  & :is(.aufgabe.htmx-added, .htmx-added .aufgabe) { opacity: 0; translate: 0 calc(-10px * var(--weg)); scale: 0.98; }
}
@keyframes auftauchen {
  from { opacity: 0; translate: 0 calc(16px * var(--weg, 1)); scale: calc(1 - 0.015 * var(--weg, 1)); }
}
@keyframes schimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes dialog-auf {
  from { opacity: 0; scale: calc(1 - 0.06 * var(--weg, 1)); translate: 0 calc(12px * var(--weg, 1)); }
}
@keyframes blende { from { opacity: 0; } }
@keyframes meldung { from { opacity: 0; translate: 0 calc(-14px * var(--weg, 1)); scale: 0.97; } }
@keyframes marke-auf { from { opacity: 0; translate: 0 calc(6px * var(--weg, 1)); scale: 0.85; } }

/* ------------------------------------------------------------ Abhaken: Haken federt, Linie wächst (Konfetti in effekte.js) */
:root[data-animationen="an"]:not([data-ohne~="abhaken"]) {
  & .abhaken:checked { animation: haken 420ms var(--feder); }
  & .aufgabe.erledigt .titel {
    justify-self: start; /* Linie nur so lang wie der Titel */
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 58% / 100% 1.5px no-repeat;
    animation: durchstreichen 500ms var(--sanft);
  }
}
@keyframes haken { 40% { scale: calc(1 + 0.35 * var(--fx-abhaken, 1)); } }
@keyframes durchstreichen { from { background-size: 0 1.5px; } }

/* ------------------------------------------------------------ Puls und Glühen: Stärke = --fx-puls */
:root[data-animationen="an"]:not([data-ohne~="puls"]) {
  & #bewegung-knopf svg { animation: funkeln 3.6s ease-in-out infinite; }
  & .board-status[data-status="verbunden"]::before { animation: puls 2.4s ease-out infinite; }
  & .zeitstrahl-flaeche .vis-current-time { animation: jetzt 2.8s ease-in-out infinite; }
}
@keyframes funkeln {
  0%, 80%, 100% { rotate: 0deg; scale: 1; }
  88% { rotate: calc(18deg * var(--fx-puls, 1)); scale: calc(1 + 0.2 * var(--fx-puls, 1)); }
}
@keyframes puls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok-punkt) 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 calc(7px * var(--fx-puls, 1)) transparent; }
}
@keyframes jetzt {
  50% { box-shadow: 0 0 calc(14px * var(--fx-puls, 1)) calc(3px * var(--fx-puls, 1)) rgb(194 65 12 / 0.55); }
}

/* ------------------------------------------------------------ Konfetti-Teilchen (effekte.js) */
.konfetti {
  position: fixed;
  z-index: 100;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  pointer-events: none;
}

/* ------------------------------------------------------------ Bewegung reduzieren: Glas und Licht bleiben, Bewegung nicht */
@media (prefers-reduced-motion: reduce) {
  :root[data-animationen="an"] body::before,
  :root[data-animationen="an"] body::after { animation: none; translate: none; }
  :root[data-animationen="an"] .karte[data-kippt]:not(:focus-within) { transform: none; translate: none; }
}