/* ====================================================================
   Rufus als Gladiator — die zwei Zustände der Arena
   ====================================================================

   Eigene Datei und nicht in verb-animations.css: Die Klassen hier heißen
   .rf-* und .rg-*, die dortigen .vb-*; sie treiben verschiedene Bilder und
   haben nichts gemeinsam. Zusammengelegt wüchse eine Datei, die schon zu
   100 Keyframes gekommen ist, um weitere 60 — und jede Seite lädt sie.

   Beide Zeichnungen müssen INLINE im DOM stehen, damit diese Regeln sie
   erreichen; ein <img src="…svg"> ist für externes CSS unerreichbar. Dafür
   gibt es Exercises.animateArt (exercises.js), das die Datei holt und als
   innerHTML setzt — dieselbe Mechanik wie bei den Verbbildern.

   .rg — der Hieb (rufus-gladiator.svg, 2,4 s): Ausholen, Hieb, Block, Stoß.
         Läuft beim ersten Betreten der Arena, zusammen mit dem Schwertklang.
   .rf — das Warten von vorn (rufus-gladiator-front.svg, 4 s): Atmen,
         Blinzeln, Ohren, Schwanzwedeln. Das ist der Dauerzustand — an der
         Station am Ende der Via und bei jedem späteren Betreten.
   .rs — das Schnüffeln (rufus-schnueffeln.svg, 4 s): Boden absuchen, kurz
         aufschauen. Läuft, während der Server ein Foto der Vokabelliste liest —
         statt eines Kreisels. Dieselbe Datei wird mitgepflegt, weil sie
         dieselbe Mechanik braucht (inline im DOM) und dieselben Hunde zeigt.

   Beide schalten sich bei prefers-reduced-motion ab, wie es die Datei am
   Ende jeweils selbst sagt.                                             */

/* ---------- Rufus Gladiator (gladiator/rufus-gladiator.svg) — 2,4 s: Ausholen, Hieb, Block, Stoß ---------- */
.rg *{transform-box:view-box}
.rg-up,.rg-sw,.rg-sh,.rg-hd,.rg-cr,.rg-lg,.rg-shd,.rg-ey,.rg-sws,.rg-gl,.rg-du,.rg-mo,.rg-mc{animation-duration:2.4s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.25,1)}
.rg-up{transform-origin:180px 290px;animation-name:rgUp}
.rg-sw{transform-origin:212px 206px;animation-name:rgSw}
.rg-sh{transform-origin:200px 194px;animation-name:rgSh}
.rg-hd{transform-origin:220px 160px;animation-name:rgHd}
.rg-cr{transform-origin:232px 78px;animation-name:rgCr}
.rg-tl{transform-origin:154px 274px;animation:rgTl .4s ease-in-out infinite alternate}
.rg-lg{transform-origin:190px 292px;animation-name:rgLg}
.rg-shd{transform-origin:185px 356px;animation-name:rgShd}
.rg-ey{transform-origin:244px 126px;animation-name:rgEy}
.rg-sws{animation-name:rgSws;opacity:0}
.rg-gl{transform-origin:342px 206px;animation-name:rgGl;opacity:0}
.rg-du{animation-name:rgDu;opacity:0}
.rg-mo{animation-name:rgMo;opacity:0}
.rg-mc{animation-name:rgMc}
@keyframes rgUp{0%,100%{transform:translateY(0) rotate(0)}8%{transform:translateY(-6px)}15%{transform:rotate(-6deg)}28%{transform:translate(4px,2px) rotate(7deg)}38%{transform:rotate(4deg)}46%{transform:translateY(-8px) rotate(0)}54%{transform:translateY(0)}60%{transform:translate(-6px,0) rotate(-4deg)}70%{transform:translate(12px,3px) rotate(8deg)}80%{transform:rotate(2deg)}90%{transform:translateY(-5px)}}
@keyframes rgSw{0%,100%{transform:rotate(8deg)}15%{transform:rotate(-95deg)}28%{transform:rotate(40deg)}38%{transform:rotate(34deg)}50%{transform:rotate(18deg)}60%{transform:translate(-16px,0) rotate(4deg)}70%{transform:translate(22px,0) rotate(-4deg)}80%{transform:rotate(8deg)}}
@keyframes rgSh{0%,100%{transform:none}15%{transform:translate(-6px,4px) rotate(-8deg)}28%{transform:rotate(6deg)}42%,52%{transform:translate(10px,-34px) rotate(-14deg)}60%{transform:translate(-4px,0)}70%{transform:translate(-10px,6px) rotate(10deg)}85%{transform:none}}
@keyframes rgHd{0%,100%{transform:none}15%{transform:rotate(-6deg)}28%{transform:rotate(6deg)}50%{transform:rotate(-2deg)}70%{transform:rotate(5deg)}85%{transform:none}}
@keyframes rgCr{0%,100%{transform:none}18%{transform:rotate(8deg)}32%{transform:rotate(-10deg)}45%{transform:rotate(4deg)}72%{transform:rotate(-8deg)}85%{transform:rotate(4deg)}}
@keyframes rgTl{from{transform:rotate(-10deg)}to{transform:rotate(14deg)}}
@keyframes rgLg{0%,50%,100%{transform:none}60%{transform:translate(-4px,0)}70%,76%{transform:translate(18px,0) rotate(-12deg)}88%{transform:none}}
@keyframes rgShd{0%,100%{transform:scaleX(1)}28%{transform:scaleX(1.08)}70%{transform:translateX(10px) scaleX(1.14)}}
@keyframes rgEy{0%,40%,46%,88%,94%,100%{transform:scaleY(1)}43%,91%{transform:scaleY(.1)}}
@keyframes rgSws{0%,22%{opacity:0}26%{opacity:.9}36%,100%{opacity:0}}
@keyframes rgGl{0%,66%{opacity:0;transform:scale(.3)}71%{opacity:1;transform:scale(1.2) rotate(20deg)}80%,100%{opacity:0;transform:scale(.5)}}
@keyframes rgDu{0%,26%{opacity:0;transform:translateY(0)}30%{opacity:.7}40%{opacity:0;transform:translateY(-14px)}66%{opacity:0;transform:translateY(0)}71%{opacity:.7}82%,100%{opacity:0;transform:translateY(-14px)}}
@keyframes rgMo{0%,22%{opacity:0}25%,36%{opacity:1}39%,64%{opacity:0}67%,78%{opacity:1}81%,100%{opacity:0}}
@keyframes rgMc{0%,22%{opacity:1}25%,36%{opacity:0}39%,64%{opacity:1}67%,78%{opacity:0}81%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.rg *{animation:none!important}}

/* ---------- Rufus Gladiator, Frontansicht wartend (gladiator/rufus-gladiator-front.svg) — 4 s ---------- */
.rf *{transform-box:view-box}
.rf-body{transform-origin:200px 348px;animation:rfBr 2s ease-in-out infinite alternate}
.rf-shd{transform-origin:200px 354px;animation:rfSd 2s ease-in-out infinite alternate}
.rf-hd{transform-origin:200px 238px;animation:rfHd 4s ease-in-out infinite}
.rf-ey{transform-origin:200px 172px;animation:rfBl 4s infinite}
.rf-pu{animation:rfPu 4s ease-in-out infinite}
.rf-eL{transform-origin:128px 150px;animation:rfEL 4s ease-in-out infinite}
.rf-eR{transform-origin:272px 150px;animation:rfER 4s ease-in-out infinite}
.rf-cr{transform-origin:200px 74px;animation:rfCr 2s ease-in-out infinite alternate}
.rf-tl{transform-origin:124px 326px;animation:rfTl .5s ease-in-out infinite alternate}
.rf-sd{transform-origin:104px 350px;animation:rfSw 4s ease-in-out infinite}
.rf-sh{transform-origin:304px 350px;animation:rfSh 4s ease-in-out infinite}
.rf-tg{transform-origin:200px 224px;animation:rfTg 4s ease-in-out infinite}
@keyframes rfBr{from{transform:scale(1,1)}to{transform:scale(1.012,1.025)}}
@keyframes rfSd{from{transform:scaleX(1)}to{transform:scaleX(1.03)}}
@keyframes rfHd{0%,38%,80%,100%{transform:translateY(0) rotate(0)}48%,66%{transform:translateY(-2px) rotate(-7deg)}}
@keyframes rfBl{0%,26%,32%,84%,90%,100%{transform:scaleY(1)}29%,87%{transform:scaleY(.1)}}
@keyframes rfPu{0%,10%,34%,100%{transform:translate(0,0)}16%,28%{transform:translate(5px,0)}50%,66%{transform:translate(-3px,-2px)}}
@keyframes rfEL{0%,38%,80%,100%{transform:rotate(0)}48%,66%{transform:rotate(6deg)}92%{transform:rotate(-8deg)}96%{transform:rotate(2deg)}}
@keyframes rfER{0%,38%,80%,100%{transform:rotate(0)}48%,66%{transform:rotate(-10deg)}}
@keyframes rfCr{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes rfTl{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
@keyframes rfSw{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}50%{transform:rotate(1deg)}75%{transform:rotate(-2deg)}}
@keyframes rfSh{0%,100%{transform:rotate(0)}50%{transform:rotate(1.5deg)}}
@keyframes rfTg{0%,44%,72%,100%{transform:scaleY(0)}50%,66%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.rf *{animation:none!important}}

/* ---------- Rufus schnüffelt (schnueffeln/rufus-schnueffeln.svg) — 4 s: Boden absuchen, kurz aufschauen ---------- */
.rs *{transform-box:view-box}
.rs-dog{transform-origin:70px 168px;animation:rsDog 4s ease-in-out infinite}
.rs-hd{transform-origin:132px 102px;animation:rsHd 4s ease-in-out infinite}
.rs-ns{transform-origin:179px 91px;animation:rsNs .32s ease-in-out infinite alternate}
.rs-ear{transform-origin:141px 70px;animation:rsEar 4s ease-in-out infinite}
.rs-tl{transform-origin:58px 104px;animation:rsTl .45s ease-in-out infinite alternate}
.rs-ey{transform-origin:152px 80px;animation:rsEy 4s infinite}
.rs-lf{transform-origin:130px 136px;animation:rsStep 4s ease-in-out infinite}
.rs-lb2{transform-origin:80px 136px;animation:rsStep 4s ease-in-out infinite;animation-delay:-2s}
.rs-lf2{transform-origin:118px 134px;animation:rsStep 4s ease-in-out infinite;animation-delay:-1s}
.rs-lb{transform-origin:68px 134px;animation:rsStep 4s ease-in-out infinite;animation-delay:-3s}
.rs-shd{transform-origin:96px 172px;animation:rsShd 4s ease-in-out infinite}
.rs-sc1,.rs-sc2,.rs-sc3{opacity:0;animation:rsSc 2s ease-out infinite}
.rs-sc2{animation-delay:-.7s}.rs-sc3{animation-delay:-1.4s}
.rs-pf{opacity:0;transform-origin:180px 150px;animation:rsPf 4s ease-out infinite}
.rs-q{opacity:0;transform-origin:176px 50px;animation:rsQ 4s ease-in-out infinite}
@keyframes rsDog{0%,100%{transform:translateX(0) rotate(7deg)}25%{transform:translateX(3px) rotate(8deg)}50%{transform:translateX(0) rotate(6deg)}58%,72%{transform:translateX(-1px) rotate(1deg)}82%{transform:translateX(2px) rotate(7deg)}}
@keyframes rsHd{0%,100%{transform:translate(4px,14px) rotate(40deg)}14%{transform:translate(7px,17px) rotate(47deg)}28%{transform:translate(2px,12px) rotate(37deg)}42%{transform:translate(8px,18px) rotate(50deg)}55%{transform:translate(3px,13px) rotate(42deg)}62%,72%{transform:translate(0,0) rotate(-4deg)}80%{transform:translate(6px,16px) rotate(46deg)}}
@keyframes rsNs{from{transform:scale(1,1)}to{transform:scale(1.16,.84)}}
@keyframes rsEar{0%,55%,80%,100%{transform:rotate(-14deg)}62%,72%{transform:rotate(4deg)}66%{transform:rotate(-6deg)}}
@keyframes rsTl{from{transform:rotate(-8deg)}to{transform:rotate(16deg)}}
@keyframes rsEy{0%,60%,100%{transform:scaleY(.8)}64%,74%{transform:scaleY(1.1)}68%{transform:scaleY(.1)}78%{transform:scaleY(.8)}}
@keyframes rsStep{0%,20%,55%,100%{transform:rotate(0)}8%{transform:rotate(-12deg)}14%{transform:rotate(4deg)}}
@keyframes rsShd{0%,100%{transform:translateX(0)}25%{transform:translateX(3px)}}
@keyframes rsSc{0%{opacity:0;transform:translate(0,0)}25%{opacity:.9}100%{opacity:0;transform:translate(-8px,-14px)}}
@keyframes rsPf{0%,4%{opacity:0;transform:scale(.4)}8%{opacity:.9;transform:scale(1)}14%{opacity:0;transform:scale(1.4)}18%{opacity:0;transform:scale(.4)}22%{opacity:.9;transform:scale(1)}28%,40%{opacity:0;transform:scale(1.4)}44%{opacity:.9;transform:scale(1)}50%,100%{opacity:0;transform:scale(1.4)}}
@keyframes rsQ{0%,60%{opacity:0;transform:translateY(6px) scale(.6)}64%,72%{opacity:1;transform:translateY(0) scale(1)}78%,100%{opacity:0;transform:translateY(-6px) scale(.8)}}
@media (prefers-reduced-motion:reduce){.rs *{animation:none!important}}