/* =====================================================================
   css/animations.css  ·  BEWEGUNG & EFFEKTE
   ---------------------------------------------------------------------
   So funktioniert das Scrollytelling:
   • js/scrolly.js beobachtet alle Elemente mit data-animate="…".
   • Sobald ein Element ins Bild scrollt, bekommt es die Klasse
     "is-visible" – und die Regeln unten lassen es hereingleiten.

   Ob überhaupt animiert wird, steht im <html>-Element:
       data-motion="full"     → volle Effekte
       data-motion="reduced"  → ruhige Version: alles sofort sichtbar,
                                nichts blinkt, nichts gleitet
   Das entscheidet js/motion.js (Systemeinstellung "Animationen
   reduzieren" oder der Schalter "Bewegung" in der Fußzeile).

   Verfügbare Werte für data-animate:
       fade-up      von unten einblenden
       fade-down    von oben einblenden
       fade-left    von rechts nach links hereingleiten
       fade-right   von links nach rechts hereingleiten
       fade-in      nur einblenden
       zoom-in      von klein (und unscharf) auf groß
       glitch       mit kurzem Glitch-Effekt erscheinen
   ===================================================================== */


/* ======================= 1. HEREINGLEITEN (data-animate) ===================== */

/* Ausgangszustand: unsichtbar und leicht verschoben.
   Gilt nur, wenn js/scrolly.js läuft (.js-scrolly) UND Animationen erlaubt sind. */
.js-scrolly[data-motion="full"] [data-animate] {
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.js-scrolly[data-motion="full"] [data-animate="fade-up"]    { transform: translate3d(0, var(--move-distance), 0); }
.js-scrolly[data-motion="full"] [data-animate="fade-down"]  { transform: translate3d(0, calc(var(--move-distance) * -1), 0); }
.js-scrolly[data-motion="full"] [data-animate="fade-left"]  { transform: translate3d(var(--move-distance), 0, 0); }
.js-scrolly[data-motion="full"] [data-animate="fade-right"] { transform: translate3d(calc(var(--move-distance) * -1), 0, 0); }
.js-scrolly[data-motion="full"] [data-animate="zoom-in"]    { transform: scale(0.88); filter: blur(6px); }

/* Endzustand: Das Element ist im Bild */
.js-scrolly[data-motion="full"] [data-animate].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Glitch: erscheint ruckartig in "zerschnittenen" Streifen */
.js-scrolly[data-motion="full"] [data-animate="glitch"].is-visible {
  animation: glitch-in 0.75s steps(2, end) var(--delay, 0ms) both;
}

@keyframes glitch-in {
  0%   { opacity: 0; clip-path: inset(42% 0 44% 0); transform: translateX(-14px); }
  20%  { opacity: 1; clip-path: inset(8% 0 70% 0);  transform: translateX(10px); }
  40%  {             clip-path: inset(64% 0 6% 0);  transform: translateX(-6px); }
  60%  {             clip-path: inset(24% 0 34% 0); transform: translateX(4px); }
  80%  {             clip-path: inset(0 0 0 0);     transform: translateX(-2px); }
  100% { opacity: 1; clip-path: inset(0 0 0 0);     transform: none; }
}


/* ============================ 2. KOPFZEILE BEIM LADEN ======================== */

[data-motion="full"] .site-header {
  animation: boot-in 0.9s var(--ease-out) both;
}

@keyframes boot-in {
  from { opacity: 0; transform: translateY(-12px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}


/* ============================ 3. GLITCH-TITEL ================================
   Der Titel "CYBERDASH" hat zwei unsichtbare Kopien (::before / ::after)
   in Cyan und Magenta. Alle paar Sekunden blitzen Streifen davon auf.    */

.glitch {
  position: relative;
  display: inline-block;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  text-shadow: none;
  pointer-events: none;
  clip-path: inset(0 0 100% 0); /* standardmäßig komplett weggeschnitten */
}
.glitch::before { color: var(--neon-cyan); }
.glitch::after  { color: var(--neon-magenta); }

[data-motion="full"] .glitch::before { animation: glitch-slice-a 4.8s steps(1, end) infinite; }
[data-motion="full"] .glitch::after  { animation: glitch-slice-b 4.8s steps(1, end) infinite; }

@keyframes glitch-slice-a {
  0%, 86%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  87% { clip-path: inset(12% 0 62% 0); transform: translate(-4px, -1px); }
  89% { clip-path: inset(58% 0 14% 0); transform: translate(3px, 1px); }
  91% { clip-path: inset(32% 0 40% 0); transform: translate(-2px, 0); }
  93% { clip-path: inset(78% 0 2% 0);  transform: translate(4px, 0); }
  95% { clip-path: inset(0 0 100% 0);  transform: none; }
}
@keyframes glitch-slice-b {
  0%, 87%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  88% { clip-path: inset(70% 0 8% 0);  transform: translate(4px, 1px); }
  90% { clip-path: inset(20% 0 55% 0); transform: translate(-3px, -1px); }
  92% { clip-path: inset(45% 0 30% 0); transform: translate(2px, 0); }
  94% { clip-path: inset(5% 0 85% 0);  transform: translate(-4px, 0); }
  96% { clip-path: inset(0 0 100% 0);  transform: none; }
}

/* Ruhige Version: statt Flackern ein fester, leichter Farbversatz */
[data-motion="reduced"] .glitch {
  text-shadow:
    -2px 0 color-mix(in srgb, var(--neon-cyan) 70%, transparent),
    2px 0 color-mix(in srgb, var(--neon-magenta) 70%, transparent);
}


/* =========================== 4. KLEINE DAUER-EFFEKTE ========================= */

/* Blinkender Terminal-Cursor */
[data-motion="full"] .status-line::after {
  animation: blink 1.1s steps(1, end) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* Heller Streifen wandert langsam über den Bildschirm (Röhrenmonitor) */
[data-motion="full"] .scanlines::after {
  opacity: 1;
  animation: scan-beam 9s linear infinite;
}
@keyframes scan-beam {
  from { transform: translateY(-30vh); }
  to   { transform: translateY(100vh); }
}

/* Pfeil "Scrollen für den Tagesbericht" wippt */
[data-motion="full"] .scroll-hint-arrow {
  animation: hint-bob 1.8s var(--ease-out) infinite;
}
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* Neu hinzugefügte Listeneinträge "ploppen" kurz auf (Klasse .is-new) */
[data-motion="full"] .is-new {
  animation: pop-in 0.5s var(--ease-out) both;
}
@keyframes pop-in {
  from { opacity: 0; transform: translateX(-12px); filter: brightness(2.2); }
  to   { opacity: 1; transform: none; filter: none; }
}


/* ====================== 5. SCROLL-FORTSCHRITT (data-scroll) ===================
   Solange js/scrolly.js noch nichts berechnet hat, steht --progress auf 0.
   Neon-Linien, Leiterbahnen und Balken lesen --progress (siehe base.css). */

.js-scrolly[data-motion="full"] [data-scroll] {
  --progress: 0;
}

/* Sanftes Scrollen, wenn man auf einen Link wie "Nach oben" klickt */
html[data-motion="full"] {
  scroll-behavior: smooth;
}


/* ========================= 6. DIE RUHIGE VERSION ============================
   Für alle, die "Animationen reduzieren" eingeschaltet haben (oder in der
   Fußzeile "Ruhig" wählen): Linien sind fertig gezeichnet, nichts bewegt
   sich, Übergänge passieren sofort.                                      */

[data-motion="reduced"] [data-scroll] {
  --progress: 1 !important;
}
[data-motion="reduced"] .scene-bignum {
  transform: translateY(-50%);
}
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}