/* Motion-Grafiken: gemeinsame Effekte für alle Module in assets/motion/.
   Farben nur aus kern.css. Glühfarben nur in Bildflächen (.art, Canvas), nie auf Text, Buttons oder Icons. */

/* KI denkt: Lichtkante läuft über neutralen Text (in Tinte, nicht im Glühen) */
.zm-shimmer {
  background: linear-gradient(90deg, var(--subtle) 0 38%, var(--ink) 50%, var(--subtle) 62% 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: zm-shimmer 1.5s linear infinite;
}
.panel.dark .zm-shimmer, .zm-night .zm-shimmer {
  background-image: linear-gradient(90deg, var(--on-night-muted) 0 38%, var(--on-night) 50%, var(--on-night-muted) 62% 100%);
}
@keyframes zm-shimmer { from { background-position: 100% 0; } to { background-position: -60% 0; } }

/* Schreibcursor beim Streaming */
.zm-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.16em; background: currentColor; animation: zm-blink 1s steps(1) infinite; }
@keyframes zm-blink { 50% { opacity: 0; } }

/* Ein Token erscheint: aus der Unschärfe ins Scharfe */
.zm-tok { animation: zm-tok 380ms var(--ease) both; }
@keyframes zm-tok { from { opacity: 0; filter: blur(3px); } }

/* Gestaffelte Wörter (ZM.words), ausgelöst über .in; ohne Unschärfe (teuer auf großer Schrift und zu effektvoll) */
.zm-words .w { display: inline-block; opacity: 0; transform: translateY(0.12em); transition: opacity 700ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--n) * 55ms + var(--zm-delay, 0ms)); }
.zm-words.in .w { opacity: 1; transform: none; }

/* Bewegung anhalten: Knöpfe mit data-zm-pause (kern.js); angehalten stehen auch alle CSS-Animationen */
.zm-paused *, .zm-paused *::before, .zm-paused *::after { animation-play-state: paused !important; }
.zm-pause { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.zm-pause .icon { width: 14px; height: 14px; }
.zm-pause .i-play, .zm-paused .zm-pause .i-pause { display: none; }
.zm-paused .zm-pause .i-play { display: block; }
.hero-visual > .zm-pause { position: absolute; top: 16px; right: 16px; z-index: 3; width: 36px; height: 36px; justify-content: center; border-radius: var(--r-pill); background: rgb(17 18 32 / 0.55); color: var(--on-night); opacity: 0.6; transition: opacity var(--dur) var(--ease); }
.hero-visual > .zm-pause:hover, .hero-visual > .zm-pause:focus-visible { opacity: 1; }
html:not(.js) .zm-pause { display: none; }

/* Reduzierte Bewegung: Szenen mit ruhiger Fassung (Hero) laufen weiter, deshalb bleibt der Pause-Knopf;
   Shimmer und entstehender Text bleiben (keine Bewegung durch den Raum), Unschärfe und Cursor fallen weg */
@media (prefers-reduced-motion: reduce) {
  .zm-caret { display: none; }
  .zm-tok { animation: none; }
  .zm-words .w { opacity: 1; filter: none; transform: none; transition: none; }
}