/* leben.css — die Seite bewegt sich, bevor man sie anfasst.
   ---------------------------------------------------------------------------
   Warum es diese Datei gibt: Bis zum 29.09.2026 passierte auf der Seite nichts,
   solange man sie nur ansah. Alles war an Maus und Finger gebunden — Überfahren,
   Drücken. Wer die Seite lud und sie betrachtete, sah ein gedrucktes Plakat.
   Björn: „Du hast ja gar keine Wow-Effekte eingebaut."

   Vier Dinge stehen hier, mehr nicht:
     1. Der Blitz im Namen flackert wie eine Leuchtreklame mit Wackelkontakt.
     2. Über der Bühne wandern zwei Scheinwerfer.
     3. Die Countdown-Zahlen kippen um, wenn sie sich ändern.
     4. Was beim Scrollen neu ins Bild kommt, fährt herein.

   Zwei Regeln, die hier nicht verhandelbar sind:
     - Wer „weniger Bewegung" eingestellt hat, bekommt gar nichts davon. Das steht
       ganz unten in einem einzigen Block, damit niemand eine Ausnahme übersieht.
     - Bewegt wird nur mit `transform` und `opacity`. Alles andere zwingt den
       Browser, die Seite neu zu berechnen, und ruckelt auf dem Handy.

   Die Gegenstücke in js/leben.js hängen die Klassen an. Ohne JavaScript bleibt
   die Seite vollständig sichtbar — sie steht dann nur still.
   --------------------------------------------------------------------------- */

/* ---------- 1. Der Blitz flackert ----------
   Unregelmäßig, nicht im Takt: Eine Leuchtreklame mit Wackelkontakt hat keinen
   Rhythmus. Die Schritte liegen deshalb auf krummen Prozentwerten, und die
   längste Pause ist fast zehnmal so lang wie das kürzeste Zucken. */

@keyframes leben-flackern {
   0%,   6%  { opacity: 1;   filter: none; }
   7%        { opacity: .25; filter: none; }
   8%        { opacity: 1;   filter: drop-shadow(0 0 7px rgba(255, 212, 0, .75)); }
   9%        { opacity: .35; filter: none; }
  10%,  53%  { opacity: 1;   filter: none; }
  54%        { opacity: .2;  filter: none; }
  55%        { opacity: 1;   filter: drop-shadow(0 0 10px rgba(255, 212, 0, .9)); }
  56%        { opacity: .45; filter: none; }
  57%        { opacity: 1;   filter: drop-shadow(0 0 5px rgba(255, 212, 0, .6)); }
  59%, 100%  { opacity: 1;   filter: none; }
}

.logo-blitz { animation: leben-flackern 11s steps(1, end) infinite; }

/* Der zweite Blitz im Kopf hat einen eigenen Versatz, sonst zucken beide
   gleichzeitig und es sieht nach Maschine aus statt nach Wackelkontakt. */
.ueberschrift > svg { animation: leben-flackern 13s steps(1, end) -4s infinite; }

/* ---------- 2. Die Scheinwerfer wandern ----------
   Zwei weiche Lichtkegel über dem ganzen Bild. Sie liegen als feste Schicht über
   der Seite und werden nur verschoben — das kostet den Browser fast nichts.
   `screen` addiert Licht, statt Farbe darüberzulegen: Schwarz bleibt lesbar.
   Nur im Stumpi-Modus, das ist der Bühnenmodus. */

@keyframes leben-licht-links {
  0%   { transform: translate3d(-9vw, -4vh, 0)  scale(1);    }
  50%  { transform: translate3d(11vw,  5vh, 0)  scale(1.18); }
  100% { transform: translate3d(-9vw, -4vh, 0)  scale(1);    }
}

@keyframes leben-licht-rechts {
  0%   { transform: translate3d(8vw,   3vh, 0)  scale(1.12); }
  50%  { transform: translate3d(-10vw, -6vh, 0) scale(1);    }
  100% { transform: translate3d(8vw,   3vh, 0)  scale(1.12); }
}

html[data-modus="stumpi"] body::after {
  content: "";
  position: fixed;
  inset: -20vh -20vw;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(38vw 46vh at 28% 18%, rgba(255, 212, 0, .16), transparent 62%),
    radial-gradient(34vw 40vh at 74% 32%, rgba(225,  60, 0, .11), transparent 64%);
  animation: leben-licht-links 34s ease-in-out infinite;
}

/* Der zweite Kegel läuft gegenläufig, damit sich die beiden kreuzen. */
html[data-modus="stumpi"] body::before {
  content: "";
  position: fixed;
  inset: -20vh -20vw;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(30vw 36vh at 62% 12%, rgba(255, 245, 200, .09), transparent 60%);
  animation: leben-licht-rechts 47s ease-in-out infinite;
}

/* ---------- 3. Die Countdown-Zahlen kippen ----------
   Wie eine alte Bahnhofsanzeige: Die Zahl klappt um ihre Waagerechte, wird dabei
   kurz dunkler und kommt von unten zurück. Die Klasse setzt js/leben.js nur dann,
   wenn sich die Zahl wirklich geändert hat — nicht bei jedem Neuzeichnen. */

@keyframes leben-kippen {
  0%   { transform: rotateX(0deg);    opacity: 1;   }
  45%  { transform: rotateX(-88deg);  opacity: .25; }
  55%  { transform: rotateX(88deg);   opacity: .25; }
  100% { transform: rotateX(0deg);    opacity: 1;   }
}

.countdown-zahlen strong { display: inline-block; transform-origin: 50% 50%; backface-visibility: hidden; }
.countdown-zahlen strong.kippt { animation: leben-kippen .42s cubic-bezier(.35, 0, .25, 1); }

/* ---------- 4. Einflug beim Scrollen ----------
   Was neu ins Bild kommt, steht nicht einfach da, sondern fährt von unten herein.

   Wichtig: Versteckt wird ausschließlich, wenn JavaScript läuft UND die Beobachtung
   eingerichtet ist — deshalb hängen beide Klassen zusammen. Bleibt das Skript aus,
   ist die Seite vollständig sichtbar. Ein Zierrat darf niemals Inhalt verschlucken. */

html.leben-einflug [data-einflug="wartet"] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}

html.leben-einflug [data-einflug="da"] {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease-out, transform .55s cubic-bezier(.2, .8, .3, 1);
}

/* ---------- Weniger Bewegung: alles aus ----------
   Eine einzige Stelle, an der jede Bewegung dieser Datei zurückgenommen wird.
   Auch der Einflug — der Inhalt steht dann sofort und vollständig da. */

@media (prefers-reduced-motion: reduce) {
  .logo-blitz,
  .ueberschrift > svg,
  .countdown-zahlen strong.kippt,
  html[data-modus="stumpi"] body::before,
  html[data-modus="stumpi"] body::after { animation: none; }

  html.leben-einflug [data-einflug="wartet"],
  html.leben-einflug [data-einflug="da"] { opacity: 1; transform: none; transition: none; }
}