/* Der Aufbau des Cockpits nach der Zündung.
 *
 * Nach MOTION.md: das Cockpit erscheint nicht, es wird gebaut. Kopfleiste
 * von oben, Leiste von links, Spalten gestaffelt, Kacheln einzeln. Nie mehr
 * als drei Dinge gleichzeitig in Bewegung, 90-190 ms Versatz.
 *
 * Eine Kurve für alles Räumliche: var(--ease) ist cubic-bezier(.16,1,.3,1) -
 * sehr schnelle Beschleunigung, langes Ausschwingen. Das erzeugt das
 * einrastende Gefühl von Cockpit-Hardware.
 *
 * Alles hier hängt an .jarvis-baut-auf. Ohne diese Klasse ist die Seite
 * still - wer direkt auf /mails geht, sieht keine Animation.
 */

/* --- Der Kreis in der Sequenz -------------------------------------- */
/*
 * Das Wachsen und Einrasten bringt der Kreis selbst mit (hud.css, Klasse
 * "zuendet"). Der Kern hier ist nur noch sein Traeger: unsichtbar, bis
 * die Zuendung ihn zeigt, und beim Flug wird er verschoben.
 */

.jarvis-start__kern {
  position: absolute;
  display: grid;
  place-items: center;
  opacity: 0;
}
.jarvis-start__kern.ist-an { opacity: 1; }

.jarvis-start__kern.ist-weg {
  animation: jarvis-weichen .9s var(--ease) both;
}
@keyframes jarvis-weichen {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(.35); opacity: 0; }
}

/* Sicherheitsnetz. Die Grundregel des Kerns ist "opacity: 0" - sichtbar
   wird er nur durch Animationen. Vergisst eine davon die Sichtbarkeit,
   verschwindet der Ball lautlos. Diese Regel faengt das ab: solange eine
   der drei Zustandsklassen haengt, ist er da. */
.jarvis-start__kern.ist-an,
.jarvis-start__kern.ist-unterwegs {
  opacity: 1;
}

/* --- Das Cockpit fährt aus ---------------------------------------- */

.jarvis-baut-auf .hud-topbar {
  animation: jarvis-von-oben .8s var(--ease) both;
}
@keyframes jarvis-von-oben {
  from { transform: translateY(-46px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Die Reiter einzeln, 70 ms Versatz. */
.jarvis-baut-auf .jarvis-reiter > * {
  animation: jarvis-auftauchen .5s var(--ease) both;
}
.jarvis-baut-auf .jarvis-reiter > :nth-child(1) { animation-delay: .34s; }
.jarvis-baut-auf .jarvis-reiter > :nth-child(2) { animation-delay: .41s; }
.jarvis-baut-auf .jarvis-reiter > :nth-child(3) { animation-delay: .48s; }
.jarvis-baut-auf .jarvis-reiter > :nth-child(4) { animation-delay: .55s; }
.jarvis-baut-auf .jarvis-reiter > :nth-child(5) { animation-delay: .62s; }
@keyframes jarvis-auftauchen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.jarvis-baut-auf .hud-rail {
  animation: jarvis-von-links .8s var(--ease) .2s both;
}
@keyframes jarvis-von-links {
  from { transform: translateX(-64px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Die Leistenknöpfe rasten nacheinander ein. */
.jarvis-baut-auf .hud-rail__btn {
  animation: jarvis-einrasten .45s var(--ease) both;
}
.jarvis-baut-auf .hud-rail__btn:nth-child(1) { animation-delay: .52s; }
.jarvis-baut-auf .hud-rail__btn:nth-child(2) { animation-delay: .59s; }
.jarvis-baut-auf .hud-rail__btn:nth-child(3) { animation-delay: .66s; }
.jarvis-baut-auf .hud-rail__btn:nth-child(4) { animation-delay: .73s; }
.jarvis-baut-auf .hud-rail__btn:nth-child(5) { animation-delay: .80s; }
@keyframes jarvis-einrasten {
  0%   { opacity: 0; transform: scale(.6) translateX(-8px); }
  70%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: none; }
}

/* Linke Spalte: Panels einzeln, 140 ms Versatz. */
.jarvis-baut-auf .jarvis-cockpit__links > * {
  animation: jarvis-von-links-klein .7s var(--ease) both;
}
.jarvis-baut-auf .jarvis-cockpit__links > :nth-child(1) { animation-delay: .62s; }
.jarvis-baut-auf .jarvis-cockpit__links > :nth-child(2) { animation-delay: .76s; }
.jarvis-baut-auf .jarvis-cockpit__links > :nth-child(3) { animation-delay: .90s; }
@keyframes jarvis-von-links-klein {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: none; }
}

/* Mitte: der Orb ist schon da, der Rest kommt darunter hoch. */
.jarvis-baut-auf .jarvis-cockpit__mitte > * {
  animation: jarvis-von-unten .7s var(--ease) both;
}
.jarvis-baut-auf .jarvis-cockpit__mitte > :nth-child(1) { animation-delay: .70s; }
.jarvis-baut-auf .jarvis-cockpit__mitte > :nth-child(2) { animation-delay: .70s; }
.jarvis-baut-auf .jarvis-cockpit__mitte > :nth-child(3) { animation-delay: .98s; }
.jarvis-baut-auf .jarvis-cockpit__mitte > :nth-child(4) { animation-delay: 1.12s; }
@keyframes jarvis-von-unten {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Rechte Spalte von rechts, Kacheln einzeln. */
.jarvis-baut-auf .hud-aside {
  animation: jarvis-von-rechts .8s var(--ease) .78s both;
}
@keyframes jarvis-von-rechts {
  from { transform: translateX(300px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.jarvis-baut-auf .hud-aside .hud-widget,
.jarvis-baut-auf .hud-aside .hud-card,
.jarvis-baut-auf .hud-aside .hud-clock,
.jarvis-baut-auf .hud-aside .hud-task {
  animation: jarvis-auftauchen .5s var(--ease) both;
}
.jarvis-baut-auf .hud-aside .hud-stack > :nth-child(1) { animation-delay: 1.00s; }
.jarvis-baut-auf .hud-aside .hud-stack > :nth-child(2) { animation-delay: 1.12s; }
.jarvis-baut-auf .hud-aside .hud-stack > :nth-child(3) { animation-delay: 1.24s; }
.jarvis-baut-auf .hud-aside .hud-clock { animation-delay: 1.36s; }

/* Der Rahmen des Cockpits zieht sich zusammen - der letzte Handgriff. */
.jarvis-baut-auf .hud-app {
  animation: jarvis-rahmen 1.1s var(--ease) both;
}
@keyframes jarvis-rahmen {
  0%   { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* Bewegung reduzieren: nichts davon. Der Zustand ist ohne Animation
   genauso lesbar - das ist der Sinn der Regel. */
@media (prefers-reduced-motion: reduce) {
  .jarvis-baut-auf *,
  .jarvis-start__kern {
    animation: none !important;
  }
}

/* --- Die Uebergabe: EIN Orb, kein zweiter ------------------------- */
/*
 * Der Ball blendet nicht aus und der im Cockpit nicht ein - es ist
 * derselbe. Der aus der Sequenz fliegt an seinen Platz im Raster,
 * waehrend sich die Leisten drumherum aufbauen. Erst wenn er dort
 * angekommen ist, uebernimmt der echte darunter.
 *
 * Deshalb wird beim Uebergeben NICHT der ganze Schirm ausgeblendet -
 * nur sein Hintergrund und alles ausser dem Orb. Sonst verschwaende
 * der Ball auf halbem Weg.
 */

.jarvis-start.ist-uebergabe {
  background: transparent;
  transition: background .9s var(--ease);
}
.jarvis-start.ist-uebergabe .jarvis-start__protokoll,
.jarvis-start.ist-uebergabe .jarvis-start__weg,
.jarvis-start.ist-uebergabe .jarvis-start__tor {
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}

/* Die Begruessung fadet langsamer - im Takt des wegfliegenden Kreises,
   nicht im Takt der Bedienelemente. */
.jarvis-start.ist-uebergabe .jarvis-start__gruss {
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  pointer-events: none;
}

/* Der Orb im Cockpit wartet, bis der fliegende angekommen ist.
   Zwei Baelle gleichzeitig waeren der Fehler, den es zu vermeiden gilt. */
.jarvis-baut-auf .jarvis-orbfeld .jarvis-hud { opacity: 0; }
.jarvis-baut-auf.orb-ist-da .jarvis-orbfeld .jarvis-hud { opacity: 1; }

/* Waehrend des Flugs keine Animation auf dem Kern - die wuerde die
   berechnete Verschiebung ueberschreiben. */
.jarvis-start__kern.ist-unterwegs {
  animation: none !important;
}

/* Die Begruessung kommt frueher und geht schneller. */
.jarvis-start__gruss {
  transition: opacity .45s var(--ease);
}

/* Das Orbfeld ist vom Aufbau ausgenommen: dort landet der fliegende Orb.
 * Ohne diese Regel wuerde die Staffelung der Mitte-Spalte es einblenden -
 * und man saehe zwei Baelle gleichzeitig, einen fliegenden und einen
 * wartenden. Genau der Fehler, den die Uebergabe vermeiden soll. */
.jarvis-baut-auf .jarvis-cockpit__mitte > .jarvis-orbfeld {
  animation: none !important;
  opacity: 0;
}
.jarvis-baut-auf.orb-ist-da .jarvis-cockpit__mitte > .jarvis-orbfeld {
  opacity: 1;
  transition: opacity .25s var(--ease);
}