/* Übergänge der Oberfläche im Look „Konstellation“ (Show-Runde 05.10.2026, R61–R63): Intro von Name und Beschriftungen, gestaffeltes
   Einblenden beim Start, Karten gleiten ein (und – per karten.js – aus), Blätter federn, Zahlen überblenden, Knöpfe geben Druck.
   Regeln: nur unter [data-look=konstellation]; nur transform und opacity (R4); höchstens 600 ms (R14, für die Show gedehnt);
   nichts wartet – alles ist sofort bedienbar, die Bewegung läuft nur darüber. „Bewegung reduzieren“: Federn und Gleiten nur ohne
   diese Einstellung (@media … no-preference); sonst gelten die kurzen Überblendungen aus stil.css. Logik ändert sich nicht. */

/* ---------- Intro (konstellation.js setzt .kst-intro, solange die Teilchen zusammenströmen) ---------- */
:where([data-look=konstellation]) .kst-name{transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
:where([data-look=konstellation]) .kst-labs{transition:opacity 500ms var(--ease) 140ms}
:root[data-look=konstellation] .galaxy .states{transition:opacity 500ms var(--ease) 220ms,transform 500ms var(--ease) 220ms}
[data-look=konstellation] .galaxy.kst-intro .kst-name{opacity:0;transform:translateY(12px) scale(.94)}
[data-look=konstellation] .galaxy.kst-intro .kst-labs{opacity:0}
:root[data-look=konstellation] .galaxy.kst-intro .states{opacity:0;transform:translateY(8px)}

@media (prefers-reduced-motion:no-preference){
  /* ---------- Start: Kopf, Spalten, Reiter, Eingabe gestaffelt – einmal beim Laden, wartet nicht auf den Server („Verbinde …“ bleibt
     lesbar, die Eingabe sofort benutzbar) ---------- */
  [data-look=konstellation] :is(.top,.side-l,.side-r,.tabs,.composer){animation:kst-hoch 520ms cubic-bezier(.2,.8,.2,1) both}
  [data-look=konstellation] :is(.side-l,.tabs){animation-delay:70ms}
  [data-look=konstellation] .side-r{animation-delay:130ms}
  [data-look=konstellation] .composer{animation-delay:170ms}

  /* ---------- Karten „Braucht dich“: neue gleiten ein (karten.js setzt .neu nur bei echten neuen Karten) ---------- */
  [data-look=konstellation] .card.neu{animation:kst-karte-ein 460ms cubic-bezier(.2,.8,.2,1) both}
  [data-look=konstellation] .card.neu:nth-child(2){animation-delay:60ms}
  [data-look=konstellation] .card.neu:nth-child(3){animation-delay:120ms}

  /* ---------- Blätter federn: unten herauf (iPhone), von rechts (ab 640 px), Fenster mittig ---------- */
  [data-look=konstellation] dialog[open] .panel{animation:kst-blatt-hoch 520ms cubic-bezier(.2,.8,.2,1)}
  [data-look=konstellation] dialog[open]::backdrop{animation:kst-ein 300ms cubic-bezier(.2,.8,.2,1)}

  /* ---------- Zahlen überblenden (nur bei echter Änderung, R18) ---------- */
  [data-look=konstellation] :is(.pill,.tc,.kst-zahl).neu{animation:kst-zahl 300ms cubic-bezier(.2,.8,.2,1)}

  /* ---------- Druck-Rückmeldung (Tippen 100–150 ms) ---------- */
  :where([data-look=konstellation]) .kst-chip{transition:transform 120ms var(--ease)}
  [data-look=konstellation] .kst-name:active b{transform:scale(.985)}
  :where([data-look=konstellation]) .kst-name b{transition:transform 140ms var(--ease)}
  [data-look=konstellation] .tab[aria-selected=true]{animation:kst-zahl 260ms cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:no-preference) and (min-width:640px){
  [data-look=konstellation] dialog.sheet[open] .panel{animation-name:kst-blatt-rechts}
  [data-look=konstellation] dialog.modal[open] .panel{animation-name:kst-fenster}
}

@keyframes kst-ein{from{opacity:0}}
@keyframes kst-hoch{from{opacity:0;transform:translateY(10px)}}
@keyframes kst-zahl{from{opacity:0;transform:translateY(3px)}}
@keyframes kst-karte-ein{
  0%{opacity:0;transform:translateY(16px) scale(.975)}
  65%{opacity:1;transform:translateY(-2px) scale(1.004)}
  100%{opacity:1;transform:none}
}
@keyframes kst-blatt-hoch{
  0%{opacity:.6;transform:translateY(100%)}
  62%{opacity:1;transform:translateY(-1.6%)}
  100%{transform:none}
}
@keyframes kst-blatt-rechts{
  0%{opacity:.6;transform:translateX(100%)}
  62%{opacity:1;transform:translateX(-1.4%)}
  100%{transform:none}
}
@keyframes kst-fenster{
  0%{opacity:0;transform:translateY(18px) scale(.95)}
  60%{opacity:1;transform:translateY(-2px) scale(1.008)}
  100%{transform:none}
}