/* Companion Motion — Wartezustände
   Acht Bausteine. Geometrie und Zeiten sind über alle Applikationen identisch;
   die Produktfarbe ist das einzige Unterscheidungsmerkmal.

   Einbinden: einmal global importieren. Farben kommen über die Custom Properties
   --cm-color (Vollton) und --cm-light (helle Variante) vom Elternelement. */

:root {
  /* Dauern — alle über --cm-tempo skalierbar (1 = Normaltempo) */
  --cm-tempo: 1;
  --cm-dur-bar: calc(1.6s / var(--cm-tempo));
  --cm-dur-dot: calc(1.3s / var(--cm-tempo));
  --cm-dur-breath: calc(2.6s / var(--cm-tempo));
  --cm-dur-shimmer: calc(1.9s / var(--cm-tempo));
  --cm-dur-spinner: calc(0.9s / var(--cm-tempo));
  --cm-dur-ripple: calc(1.8s / var(--cm-tempo));
  --cm-dur-ring-out: calc(4s / var(--cm-tempo));
  --cm-dur-ring-in: calc(2.6s / var(--cm-tempo));
  --cm-dur-done: calc(1.2s / var(--cm-tempo));
  --cm-dur-jump: 400ms;
  --cm-dur-caret: 1s;
  --cm-delay-stagger: 100ms;
  --cm-delay-dot: 160ms;

  /* Kurven */
  --cm-ease-bar: cubic-bezier(.62, .02, .38, .98);
  --cm-ease-out: cubic-bezier(.22, 1, .36, 1);
  --cm-ease-spinner: cubic-bezier(.55, .1, .45, .9);

  /* Flächen */
  --cm-track: #EDEFF1;
  --cm-track-dark: #262E35;
  --cm-radius-bar: 4px;
  --cm-bar-height: 8px;
  --cm-dot-size: 9px;
  --cm-dot-gap: 10px;
}

@keyframes cm-ring-cw  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cm-ring-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes cm-core-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
@keyframes cm-bar-stretch {
  0%   { left: -38%; width: 38%; }
  38%  { left: 14%;  width: 56%; }
  68%  { left: 56%;  width: 38%; }
  100% { left: 100%; width: 20%; }
}
@keyframes cm-dot-wave {
  0%, 62%, 100% { transform: translateY(0) scale(.84); opacity: .3; }
  28%           { transform: translateY(-7px) scale(1); opacity: 1; }
}
@keyframes cm-bubble-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.022); } }
@keyframes cm-shimmer { 0% { background-position: 180% 0; } 100% { background-position: -180% 0; } }
@keyframes cm-caret-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes cm-draw-check { 0%, 30% { stroke-dashoffset: 60; } 56%, 100% { stroke-dashoffset: 0; } }
@keyframes cm-draw-ring  { 0% { stroke-dashoffset: 264; } 44%, 100% { stroke-dashoffset: 0; } }
@keyframes cm-halo-out {
  0%, 44% { transform: scale(.86); opacity: 0; }
  58%     { opacity: .34; }
  100%    { transform: scale(1.34); opacity: 0; }
}
@keyframes cm-ripple { 0% { transform: scale(.62); opacity: .5; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes cm-fade-up { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes cm-tick-sweep { 0% { opacity: .16; } 50% { opacity: .5; } 100% { opacity: .16; } }

/* 1 · Ladebalken, unbestimmt */
.cm-bar { position: relative; height: var(--cm-bar-height); border-radius: var(--cm-radius-bar); background: var(--cm-track); overflow: hidden; }
.cm-bar__seg { position: absolute; top: 0; bottom: 0; left: -38%; width: 38%; border-radius: var(--cm-radius-bar); background: var(--cm-color); animation: cm-bar-stretch var(--cm-dur-bar) var(--cm-ease-bar) infinite; }
.cm-bar__seg--ghost { opacity: .22; animation-delay: -.42s; }

/* 2 · Ladebalken, bestimmt */
.cm-progress { position: relative; height: var(--cm-bar-height); border-radius: var(--cm-radius-bar); background: var(--cm-track); overflow: hidden; }
.cm-progress__fill { height: 100%; border-radius: var(--cm-radius-bar); background: var(--cm-color); transition: width var(--cm-dur-jump) var(--cm-ease-out); }
.cm-progress__gloss { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--cm-radius-bar); background: linear-gradient(90deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.42) 70%, rgba(255,255,255,0) 100%); background-size: 280% 100%; animation: cm-shimmer var(--cm-dur-shimmer) linear infinite; transition: width var(--cm-dur-jump) var(--cm-ease-out); }
.cm-progress__gloss--paused { animation-play-state: paused; }

/* 3 · Chat arbeitet */
.cm-typing { display: inline-flex; align-items: center; gap: var(--cm-dot-gap); animation: cm-bubble-breath var(--cm-dur-breath) ease-in-out infinite; }
.cm-typing__dot { width: var(--cm-dot-size); height: var(--cm-dot-size); border-radius: 50%; background: var(--cm-light); animation: cm-dot-wave var(--cm-dur-dot) ease-in-out infinite; }
.cm-typing__dot:nth-child(2) { animation-delay: var(--cm-delay-dot); }
.cm-typing__dot:nth-child(3) { animation-delay: calc(var(--cm-delay-dot) * 2); }

/* 4 · Antwort läuft ein */
.cm-caret { display: inline-block; width: 9px; height: 17px; margin-left: 3px; vertical-align: -3px; background: var(--cm-light); animation: cm-caret-blink var(--cm-dur-caret) step-end infinite; }
.cm-ring__outer { animation: cm-ring-cw var(--cm-dur-ring-out) linear infinite; transform-origin: 50px 50px; }
.cm-ring__inner { animation: cm-ring-ccw var(--cm-dur-ring-in) linear infinite; transform-origin: 50px 50px; }
.cm-ring__core  { animation: cm-core-pulse 1.6s ease-in-out infinite; }

/* 5 · Inhalt lädt */
.cm-skeleton { background: linear-gradient(90deg, var(--cm-track) 0%, color-mix(in srgb, var(--cm-color) 18%, var(--cm-track)) 46%, var(--cm-track) 92%); background-size: 300% 100%; animation: cm-shimmer var(--cm-dur-shimmer) linear infinite; border-radius: 5px; }
.cm-skeleton--circle { border-radius: 50%; }

/* 6 · Schaltfläche arbeitet */
.cm-button-spinner { animation: cm-ring-cw var(--cm-dur-spinner) var(--cm-ease-spinner) infinite; transform-origin: 50px 50px; }

/* 7 · Abgeschlossen — im Produkt genau einmal, nicht als Schleife */
.cm-done__halo  { position: absolute; border-radius: 50%; border: 2px solid var(--cm-color); animation: cm-halo-out var(--cm-dur-done) var(--cm-ease-out) 1 both; }
.cm-done__ring  { animation: cm-draw-ring var(--cm-dur-done) var(--cm-ease-out) 1 both; }
.cm-done__check { animation: cm-draw-check var(--cm-dur-done) var(--cm-ease-out) 1 both; }
.cm-done__label { animation: cm-fade-up .5s var(--cm-ease-out) both; }

/* 8 · Verbindung und Abgleich */
.cm-pulse { position: relative; width: 22px; height: 22px; display: grid; place-items: center; flex: none; }
.cm-pulse__wave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cm-color); animation: cm-ripple var(--cm-dur-ripple) ease-out infinite; }
.cm-pulse__wave:nth-child(2) { animation-delay: .9s; }
.cm-pulse__core { width: 9px; height: 9px; border-radius: 50%; background: var(--cm-color); }

/* Taktmarken unter dem unbestimmten Balken (optional) */
.cm-ticks { display: flex; justify-content: space-between; }
.cm-ticks > i { width: 1px; height: 5px; background: #14181C; opacity: .16; animation: cm-tick-sweep 2.4s ease-in-out infinite; }
.cm-ticks > i:nth-child(2) { animation-delay: .2s; }
.cm-ticks > i:nth-child(3) { animation-delay: .4s; }
.cm-ticks > i:nth-child(4) { animation-delay: .6s; }
.cm-ticks > i:nth-child(5) { animation-delay: .8s; }
.cm-ticks > i:nth-child(6) { animation-delay: 1s; }
.cm-ticks > i:nth-child(7) { animation-delay: 1.2s; }

/* Reduzierte Bewegung: Rotation, Wanderung und Schimmer entfallen.
   Es bleiben Deckkraftwechsel im Zwei-Sekunden-Takt und der bestimmte Ladebalken. */
@media (prefers-reduced-motion: reduce) {
  .cm-bar__seg,
  .cm-progress__gloss,
  .cm-skeleton,
  .cm-ring__outer,
  .cm-ring__inner,
  .cm-button-spinner,
  .cm-pulse__wave,
  .cm-done__halo,
  .cm-ticks > i {
    animation: none !important;
  }
  .cm-bar__seg { left: 0; width: 100%; opacity: .3; animation: cm-core-pulse 2s ease-in-out infinite !important; }
  .cm-typing { animation: none !important; }
  .cm-typing__dot { animation: cm-core-pulse 2s ease-in-out infinite !important; }
  .cm-skeleton { background: var(--cm-track); }
  .cm-progress__fill { transition: width var(--cm-dur-jump) linear; }
}