/* CANIS · Verbbilder — Animationen
   Die SVG-Dateien enthalten nur Markup mit Klassen-Hooks (ein <style> im SVG
   überlebt das Speichern nicht). Dieses Stylesheet animiert sie, sobald das
   SVG INLINE im DOM steht — nicht über <img src>, denn externes CSS greift
   dort nicht.

   Verwendung in der App:
     import './verb-animations.css'
     <span class="vb idle" dangerouslySetInnerHTML={{__html: svgMarkup}} />
   Das Preset steht als Klasse am Wrapper ODER am <svg> selbst: idle | run | rest
*/

.vb svg, svg.vb { display: block; }

/* alle animierten Teile brauchen fill-box, damit % -Origins im SVG stimmen */
.vb [class] { transform-box: fill-box; }

/* ---------- Körper ---------- */
.vb .dog        { transform-origin: 50% 92%; animation: vb-breathe 3.4s ease-in-out infinite; }
.vb.run .dog    { animation: vb-trot .55s ease-in-out infinite; }
.vb.rest .dog   { animation: vb-breathe 3.9s ease-in-out infinite; }

.vb .tail       { transform-origin: 100% 60%; animation: vb-wag 2s ease-in-out infinite; }
.vb.run .tail   { animation: vb-wag .55s ease-in-out infinite; }

.vb .head       { transform-origin: 20% 90%; animation: vb-nod 3.2s ease-in-out infinite; }
.vb .ear        { transform-origin: 90% 10%; animation: vb-twitch 5.2s ease-in-out infinite; }
.vb.run .ear    { animation: vb-earflap .55s ease-in-out infinite; }

.vb.run .legF, .vb.run .legF2, .vb.run .legB, .vb.run .legB2 { transform-origin: 50% 6%; }
.vb.run .legF   { animation: vb-legf .55s ease-in-out infinite; }
.vb.run .legF2  { animation: vb-legf .55s ease-in-out infinite; animation-delay: -.275s; }
.vb.run .legB   { animation: vb-legb .55s ease-in-out infinite; }
.vb.run .legB2  { animation: vb-legb .55s ease-in-out infinite; animation-delay: -.275s; }

.vb .paw        { transform-origin: 100% 50%; animation: vb-reach 2.6s ease-in-out infinite; }

/* ---------- Richtungsglyph der Komposita ---------- */
.vb .arw        { animation: vb-arrow 1.5s ease-in-out infinite; }

/* ---------- Requisiten: Skalier-Puls ---------- */
.vb .pop, .vb .chk, .vb .hrt, .vb .h, .vb .h1, .vb .h2, .vb .st, .vb .ex, .vb .q,
.vb .q1, .vb .q2, .vb .q3, .vb .bulb, .vb .flag, .vb .crown, .vb .tag, .vb .no,
.vb .x, .vb .th, .vb .wr, .vb .pin, .vb .br, .vb .p1, .vb .p2, .vb .p3,
.vb .c1, .vb .c2, .vb .c3, .vb .b1, .vb .b2, .vb .b3, .vb .scr, .vb .grip,
.vb .sh2, .vb .r, .vb .pl, .vb .j, .vb .gear
                { transform-origin: 50% 50%; animation: vb-pulse 1.8s ease-in-out infinite; }
.vb .b2         { animation-delay: .2s; }
.vb .b3, .vb .q2, .vb .p2, .vb .c2 { animation-delay: .35s; }
.vb .q3, .vb .p3, .vb .c3 { animation-delay: .5s; }
.vb .gear       { animation: vb-spin 5s linear infinite; }

/* ---------- Requisiten: Opazitäts-Puls ---------- */
.vb .ray, .vb .spark, .vb .star, .vb .glow, .vb .fade, .vb .sm, .vb .far,
.vb .gl, .vb .w, .vb .w1, .vb .w2, .vb .w3, .vb .s1, .vb .s2, .vb .s3,
.vb .n, .vb .n1, .vb .n2, .vb .l1, .vb .l2, .vb .l3, .vb .hh, .vb .hh2,
.vb .z1, .vb .z2, .vb .cf, .vb .cf2, .vb .cf3, .vb .zz, .vb .swt, .vb .tear,
.vb .tear2, .vb .drop, .vb .crumb, .vb .ripple, .vb .bub, .vb .fl, .vb .dot
                { animation: vb-blink 2.2s ease-in-out infinite; }
.vb .w2, .vb .s2, .vb .n2, .vb .l2, .vb .z2, .vb .cf2, .vb .tear2, .vb .hh2 { animation-delay: .3s; }
.vb .w3, .vb .s3, .vb .l3, .vb .cf3 { animation-delay: .6s; }

/* ---------- Requisiten: Schub / Gleiten ---------- */
.vb .obj, .vb .bx, .vb .gift, .vb .coin, .vb .sh, .vb .grab, .vb .tray,
.vb .bowl, .vb .pt, .vb .cursor, .vb .stick, .vb .rope, .vb .a, .vb .b,
.vb .gone, .vb .gone1, .vb .gone2, .vb .lid, .vb .sc, .vb .clk,
.vb .qu, .vb .rub, .vb .sw, .vb .ax, .vb .gv, .vb .hm, .vb .sp, .vb .pr,
.vb .f, .vb .gate, .vb .ch, .vb .speed, .vb .spd, .vb .wing, .vb .eyeG
                { animation: vb-shift 1.9s ease-in-out infinite; }
.vb .speed, .vb .spd { animation: vb-streak .55s linear infinite; }
.vb .wing       { transform-origin: 80% 90%; animation: vb-flap .45s ease-in-out infinite; }
.vb .sw, .vb .ax, .vb .gv, .vb .hm { transform-origin: 70% 90%; animation: vb-swing 1.2s ease-in-out infinite; }
.vb .sp, .vb .clk { transform-origin: 50% 50%; animation: vb-spin 2.4s linear infinite; }
.vb .gone, .vb .gone1, .vb .gone2 { animation: vb-vanish 3.2s ease-in-out infinite; }
.vb .gone2      { animation-delay: 1s; }
.vb .a          { animation: vb-partL 2.2s ease-in-out infinite; }
.vb .b          { animation: vb-partR 2.2s ease-in-out infinite; }
.vb .gate       { transform-origin: 8% 20%; animation: vb-gate 2.6s ease-in-out infinite; }
.vb .eyeG       { transform-origin: 50% 50%; animation: vb-lid 3.4s ease-in-out infinite; }

/* ---------- Keyframes ---------- */
@keyframes vb-breathe { 0%,100%{transform:scaleY(1)}   50%{transform:scaleY(1.025)} }
@keyframes vb-trot    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes vb-wag     { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(15deg)} }
@keyframes vb-nod     { 0%,100%{transform:rotate(0)}     50%{transform:rotate(-4deg)} }
@keyframes vb-twitch  { 0%,84%,100%{transform:rotate(0)} 90%{transform:rotate(-13deg)} 95%{transform:rotate(5deg)} }
@keyframes vb-earflap { 0%,100%{transform:rotate(0)}     50%{transform:rotate(-22deg)} }
@keyframes vb-legf    { 0%,100%{transform:rotate(20deg)} 50%{transform:rotate(-18deg)} }
@keyframes vb-legb    { 0%,100%{transform:rotate(-18deg)}50%{transform:rotate(20deg)} }
@keyframes vb-reach   { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-6px)} }
@keyframes vb-arrow   { 0%,100%{opacity:.45;transform:translateX(0)} 50%{opacity:1;transform:translateX(5px)} }
@keyframes vb-pulse   { 0%,100%{transform:scale(1)}      50%{transform:scale(1.13)} }
@keyframes vb-blink   { 0%,100%{opacity:.25}             50%{opacity:1} }
@keyframes vb-shift   { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-11px)} }
@keyframes vb-streak  { 0%{opacity:.9;transform:translateX(0)} 100%{opacity:0;transform:translateX(-24px)} }
@keyframes vb-flap    { 0%,100%{transform:rotate(-16deg) scaleY(1)} 50%{transform:rotate(18deg) scaleY(.82)} }
@keyframes vb-swing   { 0%,100%{transform:rotate(-26deg)} 55%{transform:rotate(8deg)} }
@keyframes vb-spin    { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes vb-vanish  { 0%{opacity:.34;transform:translateX(0)} 70%,100%{opacity:0;transform:translateX(-26px)} }
@keyframes vb-partL   { 0%,38%{transform:translateX(0)} 72%,100%{transform:translateX(-13px)} }
@keyframes vb-partR   { 0%,38%{transform:translateX(0)} 72%,100%{transform:translateX(13px)} }
@keyframes vb-gate    { 0%,35%{transform:rotate(0)} 70%,100%{transform:rotate(-60deg)} }

/* ---------- semantisch eindeutige Hooks ----------
   .a/.b heißen "geht auseinander" (frangere, rumpere, dividere, solvere).
   Was zusammenkommt, sich tauscht, wächst oder biegt, braucht eigene Namen. */
.vb .close-l  { animation: vb-closeL 2.2s ease-in-out infinite; }
.vb .close-r  { animation: vb-closeR 2.2s ease-in-out infinite; }
.vb .fill     { transform-origin: left center; animation: vb-fill 2.6s ease-in-out infinite; }
.vb .drain    { transform-origin: left center; animation: vb-drain 2.6s ease-in-out infinite; }
.vb .swap-a   { animation: vb-swapA 2.8s ease-in-out infinite; }
.vb .swap-b   { animation: vb-swapB 2.8s ease-in-out infinite; }
.vb .grow     { transform-origin: 50% 100%; animation: vb-grow 2.6s ease-in-out infinite; }
.vb .grow2    { transform-origin: 50% 100%; animation: vb-grow 2.6s ease-in-out infinite; animation-delay: .3s; }
.vb .grow3    { transform-origin: 50% 100%; animation: vb-grow 2.6s ease-in-out infinite; animation-delay: .6s; }
.vb .bend     { transform-origin: 8% 90%;   animation: vb-bend 2.4s ease-in-out infinite; }

@keyframes vb-closeL { 0%,100%{transform:translateX(-13px)} 55%{transform:translateX(0)} }
@keyframes vb-closeR { 0%,100%{transform:translateX(13px)}  55%{transform:translateX(0)} }
@keyframes vb-fill   { 0%{transform:scaleX(.06)} 70%,100%{transform:scaleX(1)} }
@keyframes vb-drain  { 0%{transform:scaleX(1)}   70%,100%{transform:scaleX(.12)} }
@keyframes vb-swapA  { 0%,40%{transform:translateX(0)} 70%,100%{transform:translateX(30px)} }
@keyframes vb-swapB  { 0%,40%{transform:translateX(0)} 70%,100%{transform:translateX(-30px)} }
@keyframes vb-grow   { 0%{transform:scaleY(.35)} 65%,100%{transform:scaleY(1)} }
@keyframes vb-bend   { 0%,100%{transform:skewX(0)} 50%{transform:skewX(-13deg)} }
@keyframes vb-lid     { 0%,88%,100%{transform:scaleY(1)} 93%{transform:scaleY(.12)} }

/* ---------- Preset "howl": der heulende Hund der Lob-Einblendung ----------
   Seitenansicht (class="vb howl side"): Der Kopf legt sich in den Nacken, der
   Kiefer geht auf, die Kehle bebt, und drei Schallringe laufen vom Fang weg.
   Ein Zyklus dauert 1,4 s — kurz genug, dass die Einblendung ihn ganz zeigt.  */
.vb.howl .head   { transform-origin: 0% 100%; animation: vb-howl-head 1.4s ease-in-out infinite; }
.vb.howl .jaw    { transform-origin: 0% 15%;  animation: vb-howl-jaw 1.4s ease-in-out infinite; }
.vb.howl .throat { transform-origin: 50% 50%; animation: vb-howl-throat 1.4s ease-in-out infinite; }
.vb.howl .chest  { transform-origin: 50% 100%; animation: vb-howl-chest 1.4s ease-in-out infinite; }
.vb.howl .tail   { transform-origin: 100% 60%; animation: vb-wag .7s ease-in-out infinite; }
.vb.howl .earF   { transform-origin: 0% 100%; animation: vb-howl-ear 1.4s ease-in-out infinite; }
.vb.howl .earS   { transform-origin: 100% 0%; animation: vb-howl-ear 1.4s ease-in-out infinite; }

/* Die Ringe sitzen schon am Fang; sie werden von dort aus größer und
   verblassen — versetzt, damit der Ton nach außen zu wandern scheint. */
.vb.howl .hring1,
.vb.howl .hring2,
.vb.howl .hring3 { transform-origin: 0% 50%; opacity: 0; animation: vb-howl-ring 1.4s ease-out infinite; }
.vb.howl .hring2 { animation-delay: .16s; }
.vb.howl .hring3 { animation-delay: .32s; }

@keyframes vb-howl-head   { 0%,100%{transform:rotate(0)}       28%,72%{transform:rotate(-8deg)} }
@keyframes vb-howl-jaw    { 0%,100%{transform:rotate(0)}       28%,72%{transform:rotate(10deg)} }
@keyframes vb-howl-throat { 0%,100%{transform:scale(1)}        45%{transform:scale(1.09)} }
@keyframes vb-howl-chest  { 0%,100%{transform:scaleY(1)}       35%{transform:scaleY(1.04)} }
@keyframes vb-howl-ear    { 0%,100%{transform:rotate(0)}       30%,70%{transform:rotate(-5deg)} }
@keyframes vb-howl-ring   { 0%{transform:scale(.35);opacity:0} 30%{opacity:.85} 100%{transform:scale(1.3);opacity:0} }

@media (prefers-reduced-motion: reduce) {
  .vb *, svg.vb * { animation: none !important; }
}