/* ═══════════════════════════════════════════════════════════════════════════
   Bewegung im Launcher.

   Der Launcher war statisch: alles war sofort da, nichts reagierte, und
   Zustandswechsel geschahen ohne Übergang. Das ist der Grund, warum er "wie
   eine Webseite" wirkte und nicht wie ein Spielclient — in League bewegt sich
   ständig etwas, aber nie so, dass es stört.

   Die Regeln, nach denen hier animiert wird:

     • Alles unter 250 ms, außer Umgebungslicht. Was länger dauert, hält auf.
     • Bewegung folgt einer Ursache. Es gibt keine Animation, die einfach so
       läuft — sie hängt an Erscheinen, Überfahren, Klicken oder Wechseln.
     • Gestaffelt statt gleichzeitig. Zwanzig Karten, die zusammen aufblenden,
       sind ein Sprung; nacheinander sind sie eine Bewegung.
     • Nichts blinkt, nichts springt, nichts wackelt dauerhaft.

   Ganz unten steht der Rückfall für prefers-reduced-motion. Er ist keine
   Höflichkeit: Bewegung im Randbereich des Blickfelds löst bei manchen
   Menschen Übelkeit aus, und ein Spielclient läuft stundenlang.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Auftritt von Flächen ──────────────────────────────────────────────────
   Jede Seite, die eingeblendet wird, kommt von unten herein statt aus dem
   Nichts zu erscheinen. Die Strecke ist absichtlich kurz (10 px): weiter sieht
   nach Rutschen aus, kürzer merkt man nicht. */
@keyframes seiteAuf {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Die Reiterflaechen heissen #tab-news, #tab-play und so weiter; versteckt
   sind sie ueber .hidden. Geprueft im Browser, nicht geraten — die erste
   Fassung dieser Datei zielte auf .page und #launcher > section, und .page ist
   in Wirklichkeit die Ueberschrift der Seite, nicht ihr Rahmen. */
#launcher [id^="tab-"]:not(.hidden) {
  animation: seiteAuf .26s cubic-bezier(.16,.84,.44,1);
}

/* ── Karten kommen nacheinander ───────────────────────────────────────────
   nth-child bis 24, danach ohne Verzögerung. Ein Raster mit hundert Karten
   soll nicht hundert mal 25 ms brauchen — nach zwei Dutzend ist die Wirkung
   ohnehin da, und der Rest würde nur warten. */
@keyframes kachelAuf {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.cards > *,
#selChamps > .selchamp,
#shopItems > .gitem {
  animation: kachelAuf .3s cubic-bezier(.16,.84,.44,1) backwards;
}
.cards > *:nth-child(1),  #selChamps > :nth-child(1),  #shopItems > :nth-child(1)  { animation-delay: .00s }
.cards > *:nth-child(2),  #selChamps > :nth-child(2),  #shopItems > :nth-child(2)  { animation-delay: .02s }
.cards > *:nth-child(3),  #selChamps > :nth-child(3),  #shopItems > :nth-child(3)  { animation-delay: .04s }
.cards > *:nth-child(4),  #selChamps > :nth-child(4),  #shopItems > :nth-child(4)  { animation-delay: .06s }
.cards > *:nth-child(5),  #selChamps > :nth-child(5),  #shopItems > :nth-child(5)  { animation-delay: .08s }
.cards > *:nth-child(6),  #selChamps > :nth-child(6),  #shopItems > :nth-child(6)  { animation-delay: .10s }
.cards > *:nth-child(7),  #selChamps > :nth-child(7),  #shopItems > :nth-child(7)  { animation-delay: .12s }
.cards > *:nth-child(8),  #selChamps > :nth-child(8),  #shopItems > :nth-child(8)  { animation-delay: .14s }
.cards > *:nth-child(9),  #selChamps > :nth-child(9),  #shopItems > :nth-child(9)  { animation-delay: .16s }
.cards > *:nth-child(10), #selChamps > :nth-child(10), #shopItems > :nth-child(10) { animation-delay: .18s }
.cards > *:nth-child(11), #selChamps > :nth-child(11), #shopItems > :nth-child(11) { animation-delay: .20s }
.cards > *:nth-child(12), #selChamps > :nth-child(12), #shopItems > :nth-child(12) { animation-delay: .22s }
.cards > *:nth-child(n+13), #selChamps > :nth-child(n+13), #shopItems > :nth-child(n+13) { animation-delay: .24s }

/* ── Karten reagieren ─────────────────────────────────────────────────────
   Anheben und ein warmer Schein. Die Kurve schwingt leicht über (der letzte
   Wert über 1), das liest sich als Gewicht statt als Verschiebung. */
.card, .champCard {
  transition: transform .16s cubic-bezier(.2,.9,.3,1.15),
              box-shadow .2s ease, border-color .2s ease;
}
.card:hover, .champCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(212,169,78,.35);
  z-index: 2;
}
.card:active, .champCard:active { transform: translateY(-1px); }

/* ── Die Kopfleiste ───────────────────────────────────────────────────────
   Der aktive Reiter bekommt einen Balken, der mitwandert statt umzuspringen.
   Umgesetzt über scaleX auf einem Pseudo-Element: eine echte gleitende Linie
   bräuchte JavaScript, das bei jedem Fensterwechsel nachmessen müsste. */
/* Die Knoepfe der Kopfleiste tragen keine eigene Klasse — sie sind schlicht
   nav > button[data-tab], aktiv ueber .active. */
#launcher nav button[data-tab] { position: relative; transition: color .15s ease; }
#launcher nav button[data-tab]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .22s cubic-bezier(.16,.84,.44,1);
}
#launcher nav button[data-tab]:hover::after { transform: scaleX(.55); }
#launcher nav button[data-tab].active::after { transform: scaleX(1); }

/* ── Fenster und Meldungen ────────────────────────────────────────────────
   Ein Dialog, der ohne Übergang dasteht, wirkt wie ein Fehler. */
@keyframes dialogAuf {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
dialog[open] { animation: dialogAuf .2s cubic-bezier(.16,.84,.44,1); }
dialog[open]::backdrop { animation: blendeAuf .2s ease; }
@keyframes blendeAuf { from { opacity: 0 } to { opacity: 1 } }

@keyframes toastRein {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
.toast { animation: toastRein .24s cubic-bezier(.16,.84,.44,1); }

/* ── Warten ───────────────────────────────────────────────────────────────
   Ein Schimmer statt eines Kreisels. Er sagt zusätzlich, WAS geladen wird —
   die Fläche hat schon die Form dessen, was gleich darin steht. */
@keyframes schimmer { to { background-position: 220% 0; } }
.laedt {
  background: linear-gradient(100deg,
    rgba(255,255,255,.02) 20%, rgba(255,255,255,.09) 40%, rgba(255,255,255,.02) 60%);
  background-size: 220% 100%;
  animation: schimmer 1.3s linear infinite;
  border-radius: 4px; color: transparent !important;
}

/* ── Zahlen, die sich ändern ──────────────────────────────────────────────
   Wenn Gold oder Essenz sich ändert, blitzt der Wert kurz auf. Ohne das
   übersieht man eine Gutschrift vollständig — sie ist nur eine andere Zahl an
   derselben Stelle. Die Klasse wird vom Skript für 600 ms gesetzt. */
@keyframes wertAuf {
  0%   { transform: scale(1);    color: inherit; }
  30%  { transform: scale(1.22); color: #fff3cd; text-shadow: 0 0 10px rgba(212,169,78,.9); }
  100% { transform: scale(1);    color: inherit; }
}
.wertNeu { display: inline-block; animation: wertAuf .6s ease-out; }

/* ── Der Ruhefall ─────────────────────────────────────────────────────────
   Wer weniger Bewegung eingestellt hat, bekommt keine. Nicht "langsamer",
   sondern keine: die Einstellung ist eine gesundheitliche, keine
   geschmackliche. Was bleibt, sind Farbwechsel — die stören niemanden. */
@media (prefers-reduced-motion: reduce) {
  #launcher [id^="tab-"]:not(.hidden),
  .cards > *, #selChamps > .selchamp, #shopItems > .gitem,
  dialog[open], dialog[open]::backdrop, .toast, .wertNeu,
  .laedt,
  #loginScreen::before, #loginScreen::after, #loginGlut i, #loginScreen h1 em,
  #loginScreen > *:not(#loginGlut) {
    animation: none !important;
  }
  .card, .champCard, .btn, #launcher nav button[data-tab]::after { transition: none !important; }
  .card:hover, .champCard:hover, .btn:hover { transform: none !important; }
  /* Die Glut wird nicht nur angehalten, sondern ausgeblendet: angehalten
     stünden neun Punkte am unteren Rand herum, die niemand erklären kann. */
  #loginGlut { display: none; }
}