/* ── Hero: Chaos → Ordnung ──
   Die Headline startet 2 Sekunden im Chaos und ordnet sich dann von selbst.
   Gesteuert von /assets/chaos-ordnung.js (einmal pro Besuch). */

#hero .hero-l > * { position: relative; z-index: 1; }

/* Das Chaos bleibt in der Textspalte; Foto und Porträt rechts bleiben ruhig */
.chaos-active #hero .hero-l,
.chaos-ordered #hero .hero-l { overflow: hidden; }

#hero .hero-l > .chaos-lines {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Bis die Buchstaben verstreut sind, bleibt die Headline unsichtbar (kein Aufblitzen) */
.chaos-pending #hero h1 { visibility: hidden; }

.chaos-word { white-space: nowrap; }
.chaos-char { display: inline-block; }

.chaos-active #hero .chaos-char { transition: transform 1.6s ease-in-out, color 0.4s; }
.chaos-ordered #hero .chaos-char { transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), color 1s; }
.chaos-no-anim #hero .chaos-char { transition: none !important; }

/* Glitch: zwei verschobene Kopien des geordneten Satzes blitzen kurz durch */
.chaos-active #hero h1::before,
.chaos-active #hero h1::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  white-space: pre-line;
  opacity: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.chaos-active #hero h1::before { color: var(--green); }
.chaos-active #hero h1::after { color: var(--stone); }

#hero h1.chaos-glitch { animation: chaos-jitter 0.36s steps(3) both; }
.chaos-active #hero h1.chaos-glitch::before { opacity: 0.9; animation: chaos-slice-a 0.36s steps(3) both; }
.chaos-active #hero h1.chaos-glitch::after { opacity: 0.9; animation: chaos-slice-b 0.36s steps(3) both; }

@keyframes chaos-jitter {
  0%   { transform: translate(0, 0) skewX(0); }
  25%  { transform: translate(-0.04em, 0.02em) skewX(-10deg); }
  50%  { transform: translate(0.05em, -0.02em) skewX(6deg); }
  75%  { transform: translate(-0.02em, 0) skewX(-3deg); }
  100% { transform: translate(0, 0) skewX(0); }
}

@keyframes chaos-slice-a {
  0%   { clip-path: inset(8% 0 62% 0);  transform: translate(-0.08em, -0.02em); }
  33%  { clip-path: inset(48% 0 24% 0); transform: translate(0.06em, 0.01em); }
  66%  { clip-path: inset(78% 0 4% 0);  transform: translate(-0.05em, 0.02em); }
  100% { clip-path: inset(30% 0 50% 0); transform: translate(0.04em, -0.01em); }
}

@keyframes chaos-slice-b {
  0%   { clip-path: inset(60% 0 12% 0); transform: translate(0.08em, 0.02em); }
  33%  { clip-path: inset(14% 0 66% 0); transform: translate(-0.06em, -0.01em); }
  66%  { clip-path: inset(38% 0 40% 0); transform: translate(0.05em, 0); }
  100% { clip-path: inset(70% 0 10% 0); transform: translate(-0.03em, 0.01em); }
}