/* 5AM Creators Club – Bewegung des Zeichens, ARBEITSFASSUNG mit Logo D (29.10.2026).
   Quelle: marke/quellen/bewegung.css, kopiert von bauen.py nach marke/bewegung.css. Braucht tokens.css (Dauern, Kurven).
   Joern: „Das Logo kann man auch animieren, oder, wenn das lädt?“ und zu D: „… den mittleren J3-Ring für Wartezeiten.“

   Grundregel: Ohne Animation steht das fertige Zeichen da. Die Keyframes beschreiben nur den Weg dorthin.
   Darum zeigt „Bewegung reduzieren“ automatisch das Standbild. Intro mit D (zwei Ringe), Ladeanzeige mit J3 (ein Ring). */

.cc-bewegt { display: block; color: inherit; }
.cc-bewegt .cc-ring { fill: none; stroke: currentColor; stroke-linecap: butt; }
.cc-bewegt .cc-kern { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.cc-bewegt .cc-ring-dreh { transform-box: view-box; transform-origin: 50px 50px; }

/* Intro, einmal beim ersten Laden: der Kern erscheint, der äußere Ring zeichnet sich von seiner Tür oben rechts aus im
   Uhrzeigersinn um ihn, danach der innere von seiner Tür auf fünf Uhr aus. Erst draußen, dann drinnen. */
.cc-intro .cc-kern { animation: cc-kern-erscheinen 700ms var(--cc-kurve-aus, cubic-bezier(.22, 1, .36, 1)) both; }
.cc-intro .cc-ring { animation: cc-ring-zeichnen var(--cc-dauer-intro, 1200ms) var(--cc-kurve-sanft, cubic-bezier(.65, 0, .35, 1)) 200ms both; }
.cc-intro .cc-ring--innen { animation-duration: var(--cc-dauer-intro-innen, 1000ms); animation-delay: 500ms; }
.cc-intro-wort { animation: cc-wort-erscheinen var(--cc-dauer-wort, 600ms) var(--cc-kurve-aus, cubic-bezier(.22, 1, .36, 1)) 1100ms both; }

@keyframes cc-kern-erscheinen { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes cc-ring-zeichnen   { from { stroke-dasharray: 0 360; } to { stroke-dasharray: var(--cc-bogen, 314) 360; } }
@keyframes cc-wort-erscheinen { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* Ladeanzeige mit J3: die Öffnung wandert langsam rundum, der Kern atmet im selben Takt. Jede Umdrehung endet oben rechts;
   zum Beenden ccLadenBeenden() aus bewegung.js: die Öffnung läuft sanft aus und kommt oben rechts zur Ruhe. */
.cc-lade .cc-ring-dreh { animation: cc-drehen var(--cc-dauer-lade, 2800ms) linear infinite; }
.cc-lade .cc-kern { animation: cc-atmen var(--cc-dauer-lade, 2800ms) var(--cc-kurve-sanft, cubic-bezier(.65, 0, .35, 1)) infinite; }

@keyframes cc-drehen { to { transform: rotate(360deg); } }
@keyframes cc-atmen  { 0%, 100% { transform: scale(1); } 50% { transform: scale(.84); } }

@media (prefers-reduced-motion: reduce) {
  .cc-intro .cc-kern, .cc-intro .cc-ring, .cc-intro-wort, .cc-lade .cc-ring-dreh, .cc-lade .cc-kern { animation: none; }
}