/* Animationen — wiederverwendbare Klassen. Von allen Modulen nutzbar. */
@keyframes cc-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes cc-slide-up { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes cc-pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.06) } }

.anim-fade-in { animation: cc-fade-in var(--dur) ease both; }
.anim-slide-up { animation: cc-slide-up var(--dur) ease both; }
.anim-pulse { animation: cc-pulse var(--dur-slow) ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════════════════════
   Auftritt von Flächen: Rahmen zuerst, Inhalt als Welle hinterher.
   Owner dieser Bewegung ist ausschliesslich dieses Modul — window.css und
   sidebar.css setzen nur noch die Klassen, damit Fenster und Sidebar nicht
   auseinanderlaufen.

   Stellschrauben (bewusst hier und nicht im Kern: sie beschreiben EINE Bewegung,
   nicht das Grundraster):
     --wave-span   wie lange die Welle über den ganzen Inhalt braucht
     --wave-dur    Dauer für ein einzelnes Element
     --wave-shift  Versatz, aus dem ein Element hereinkommt
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --wave-span: .34s;
  --wave-dur: .26s;
  --wave-shift: 7px;
}

/* ── Rahmen ───────────────────────────────────────────────────────────────
   Der Rahmen ist schnell (--dur) — er soll nur „da sein", die Aufmerksamkeit
   trägt die Welle im Inhalt. */
@keyframes cc-frame-in  { from { opacity: 0; transform: scale(.95) } to { opacity: 1; transform: none } }
@keyframes cc-frame-out { from { opacity: 1; transform: none } to { opacity: 0; transform: scale(.97) } }

.cc-frame-in  { animation: cc-frame-in  var(--dur) var(--ease) both; }
.cc-frame-out { animation: cc-frame-out var(--dur-fast) var(--ease) both; }

/* ── Inhalts-Welle ────────────────────────────────────────────────────────
   --w (0…1) ist der Platz eines Elements in der Welle. Gesetzt von
   CC.anim.wave() aus der GEMESSENEN Lage, nicht aus der Reihenfolge im
   Markup — sonst liefe die Welle in Tabellen und mehrspaltigen Formularen
   quer zur Leserichtung.

   diag = von oben links nach unten rechts (Fenster-Inhalt)
   x    = von links nach rechts (Sidebar-Inhalt)
   Beim Schliessen kehrt (1 - --w) die Richtung um. */
@keyframes cc-wave-in-diag  { from { opacity: 0; transform: translate(calc(var(--wave-shift) * -1), calc(var(--wave-shift) * -1)) } to { opacity: 1; transform: none } }
@keyframes cc-wave-out-diag { from { opacity: 1; transform: none } to { opacity: 0; transform: translate(calc(var(--wave-shift) * -1), calc(var(--wave-shift) * -1)) } }
@keyframes cc-wave-in-x     { from { opacity: 0; transform: translateX(calc(var(--wave-shift) * -1.6)) } to { opacity: 1; transform: none } }
@keyframes cc-wave-out-x    { from { opacity: 1; transform: none } to { opacity: 0; transform: translateX(calc(var(--wave-shift) * -1.6)) } }

/* NACHFAHREN, nicht Kinder: die animierten Blätter liegen tief im Baum (Tabellenzelle in Zeile in
   Tabelle in Karte). Mit `>` blieben die Regeln am echten Inhalt wirkungslos — die Welle lief nicht.
   backwards beim Öffnen: das Element ist schon vor seinem Einsatz unsichtbar, sonst blitzte der
   ganze Inhalt einmal auf, bevor die Welle beginnt. */
.cc-wave-diag.cc-wave-in  [data-w] { animation: cc-wave-in-diag  var(--wave-dur) var(--ease) backwards; animation-delay: calc(var(--w) * var(--wave-span)); }
.cc-wave-x.cc-wave-in     [data-w] { animation: cc-wave-in-x     var(--wave-dur) var(--ease) backwards; animation-delay: calc(var(--w) * var(--wave-span)); }
/* Rücklauf gerafft (.6): beim Schliessen will niemand warten. */
.cc-wave-diag.cc-wave-out [data-w] { animation: cc-wave-out-diag var(--wave-dur) var(--ease) forwards;  animation-delay: calc((1 - var(--w)) * var(--wave-span) * .6); }
.cc-wave-x.cc-wave-out    [data-w] { animation: cc-wave-out-x    var(--wave-dur) var(--ease) forwards;  animation-delay: calc((1 - var(--w)) * var(--wave-span) * .6); }

@media (prefers-reduced-motion: reduce) {
  .anim-fade-in, .anim-slide-up, .anim-pulse,
  .cc-frame-in, .cc-frame-out,
  .cc-wave-diag.cc-wave-in [data-w], .cc-wave-x.cc-wave-in [data-w],
  .cc-wave-diag.cc-wave-out [data-w], .cc-wave-x.cc-wave-out [data-w] { animation: none !important; }
}