/* Logo-Animationsstile. Gewählt wird im Admin, die Startseite setzt data-anim an .stage.
   Alle Stile beginnen nach dem Auftakt (--ad) und entfallen bei „Bewegung reduzieren“. */

.stage { --ad: calc(3.4s * var(--k, 1)); }
.ia, .ib { transform-box: view-box; transform-origin: 700px 611px; }
.s-turn { transform-box: fill-box; transform-origin: center; }
.logo { transform-origin: 50% 50%; }

/* 1 · Uhrwerk: S dreht sich, Ringe zucken mit, danach Glanz (12 s) */
[data-anim='uhrwerk'] .s-turn { animation: uw-s 12s var(--ad) infinite; }
[data-anim='uhrwerk'] .ia { animation: uw-a 12s ease-in-out var(--ad) infinite; }
[data-anim='uhrwerk'] .ib { animation: uw-b 12s ease-in-out var(--ad) infinite; }
[data-anim='uhrwerk'] .sheen-bar { animation: uw-sheen 12s ease-in-out var(--ad) infinite; }
@keyframes uw-s {
  0% { transform: rotate(0); filter: brightness(1); animation-timing-function: cubic-bezier(.55, 0, .25, 1); }
  11% { transform: rotate(374deg); filter: brightness(1.35); animation-timing-function: ease-in-out; }
  15% { transform: rotate(355deg); animation-timing-function: ease-in-out; }
  19%, 100% { transform: rotate(360deg); filter: brightness(1); }
}
@keyframes uw-a { 0% { transform: rotate(0); } 7% { transform: rotate(-14deg); } 17% { transform: rotate(5deg); } 25%, 100% { transform: rotate(0); } }
@keyframes uw-b { 0%, 2% { transform: rotate(0); } 9% { transform: rotate(16deg); } 19% { transform: rotate(-5deg); } 27%, 100% { transform: rotate(0); } }
@keyframes uw-sheen { 0%, 27% { transform: translateX(0); } 42%, 100% { transform: translateX(2300px); } }

/* 2 · Münze: 5 s Stillstand, langsam, kurz schnell, langsam zurück (34 s) */
[data-anim='muenze'] .logo { animation: mz-spin 34s linear var(--ad) infinite; }
[data-anim='muenze'] .s-turn { animation: mz-s 34s var(--ad) infinite; }
[data-anim='muenze'] .sheen-bar { animation: mz-sheen 34s ease-in-out var(--ad) infinite; }
@keyframes mz-spin {
  0%, 14.7% { transform: perspective(1100px) rotateY(0deg); animation-timing-function: cubic-bezier(.4, 0, .9, 1); }
  17.6% { transform: perspective(1100px) rotateY(7deg); animation-timing-function: linear; }
  52.9% { transform: perspective(1100px) rotateY(180deg); animation-timing-function: cubic-bezier(.3, .1, .3, 1); }
  61.8% { transform: perspective(1100px) rotateY(540deg); animation-timing-function: linear; }
  96% { transform: perspective(1100px) rotateY(700deg); animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  100% { transform: perspective(1100px) rotateY(720deg); }
}
@keyframes mz-s {
  0%, 20.6% { transform: rotate(0); filter: brightness(1); animation-timing-function: cubic-bezier(.55, 0, .25, 1); }
  25% { transform: rotate(374deg); filter: brightness(1.35); animation-timing-function: ease-in-out; }
  26.5% { transform: rotate(355deg); animation-timing-function: ease-in-out; }
  28%, 100% { transform: rotate(360deg); filter: brightness(1); }
}
@keyframes mz-sheen { 0%, 2.9% { transform: translateX(0); } 29.4%, 100% { transform: translateX(2300px); } }

/* 3 · Orbit: Ringe kreisen gegeneinander, S leuchtet sanft */
[data-anim='orbit'] .ia { animation: lg-rot 40s linear var(--ad) infinite; }
[data-anim='orbit'] .ib { animation: lg-rot 52s linear var(--ad) infinite reverse; }
[data-anim='orbit'] .s-turn { animation: glow 6s ease-in-out var(--ad) infinite; }
@keyframes lg-rot { to { transform: rotate(360deg); } }
@keyframes glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }

/* 4 · Herzschlag: doppelter Puls alle 3,2 s */
[data-anim='puls'] .logo { animation: beat 3.2s var(--ad) infinite; }
[data-anim='puls'] .s-turn { animation: beat-glow 3.2s var(--ad) infinite; }
@keyframes beat {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  7% { transform: scale(1.065); animation-timing-function: ease-in; }
  15% { transform: scale(1); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  21% { transform: scale(1.04); animation-timing-function: ease-in; }
  32%, 100% { transform: scale(1); }
}
@keyframes beat-glow { 0%, 32%, 100% { filter: brightness(1); } 7% { filter: brightness(1.4); } 21% { filter: brightness(1.25); } }

/* 5 · Glanz: ruhig, alle 8 s ein weicher Glanz */
[data-anim='glanz'] .sheen-bar { animation: gl-sheen 8s ease-in-out var(--ad) infinite; }
[data-anim='glanz'] .s-turn { animation: gl-s 8s ease-in-out var(--ad) infinite; }
@keyframes gl-sheen { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(2300px); } }
@keyframes gl-s { 0%, 100% { filter: brightness(1); } 30% { filter: brightness(1.22); } }

/* 6 · Schweben: Logo schwebt, Ringe treiben leicht gegeneinander */
[data-anim='schweben'] .logo { animation: float 7s ease-in-out var(--ad) infinite; }
[data-anim='schweben'] .ia { animation: drift-a 9s ease-in-out var(--ad) infinite; }
[data-anim='schweben'] .ib { animation: drift-b 11s ease-in-out var(--ad) infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-11px) rotate(1.4deg); }
  50% { transform: translateY(0) rotate(0); }
  75% { transform: translateY(7px) rotate(-1.4deg); }
}
@keyframes drift-a { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } }
@keyframes drift-b { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }

/* 7 · Kreisel: langsames Taumeln im Raum */
[data-anim='kreisel'] .logo { animation: wobble 10s ease-in-out var(--ad) infinite; }
@keyframes wobble {
  0%, 100% { transform: perspective(900px) rotateX(0) rotateY(0); }
  25% { transform: perspective(900px) rotateX(22deg) rotateY(-18deg); }
  50% { transform: perspective(900px) rotateX(0) rotateY(26deg); }
  75% { transform: perspective(900px) rotateX(-22deg) rotateY(-10deg); }
}

/* 8 · Hemmung: Ringe rücken ruckweise weiter (je 30°, gegenläufig) */
[data-anim='zahnrad'] .ia { animation: tick-a 15.6s linear var(--ad) infinite; }
[data-anim='zahnrad'] .ib { animation: tick-b 15.6s linear calc(var(--ad) + .65s) infinite; }
[data-anim='zahnrad'] .s-turn { animation: tick-s 1.3s ease-out var(--ad) infinite; }
@keyframes tick-s { 0%, 100% { filter: brightness(1); } 75% { filter: brightness(1); } 80% { filter: brightness(1.18); } }
@keyframes tick-a {
  0.000%, 6.000% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  8.333%, 14.333% { transform: rotate(30deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  16.667%, 22.667% { transform: rotate(60deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  25.000%, 31.000% { transform: rotate(90deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  33.333%, 39.333% { transform: rotate(120deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  41.667%, 47.667% { transform: rotate(150deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  50.000%, 56.000% { transform: rotate(180deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  58.333%, 64.333% { transform: rotate(210deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  66.667%, 72.667% { transform: rotate(240deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  75.000%, 81.000% { transform: rotate(270deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  83.333%, 89.333% { transform: rotate(300deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  91.667%, 97.667% { transform: rotate(330deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  100% { transform: rotate(360deg); }
}
@keyframes tick-b {
  0.000%, 6.000% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  8.333%, 14.333% { transform: rotate(-30deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  16.667%, 22.667% { transform: rotate(-60deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  25.000%, 31.000% { transform: rotate(-90deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  33.333%, 39.333% { transform: rotate(-120deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  41.667%, 47.667% { transform: rotate(-150deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  50.000%, 56.000% { transform: rotate(-180deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  58.333%, 64.333% { transform: rotate(-210deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  66.667%, 72.667% { transform: rotate(-240deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  75.000%, 81.000% { transform: rotate(-270deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  83.333%, 89.333% { transform: rotate(-300deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  91.667%, 97.667% { transform: rotate(-330deg); animation-timing-function: cubic-bezier(.3, 1.7, .55, 1); }
  100% { transform: rotate(-360deg); }
}

/* 9 · Atmen: Ringe weiten und verengen sich */
[data-anim='atmen'] .ia { animation: breathe-a 6s ease-in-out var(--ad) infinite; }
[data-anim='atmen'] .ib { animation: breathe-b 6s ease-in-out var(--ad) infinite; }
[data-anim='atmen'] .s-turn { animation: breathe-s 6s ease-in-out var(--ad) infinite; }
@keyframes breathe-a { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.05) rotate(-3deg); } }
@keyframes breathe-b { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.95) rotate(3deg); } }
@keyframes breathe-s { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.04); filter: brightness(1.2); } }

/* 10 · Aufladen: S verblasst, lädt sich von unten neu auf, kurzer Blitz */
[data-anim='aufladen'] .s-turn { animation: charge 10s var(--ad) infinite; }
[data-anim='aufladen'] .ia, [data-anim='aufladen'] .ib { animation: charge-ring 10s ease-out var(--ad) infinite; }
[data-anim='aufladen'] .sheen-bar { animation: charge-sheen 10s ease-in-out var(--ad) infinite; }
@keyframes charge {
  0% { clip-path: inset(0 0 0 0); opacity: 1; filter: brightness(1); }
  6% { clip-path: inset(0 0 0 0); opacity: .15; filter: brightness(1); }
  7% { clip-path: inset(100% 0 0 0); opacity: 1; filter: brightness(1.6); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  31% { clip-path: inset(0 0 0 0); opacity: 1; filter: brightness(1.7); }
  40%, 100% { clip-path: inset(0 0 0 0); opacity: 1; filter: brightness(1); }
}
@keyframes charge-ring { 0%, 30% { filter: brightness(1); } 33% { filter: brightness(1.45); } 45%, 100% { filter: brightness(1); } }
@keyframes charge-sheen { 0%, 31% { transform: translateX(0); } 46%, 100% { transform: translateX(2300px); } }

/* Keine (ruhig): keine Regeln, nur der Auftakt aus site.css */