/* Die Stile der Logo-Animationen (caselli-motion.js, CSP-Fassung).
 *
 * WORTGLEICH AUS DEM BRAND-KIT v0.2 (die Konstante `CSS` der Bibliothek),
 * mit zwei Unterschieden, beide wegen unserer Regeln:
 *
 * - EINE DATEI STATT EINES <style>-ELEMENTS. Die Inhaltsrichtlinie
 *   (`style-src 'self'`) verbietet, dass ein Skript Stile einsetzt.
 * - FARBEN NUR ALS ZEICHEN. Rohfarben stehen ausschliesslich im
 *   Zeichenblock von stil.css (`--licht-*`); dort sind sie fest und nicht
 *   themenabhaengig, weil Licht in jedem Thema Dunkelheit braucht.
 *   `test_kein_bauteil_benutzt_eine_rohfarbe` haelt das auch hier.
 *
 * `.cm-light` ist das Lockup auf hellem Grund (`navLogo({ theme: "light" })`):
 * die Leiste ist seit dem 05.10.2026 im hellen Thema hell.
 *
 * DIE MISCHART DER LEINWAND kommt aus dem Thema (`--licht-mischung` in
 * stil.css): `screen` auf Dunkel wie im Kit, `multiply` auf Hell - dort
 * laufen die Animationen seit dem 05.10.2026 ohne schwarzen Kasten.
 */

.cm-stage {
  --cm-size: 120px;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: var(--cm-size);
  isolation: isolate;
}
.cm-stage > * {
  grid-area: 1 / 1;
}
.cm-fx {
  position: absolute;
  left: calc(var(--cm-size) * -0.4);
  top: calc(var(--cm-size) * -0.4);
  width: calc(100% + var(--cm-size) * 0.8);
  height: calc(100% + var(--cm-size) * 0.8);
  pointer-events: none;
  mix-blend-mode: var(--licht-mischung, screen);
}
.cm-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cm-size) * 1.9);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(closest-side, var(--licht-hof), var(--licht-hof-rand) 60%, transparent);
  filter: blur(calc(var(--cm-size) * 0.18));
}
.cm-mark,
.cm-lockup {
  display: block;
  width: var(--cm-size);
  height: auto;
  overflow: visible;
}
.cm-col,
.cm-think {
  display: grid;
  justify-items: center;
  gap: calc(var(--cm-size) * 0.15);
}
.cm-dim {
  opacity: 0.28;
}
.cm-status {
  display: grid;
  justify-items: center;
  height: 1.6em;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
.cm-status > * {
  grid-area: 1 / 1;
}
.cm-shimmer {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--licht-schimmer) 0%,
    var(--licht-schimmer) 38%,
    var(--licht-schimmer-hell) 50%,
    var(--licht-schimmer) 62%,
    var(--licht-schimmer) 100%
  );
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cm-ready {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--licht-bereit);
  font-weight: 600;
  opacity: 0;
}
.cm-ready svg,
.cm-done svg {
  width: 1.05em;
  height: 1.05em;
}
.cm-done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--licht-bereit-flaeche);
  color: var(--licht-bereit);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
}
.cm-all,
.cm-idot,
.cm-period,
.cm-ripple,
.cm-sil-ripple {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.cm-back,
.cm-front {
  transform-origin: 2px 120px;
}
.cm-ink {
  fill: var(--licht-tinte);
}
.cm-ai {
  fill: var(--licht-endung);
}
.cm-period {
  fill: var(--licht-punkt);
}
.cm-light .cm-ink {
  fill: var(--licht-tinte-hell);
}
.cm-greeting {
  min-height: calc(var(--cm-size) * 0.42);
}
.cm-greeting .cm-glow {
  width: calc(var(--cm-size) * 0.9);
}
.cm-greeting .cm-fx,
.cm-nav .cm-fx {
  left: calc(var(--cm-size) * -0.12);
  top: calc(var(--cm-size) * -0.12);
  width: calc(100% + var(--cm-size) * 0.24);
  height: calc(100% + var(--cm-size) * 0.24);
}
.cm-nav {
  min-height: 0;
}
.cm-nav .cm-lockup {
  cursor: pointer;
}
.cm-icon {
  width: var(--cm-size);
  aspect-ratio: 1;
  border-radius: 26%;
  background: var(--licht-icon);
  display: grid;
  place-items: center;
  box-shadow:
    0 1px 0 var(--licht-icon-kante) inset,
    0 20px 40px -18px var(--licht-icon-schatten);
}
.cm-icon .cm-mark {
  width: auto;
  height: 64%;
}
.cm-icon-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: calc(var(--cm-size) * 1.8);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    var(--licht-icon-hof),
    var(--licht-icon-hof-rand) 55%,
    transparent
  );
  filter: blur(calc(var(--cm-size) * 0.14));
}
.cm-hover {
  cursor: pointer;
  outline: none;
}
.cm-hover .cm-glow {
  transition:
    transform 0.8s var(--kurve-aus),
    opacity 0.8s;
  opacity: 0.45;
}
.cm-hover.cm-on .cm-glow {
  transform: scale(1.2);
  opacity: 1;
}
.cm-hover:focus-visible {
  box-shadow: inset 0 0 0 2px var(--licht-ring);
  border-radius: 16px;
}

/* AUF HELLEM GRUND (seit 05.10.2026): der Geist des Zeichens - die leise
 * Silhouette, um die beim Laden und Denken das Licht laeuft - ist im Kit
 * das Zeichen selbst in geringer Deckkraft. Auf Weiss wird daraus ein
 * schmutziges Grau (im Browser gesehen). Hier fuellt ihn ein leises Indigo
 * (`--licht-geist`, indigo-300): bei derselben Deckkraft ein heller
 * Lavendelton, ueber den die Spur in Indigo laeuft. Nur im hellen Thema;
 * im dunklen bleibt alles wie im Kit. */
:root:not([data-thema="dunkel"]):not([data-thema="system"]) .cm-dim path,
:root:not([data-thema="dunkel"]):not([data-thema="system"]) .cm-ghost > path:first-child {
  fill: var(--licht-geist);
}

:root:not([data-thema="dunkel"]):not([data-thema="system"]) .cm-ghost > path:first-child {
  opacity: 0.28;
}

@media (prefers-color-scheme: light) {
  :root[data-thema="system"] .cm-dim path,
  :root[data-thema="system"] .cm-ghost > path:first-child {
    fill: var(--licht-geist);
  }

  :root[data-thema="system"] .cm-ghost > path:first-child {
    opacity: 0.28;
  }
}