/* MIRSYON — Atmosphäre, Bewegung, Textenthüllung */

/* --- Feines technisches Raster über dem Seitengrund --- */
.raster-grund {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(123, 205, 254, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(123, 205, 254, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
body > header, body > main, body > footer { position: relative; z-index: 1; }

/* --- Lichtschein --- */
.schein { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); z-index: 0; }
.schein--blau   { background: radial-gradient(circle, rgba(42, 108, 238, .38), transparent 68%); }
.schein--eis    { background: radial-gradient(circle, rgba(123, 205, 254, .30), transparent 68%); }
.schein--tuerkis{ background: radial-gradient(circle, rgba(86, 228, 210, .18), transparent 68%); }

/* --- Einblenden beim Scrollen --- */
.js-an .zeigt { opacity: 0; transform: translateY(26px); transition: opacity var(--tempo-lang), transform var(--tempo-lang); }
.js-an .zeigt.ist-sichtbar { opacity: 1; transform: none; }
.js-an .zeigt--links  { transform: translateX(-26px); }
.js-an .zeigt--rechts { transform: translateX(26px); }
.js-an .zeigt--links.ist-sichtbar, .js-an .zeigt--rechts.ist-sichtbar { transform: none; }
.js-an [data-verzug="1"] { transition-delay: .08s; }
.js-an [data-verzug="2"] { transition-delay: .16s; }
.js-an [data-verzug="3"] { transition-delay: .24s; }
.js-an [data-verzug="4"] { transition-delay: .32s; }
.js-an [data-verzug="5"] { transition-delay: .40s; }

/* --- Zeilenweise Textenthüllung --- */
.enthuellen { display: block; }
.js-an .enthuellen .wort { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg); }
.js-an .enthuellen.ist-sichtbar .wort {
  opacity: 1; transform: none;
  transition: opacity .62s cubic-bezier(.19,1,.22,1), transform .62s cubic-bezier(.19,1,.22,1);
  transition-delay: calc(var(--i) * 36ms);
}

/* --- Glaskarte --- */
/* Glas statt Kasten — die einzige zulässige Karte auf der Bühne. */
.glas {
  background: linear-gradient(158deg, var(--glas-stark), var(--glas));
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(34px) saturate(170%);
  backdrop-filter: blur(34px) saturate(170%);
  box-shadow: var(--schatten), inset 0 1px 0 var(--glas-licht);
  transition: border-color var(--tempo), transform var(--tempo), box-shadow var(--tempo), background var(--tempo);
}
.glas:hover { border-color: var(--linie-dunkel-hell); transform: translateY(-4px);
  box-shadow: var(--schatten-gross), inset 0 1px 0 var(--glas-licht); }

/* --- Lichtrand, der dem Zeiger folgt --- */
.leuchtrand { position: relative; }
.leuchtrand::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(123, 205, 254, .75), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--tempo); pointer-events: none;
}
.leuchtrand:hover::before { opacity: 1; }

/* --- Laufschrift --- */
.laufband { overflow: hidden; border-block: 1px solid var(--linie-dunkel); padding-block: 1.15rem; }
.laufband__spur { display: flex; width: max-content; gap: 3.5rem; animation: laufen 44s linear infinite; }
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband__glied {
  display: inline-flex; align-items: center; gap: 3.5rem;
  font-family: var(--font-display); font-size: var(--schrift-sm); letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-hell-leise); white-space: nowrap;
}
.laufband__glied span::before { content: "◆"; margin-right: 3.5rem; color: var(--hellblau); opacity: .55; }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .laufband__spur { animation: none; } }

/* --- Pulsierender Punkt --- */
.puls { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--tuerkis); flex: none; }
.puls::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid var(--tuerkis); opacity: .6; animation: pulsieren 2.4s ease-out infinite;
}
@keyframes pulsieren { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .puls::after { animation: none; } }

/* --- Fortschrittsbalken der Seite --- */
.lesebalken {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 95; transform-origin: 0 50%;
  transform: scaleX(0); background: linear-gradient(90deg, var(--akzent), var(--hellblau), var(--tuerkis));
}

/* Auf schmalen Geräten nur senkrecht einblenden — seitliche Versätze
   erzeugen sonst einen waagerechten Überstand. */
@media (max-width: 940px) {
  .js-an .zeigt--links, .js-an .zeigt--rechts { transform: translateY(24px); }
}

/* Lichtscheine dürfen die Seite nie breiter machen als das Fenster. */
.seitenkopf, .buehne { overflow: hidden; }
.schein { max-width: 100vw; }


/* ===== Licht, Rauschen, Vignette — nach dem Designkern =====================
   Tiefe entsteht aus drei weichen Lichtquellen plus Bodenlicht und feinem
   Rauschen, nicht aus flachen Farbflächen oder harten Schatten. */
.licht { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.licht i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); }
.licht .l1 { width: min(72vw, 980px); aspect-ratio: 1; left: -22vw; top: -34vh;
  background: radial-gradient(closest-side, rgba(42, 108, 238, .60), rgba(42, 108, 238, 0) 72%); }
.licht .l2 { width: min(66vw, 900px); aspect-ratio: 1; right: -20vw; top: 12vh;
  background: radial-gradient(closest-side, rgba(78, 139, 255, .42), rgba(78, 139, 255, 0) 72%); }
.licht .l3 { width: min(60vw, 820px); aspect-ratio: 1; left: 14vw; bottom: -38vh;
  background: radial-gradient(closest-side, rgba(123, 205, 254, .28), rgba(123, 205, 254, 0) 72%); }
.licht .l4 { width: 100%; height: 44%; left: 0; bottom: -22%; border-radius: 0; filter: blur(40px);
  background: radial-gradient(60% 100% at 50% 100%, rgba(42, 108, 238, .30), rgba(42, 108, 238, 0)); }

/* Das Rauschen gehört auf den Grund, nicht über die Schrift — sonst wirkt der
   Text körnig statt der Fläche. */
.rauschen {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .075; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
}
.vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 42%, transparent 58%, rgba(2, 6, 16, .36) 100%);
}
.insel .licht i { opacity: .34; }

/* Ein Wort im Verlauf — nie ein ganzer Satz. */
.verlauf-wort {
  background: var(--verlauf-weich); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; padding-right: .04em;
}

/* Das Licht der Seitenköpfe läuft nach unten weich aus — sonst entsteht eine
   sichtbare Kante zum nächsten Abschnitt. */
.seitenkopf .licht {
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
}
.seitenkopf .licht .l3, .seitenkopf .licht .l4 { display: none; }