/* Nexus — Effekte: Cursor, Auftritt/Abgang-Choreografien, Dekodier-Text, Holo-Ränder.
 * Alle Dauern und Farben kommen aus styles.css. Bei prefers-reduced-motion: alles aus. */

#cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; mix-blend-mode: normal; }
#cursor .ring {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1px solid rgba(255, 42, 60, 0.75); box-shadow: 0 0 14px -4px var(--rot-glut);
  transition: width 180ms var(--kurve), height 180ms var(--kurve), margin 180ms var(--kurve), border-color 180ms, opacity 180ms, background 180ms;
}
#cursor .kern { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 8px var(--rot); }
#cursor[data-zustand="aktiv"] .ring { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: var(--rot); background: rgba(255, 42, 60, 0.06); }
#cursor[data-zustand="text"] .ring { width: 6px; height: 28px; margin: -14px 0 0 -3px; border-radius: 3px; background: rgba(255, 42, 60, 0.35); }
#cursor[data-zustand="druck"] .ring { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
#cursor[data-zustand="weg"] { opacity: 0; }

/* Auftritt: Kinder mit data-auftritt schweben gestaffelt herein. */
.auftritt [data-auftritt] { opacity: 0; transform: translateY(14px); filter: blur(4px); }
.auftritt.laeuft [data-auftritt] {
  animation: auftritt var(--dauer-2) var(--kurve) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes auftritt { to { opacity: 1; transform: none; filter: none; } }
.auftritt.fertig [data-auftritt] { animation: none; opacity: 1; transform: none; filter: none; }
.abgang { animation: abgang 380ms var(--kurve-2) forwards; }
@keyframes abgang { to { opacity: 0; transform: translateY(-10px) scale(0.985); filter: blur(3px); } }
.einblenden { animation: einblenden var(--dauer-2) var(--kurve) both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } }

/* Dekodier-Text: Zeichen flackern durch, bis das Wort steht (JS setzt die Zeichen). */
.dekodiert { font-variant-numeric: tabular-nums; }
.dekodiert .roh { color: var(--rot); opacity: 0.85; }

/* Holo-Rand: umlaufendes Licht auf Kacheln/Knöpfen mit .holo. */
.holo { position: relative; }
.holo::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--winkel, 0deg), transparent 0 55%, var(--rot) 72%, rgba(255, 255, 255, 0.5) 78%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity var(--dauer-2);
}
.holo:hover::after, .holo.an::after { opacity: 1; animation: kreisen 3s linear infinite; }

/* Scan-Balken über einem Element, das gerade „arbeitet". */
.arbeitet { position: relative; overflow: hidden; }
.arbeitet::before {
  content: ""; position: absolute; left: -40%; top: 0; bottom: 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 42, 60, 0.12), transparent);
  animation: wischen 1.6s var(--kurve-2) infinite;
}
@keyframes wischen { to { left: 100%; } }

/* Zähler, der hochtickt (JS animiert die Zahl). */
.ticker { font-variant-numeric: tabular-nums; }

/* Rauschen als Textur — reine CSS, kein Bild. */
.rauschen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay; border-radius: inherit;
  background-image: repeating-radial-gradient(circle at 17% 31%, rgba(255,255,255,0.4) 0 0.6px, transparent 0.8px 3px),
    repeating-radial-gradient(circle at 63% 78%, rgba(255,255,255,0.3) 0 0.5px, transparent 0.7px 2.4px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .auftritt [data-auftritt] { opacity: 1; transform: none; filter: none; }
  #cursor { display: none; }
  body[data-cursor="eigen"], body[data-cursor="eigen"] * { cursor: auto !important; }
}