/* Der HUD-Kreis: Zeitsteuerung und Zustände.
 *
 * Der Entwurf brachte seine Zeiten in SMIL mit - die zählen ab Seitenladen
 * und wären abgelaufen, bevor Florian auf „System starten" klickt. Hier
 * liegen sie als CSS, ausgelöst von einer Klasse.
 *
 * Gekürzt auf unsere Sequenz: flyin von 8 auf 6,5 Sekunden, die Staffelung
 * der acht Ringgruppen proportional mit (Faktor 0,8125). Die Reihenfolge
 * des Einrastens bleibt exakt die des Entwurfs.
 */

/* --- Der Kreis an seinem Platz ------------------------------------ */

.jarvis-hud {
  position: relative;
  display: block;
}
.jarvis-hud svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Im Cockpit sitzt er in seinem Feld ... */
.jarvis-orbfeld .jarvis-hud {
  width: 300px;
  height: 300px;
}
/* ... in der Sequenz ist er groß. */
.jarvis-start__kern .jarvis-hud {
  width: 620px;
  height: 620px;
  max-width: 82vw;
  max-height: 82vh;
}

/* --- Die Ruhebewegung: der helle Innenring atmet ------------------ */

.hud-puls {
  animation: hud-puls-ruhe 3.2s ease-in-out infinite;
  transform-box: view-box;
  transform-origin: 400px 400px;
}
@keyframes hud-puls-ruhe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* Zustände. Der Kreis ist laut Design-Kit der einzige Ladezustand des
   Systems - man muss ihm ansehen, was er tut. */
.jarvis-hud.is-thinking .hud-puls { animation-duration: 1s; }
.jarvis-hud.is-listening .hud-puls { animation-duration: 1.6s; }
.jarvis-hud.is-error .hud-puls {
  animation: none;
  opacity: 1;
  stroke: var(--red) !important;
}

/* --- Die vier Dauerdrehungen ---------------------------------------- */
/*
 * Exakt die Werte des Entwurfs: 13,33 s rueckwaerts, 28 s vorwaerts,
 * 63,33 s rueckwaerts, 46,67 s vorwaerts. Sie laufen IMMER, unabhaengig
 * von der Sequenz - ein HUD, dessen Ringe stillstehen, sieht kaputt aus.
 * (Am 30.08.2026 standen sie still: beim Uebernehmen des Entwurfs waren
 * die SMIL-Drehungen ersatzlos mitgeloescht worden.)
 */

.hud-dreh {
  /* Alle Elemente des Entwurfs sitzen in <g transform="translate(400,400)">
     - ihr LOKALER Nullpunkt ist die Mitte. Ein Drehpunkt von 400px/400px
     zeigte deshalb auf die Ecke rechts unten, und die Boegen kreisten um
     den falschen Punkt (Florians Fund, 30.08.2026 abends). */
  transform-box: view-box;
  transform-origin: 0 0;
}
.hud-dreh--1 { animation: hud-drehung 13.33s linear infinite reverse; }
.hud-dreh--2 { animation: hud-drehung 28s linear infinite; }
.hud-dreh--3 { animation: hud-drehung 63.33s linear infinite reverse; }
.hud-dreh--4 { animation: hud-drehung 46.67s linear infinite; }
@keyframes hud-drehung { to { transform: rotate(360deg); } }

/* Beim Nachdenken ziehen die schnellen beiden an. */
.jarvis-hud.is-thinking .hud-dreh--1 { animation-duration: 4.5s; }
.jarvis-hud.is-thinking .hud-dreh--2 { animation-duration: 9s; }
/* Beim Fehler bleibt alles stehen - Stillstand liest sich als Stoerung. */
.jarvis-hud.is-error .hud-dreh { animation-play-state: paused; }

/* --- Der Aufbau: nur mit der Klasse .zuendet ---------------------- */
/*
 * Ohne diese Klasse steht der Kreis fertig da. Sie wird ERST BEIM KLICK
 * gesetzt, nicht beim Laden: CSS-Animationen laufen auch auf unsichtbaren
 * Elementen, und so ist das ganze Einfliegen einmal hinter dem Vorhang
 * abgelaufen, bevor ueberhaupt geklickt war.
 *
 * Die Zeiten sind die des Entwurfs durch 1,5 - gleiche Choreografie,
 * anderthalbfaches Tempo. So von Florian bestellt.
 */

.jarvis-hud.zuendet {
  animation: hud-flyin 5.33s cubic-bezier(0.3, 0.6, 0.25, 1) both;
}
@keyframes hud-flyin {
  0%   { transform: scale(.04); opacity: 0; }
  6%   { opacity: 1; }
  45%  { transform: scale(1); }
  70%  { transform: scale(.94); }
  100% { transform: scale(1); opacity: 1; }
}

.jarvis-hud.zuendet .hud-ring {
  animation: hud-ringin .47s ease-out both;
  /* Wie bei .hud-dreh: lokaler Nullpunkt ist die Mitte. */
  transform-box: view-box;
  transform-origin: 0 0;
}
.jarvis-hud.zuendet .hud-ring--1 { animation-delay: 1s; }
.jarvis-hud.zuendet .hud-ring--2 { animation-delay: 1.27s; }
.jarvis-hud.zuendet .hud-ring--3 { animation-delay: 1.47s; }
.jarvis-hud.zuendet .hud-ring--4 { animation-delay: 1.73s; }
.jarvis-hud.zuendet .hud-ring--5 { animation-delay: 2.07s; }
.jarvis-hud.zuendet .hud-ring--6 { animation-delay: 2.33s; }
.jarvis-hud.zuendet .hud-ring--7 { animation-delay: 2.6s; }
.jarvis-hud.zuendet .hud-ring--8 { animation-delay: 2.87s; }

@keyframes hud-ringin {
  0%   { opacity: 0; transform: scale(.55); }
  100% { opacity: 1; transform: scale(1); }
}

/* Bewegung reduzieren: der Kreis steht sofort fertig da. Sein Zustand
   ist auch ohne Bewegung lesbar - dafuer steht der Text daneben. */
@media (prefers-reduced-motion: reduce) {
  .jarvis-hud.zuendet,
  .jarvis-hud.zuendet .hud-ring,
  .hud-dreh,
  .hud-puls {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Knoepfe, die nur ohne JavaScript gebraucht werden. app.js setzt .js
   an die Wurzel, sobald es laeuft. */
.js .nur-ohne-js { display: none; }