/* AIGIS Landing RC6 — Animationen.
   Alle Bewegung ist dezent, zweckgebunden und via prefers-reduced-motion (base.css)
   global abschaltbar. Keine automatisch wechselnden Inhalte ohne Pausemöglichkeit. */

/* ── Scroll-Reveal (per IntersectionObserver in app.js) ─────────────────── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.08s; } .reveal-d2{ transition-delay:.16s; }
.reveal-d3{ transition-delay:.24s; } .reveal-d4{ transition-delay:.32s; }
/* Ohne JS bleibt alles sichtbar */
html.no-js .reveal{ opacity:1; transform:none; }

/* ── Wandernde Daten-Punkte (Hero: Human ⇄ AIGIS ⇄ Machine) ─────────────── */
@keyframes dotDown{ 0%{ top:6%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:92%; opacity:0; } }
@keyframes dotUp{   0%{ top:92%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:6%; opacity:0; } }
.flow-dot{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--cy); box-shadow:0 0 10px rgba(56,211,238,.8);
  animation:dotDown 4.6s linear infinite;
}
.flow-dot.up{ animation-name:dotUp; background:var(--human); box-shadow:0 0 10px rgba(220,228,240,.7); }

/* ── Sanftes Atmen des AIGIS-Bands ──────────────────────────────────────── */
@keyframes breathe{ 0%,100%{ box-shadow:0 0 22px rgba(56,211,238,.18);} 50%{ box-shadow:0 0 40px rgba(56,211,238,.4);} }
.breathe{ animation:breathe 5.2s ease-in-out infinite; }

/* ── Prozesskette: Schritte leuchten nacheinander auf ───────────────────── */
@keyframes stepGlow{
  0%, 100%{ border-color:var(--line); color:var(--mut); }
  6%, 16%{ border-color:var(--cy); color:var(--tx-strong); box-shadow:var(--glow-cy); }
}
.chain.in .chain-step{ animation:stepGlow 12.8s ease-in-out infinite; }
.chain.in .chain-step:nth-child(1){ animation-delay:0s; }
.chain.in .chain-step:nth-child(2){ animation-delay:1.6s; }
.chain.in .chain-step:nth-child(3){ animation-delay:3.2s; }
.chain.in .chain-step:nth-child(4){ animation-delay:4.8s; }
.chain.in .chain-step:nth-child(5){ animation-delay:6.4s; }
.chain.in .chain-step:nth-child(6){ animation-delay:8s; }
.chain.in .chain-step:nth-child(7){ animation-delay:9.6s; }
.chain.in .chain-step:nth-child(8){ animation-delay:11.2s; }

/* ── Feiner Sternenhimmel im Hero-Hintergrund (rein dekorativ) ──────────── */
@keyframes drift{ 0%{ transform:translateY(0);} 100%{ transform:translateY(-60px);} }
.hero-stars{
  position:absolute; inset:-60px 0 0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(220,228,240,.8), transparent 60%),
    radial-gradient(1px 1px at 34% 72%, rgba(56,211,238,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 18%, rgba(220,228,240,.6), transparent 60%),
    radial-gradient(1px 1px at 71% 55%, rgba(56,211,238,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 34%, rgba(220,228,240,.7), transparent 60%),
    radial-gradient(1px 1px at 45% 88%, rgba(139,123,232,.55), transparent 60%),
    radial-gradient(1px 1px at 5% 80%, rgba(56,211,238,.5), transparent 60%);
  animation:drift 26s linear infinite alternate;
}
:root[data-theme="light"] .hero-stars{ opacity:.22; }

/* ── Evidenzkette: Verbindungslinie wächst beim Scrollen herein ─────────── */
@keyframes growLine{ from{ height:0; } to{ height:100%; } }
.evi.in .evi-line{ animation:growLine 1.6s ease-out forwards; }

/* ── Gate-Puls (Amber, sparsam) ─────────────────────────────────────────── */
@keyframes gatePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,179,65,.35);} 50%{ box-shadow:0 0 0 9px rgba(232,179,65,0);} }
.gate-pulse{ animation:gatePulse 3.4s ease-out infinite; }