/* Hochfahrsequenz und Orb-Platzierung.
 *
 * Der Orb selbst steht in components.css. Was hier steht, ist nur seine
 * Platzierung und die Sequenz - die benutzt im Kit eigene Klassen, die nicht
 * Teil der Vorlage sind (cockpit.html ist eine eigenständige Demo).
 *
 * Zeitleiste nach MOTION.md, gekürzt: ohne Ton, weil eine Tonausgabe nach
 * einem Seitenwechsel ohne Klick vom Browser ohnehin unterdrückt wird.
 *
 * Die Sequenz wird von JavaScript eingehängt, nicht von der Vorlage. Ohne
 * JavaScript sieht man sofort die Anwendung - eine Startsequenz, die den
 * Zugang blockiert, wäre ein Fehler und keine Ausstattung.
 */

/* --- Der Orb an seinem Platz -------------------------------------- */

.jarvis-orbfeld {
  display: grid;
  place-items: center;
  padding: var(--sp-5) 0 var(--sp-4);
}
.jarvis-orbfeld .hud-orb { width: 168px; height: 168px; }
.jarvis-orbfeld .hud-orb__core { width: 74px; height: 74px; }

/* Der Zustand steht zusätzlich als Text da - der Orb allein ist keine
   Auskunft für jemanden, der Animationen abgeschaltet hat. */
.jarvis-orblage {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}
.hud-orb.is-thinking ~ .jarvis-orblage { color: var(--cyan); }
.hud-orb.is-error ~ .jarvis-orblage { color: var(--red); }

/* --- Die Sequenz -------------------------------------------------- */

.jarvis-start {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg-deep);
  display: grid;
  place-items: center;
  transition: opacity .7s var(--ease);
}
.jarvis-start.ist-fertig { opacity: 0; pointer-events: none; }

.jarvis-start__protokoll {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  line-height: 2.1;
  color: var(--cyan-dim);
  min-width: 320px;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.jarvis-start__zeile { opacity: 0; }
.jarvis-start__zeile.ist-da { opacity: 1; }
.jarvis-start__zeile b { color: var(--text-2); font-weight: 400; }

/* Zündung: Weißblitz und Stoßwelle. */
.jarvis-start__blitz {
  position: absolute;
  inset: 0;
  background: #dff6ff;
  opacity: 0;
  pointer-events: none;
}
.jarvis-start__blitz.ist-an { animation: jarvis-blitz .5s var(--ease); }
@keyframes jarvis-blitz {
  0% { opacity: 0; }
  12% { opacity: .82; }
  100% { opacity: 0; }
}

.jarvis-start__welle {
  position: absolute;
  left: 50%; top: 50%;
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.jarvis-start__welle.ist-an { animation: jarvis-welle 1.1s var(--ease); }
@keyframes jarvis-welle {
  0% { transform: scale(.2); opacity: .9; }
  100% { transform: scale(9); opacity: 0; }
}

.jarvis-start__kern {
  position: absolute;
  display: grid;
  place-items: center;
  transform: scale(.05);
  opacity: 0;
  transition: transform 1.2s var(--ease), opacity .6s var(--ease);
}
.jarvis-start__kern.ist-an { transform: scale(1); opacity: 1; }
.jarvis-start__kern.ist-weg { transform: scale(1.75); opacity: 0; }

.jarvis-start__gruss {
  position: absolute;
  bottom: 16%;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--track-display);
  color: var(--text);
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.jarvis-start__gruss.ist-da { opacity: 1; }

.jarvis-start__weg {
  position: absolute;
  right: var(--sp-5); top: var(--sp-5);
}

/* Die Anwendung fährt gestaffelt hoch, nachdem die Sequenz durch ist. */
.jarvis-faehrt-ein .hud-topbar,
.jarvis-faehrt-ein .hud-rail,
.jarvis-faehrt-ein .hud-stage,
.jarvis-faehrt-ein .hud-aside {
  animation: jarvis-ein .7s var(--ease) both;
}
.jarvis-faehrt-ein .hud-topbar { animation-delay: 0s; }
.jarvis-faehrt-ein .hud-rail   { animation-delay: .1s; }
.jarvis-faehrt-ein .hud-stage  { animation-delay: .22s; }
.jarvis-faehrt-ein .hud-aside  { animation-delay: .34s; }
@keyframes jarvis-ein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Bewegung reduzieren: die Sequenz wird von JavaScript gar nicht erst
   gestartet. Diese Regel ist der Gürtel zum Hosenträger. */
@media (prefers-reduced-motion: reduce) {
  .jarvis-start { display: none; }
  .jarvis-faehrt-ein .hud-topbar,
  .jarvis-faehrt-ein .hud-rail,
  .jarvis-faehrt-ein .hud-stage,
  .jarvis-faehrt-ein .hud-aside { animation: none; }
}

/* --- Das Tor vor der Sequenz -------------------------------------- */

.jarvis-start__tor {
  text-align: center;
}
.jarvis-start__tor h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  letter-spacing: .3em;
  color: var(--cyan);
  margin: 0 0 var(--sp-2);
  text-shadow: var(--glow);
}
.jarvis-start__tor p {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--sp-6);
}
.jarvis-start__hinweis {
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 2;
}

/* --- Der Zugangscode im Tor (nur Demo) ----------------------------- */

.jarvis-start__code {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-4);
  transition: opacity .5s var(--ease);
}
.jarvis-start__code .hud-field {
  width: 270px;
  padding: 13px 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  letter-spacing: .22em;
  text-transform: uppercase;
  border-color: rgba(95, 217, 255, .55);
  background: rgba(95, 217, 255, .05);
  box-shadow: 0 0 14px rgba(95, 217, 255, .12);
}
.jarvis-start__code .hud-field::placeholder {
  color: rgba(95, 217, 255, .45);
  letter-spacing: .22em;
}
.jarvis-start__code .hud-field:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 22px rgba(95, 217, 255, .3);
}
.jarvis-start__code.ist-erledigt {
  opacity: .25;
  pointer-events: none;
}

.jarvis-start__codestatus {
  min-height: 1.4em;
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  color: var(--cyan);
}
.jarvis-start__codestatus.ist-falsch { color: var(--red); }

/* Gesperrt: stumpf. Scharf: leuchtet - das ist der bestellte Moment. */
.jarvis-start__tor button[disabled] {
  opacity: .3;
  cursor: not-allowed;
  box-shadow: none;
}
.jarvis-start__tor .ist-scharf {
  animation: jarvis-scharf 1.6s var(--ease) infinite;
}
@keyframes jarvis-scharf {
  0%, 100% { box-shadow: 0 0 10px rgba(95, 217, 255, .35); }
  50%      { box-shadow: 0 0 26px rgba(95, 217, 255, .8), 0 0 60px rgba(95, 217, 255, .25); }
}
@media (prefers-reduced-motion: reduce) {
  .jarvis-start__tor .ist-scharf { animation: none; box-shadow: 0 0 18px rgba(95, 217, 255, .6); }
}