/* Animierte Illustrationen.
   Teile einer SVG bekommen eine fx-Klasse (Bewegung bei Hover/Tippen) oder idle-Klasse (läuft dauerhaft, nur Hero und Deko).
   Auslöser ist der nächste Container mit .fx: :hover am Desktop, .play per JS beim Antippen und auf Touch-Geräten beim Reinscrollen.
   Wichtig: Ein Element mit transform-Attribut nie direkt animieren, CSS-transform würde es ersetzen. Dafür ein <g> drumherum legen.
   Verzögerung pro Element: style="--d:.3s". Eigener Drehpunkt: style="transform-origin:0 100%". */

:where(svg [class*="fx-"], svg [class*="idle-"]) { transform-box: fill-box; transform-origin: center; }
.fx { -webkit-tap-highlight-color: transparent; }
.fx.rs [class*="fx-"] { animation: none !important; }

/* Drehpunkte */
svg .o-b { transform-origin: 50% 100%; }
svg .o-t { transform-origin: 50% 0; }
svg .o-l { transform-origin: 0 50%; }
svg .o-r { transform-origin: 100% 50%; }
svg .o-bl { transform-origin: 0 100%; }
svg .o-br { transform-origin: 100% 100%; }
svg .o-tl { transform-origin: 0 0; }

/* Elemente, die erst bei der Animation auftauchen */
svg .fx-new { opacity: 0; }
/* Linien, die sich neu zeichnen: Pfad braucht pathLength="1" */
svg .fx-draw { stroke-dasharray: 1; }

.fx:is(:hover, .play) .fx-bob { animation: fxBob .7s ease-in-out var(--d, 0s) 2; }
.fx:is(:hover, .play) .fx-rock { animation: fxRock 1.3s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-sail { animation: fxSail 1.6s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-flutter { animation: fxFlutter .45s ease-in-out var(--d, 0s) 3; }
.fx:is(:hover, .play) .fx-blink { animation: fxBlink .32s ease-in-out var(--d, .25s) 2; }
.fx:is(:hover, .play) .fx-wag { animation: fxWag .28s ease-in-out var(--d, 0s) 5; }
.fx:is(:hover, .play) .fx-tilt { animation: fxTilt 1.1s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-nod { animation: fxNod .5s ease-in-out var(--d, 0s) 2; }
.fx:is(:hover, .play) .fx-pop { animation: fxPop .6s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s); }
.fx:is(:hover, .play) .fx-new { animation: fxPopIn .5s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s) both; }
.fx:is(:hover, .play) .fx-spin { animation: fxSpin 1.1s cubic-bezier(.45, 0, .2, 1.15) var(--d, 0s); }
.fx:is(:hover, .play) .fx-spin-back { animation: fxSpin 1.1s cubic-bezier(.45, 0, .2, 1.15) var(--d, 0s) reverse; }
.fx:is(:hover, .play) .fx-turn { animation: fxTurn 1.1s cubic-bezier(.45, 0, .2, 1.3) var(--d, 0s); }
.fx:is(:hover, .play) .fx-swing { animation: fxSwing 1.4s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-shake { animation: fxShake .5s ease-in-out var(--d, 0s) 2; }
.fx:is(:hover, .play) .fx-jump { animation: fxJump .75s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-rise { animation: fxRise 1.3s ease-out var(--d, 0s) both; }
.fx:is(:hover, .play) .fx-drift { animation: fxDrift 1.8s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-draw { animation: fxDraw .45s ease-out var(--d, 0s) both; }
.fx:is(:hover, .play) .fx-march { animation: fxMarch .9s linear var(--d, 0s) 2; }
.fx:is(:hover, .play) .fx-pulse { animation: fxPulse .45s ease-in-out var(--d, 0s) 3; }
.fx:is(:hover, .play) .fx-glow { animation: fxGlow .6s ease-in-out var(--d, 0s) 2; }
.fx:is(:hover, .play) .fx-grow-y { animation: fxGrowY .8s cubic-bezier(.3, 1.4, .5, 1) var(--d, 0s) both; }
.fx:is(:hover, .play) .fx-grow-x { animation: fxGrowX 1s cubic-bezier(.3, 1.2, .5, 1) var(--d, 0s) both; }
.fx:is(:hover, .play) .fx-flip { animation: fxFlip .9s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-page { animation: fxPage .8s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-rain { animation: fxRain .55s linear var(--d, 0s) 3; }
.fx:is(:hover, .play) .fx-flap { animation: fxFlap .24s ease-in-out var(--d, 0s) 5; }
.fx:is(:hover, .play) .fx-drop { animation: fxDrop .9s ease-out var(--d, 0s) both; }
.fx:is(:hover, .play) .fx-wave { animation: fxWave 1.6s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-arrow { animation: fxArrow .7s cubic-bezier(.5, 0, .4, 1.4) var(--d, 0s) both; }
.fx:is(:hover, .play) .fx-signal { animation: fxSignal .7s ease-out var(--d, 0s) 2 both; }
.fx:is(:hover, .play) .fx-slide { animation: fxSlide 1.5s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-press { animation: fxPress .35s ease-in-out var(--d, 0s) 2; }
.fx:is(:hover, .play) .fx-hop { animation: fxHop .45s ease-in-out var(--d, 0s) 2; }
.fx:is(:hover, .play) .fx-peek { animation: fxPeek 1.2s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-spark { animation: fxSpark .7s ease-out var(--d, 0s) 2 both; }
.fx:is(:hover, .play) .fx-fan-l { animation: fxFanL 1s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-fan-r { animation: fxFanR 1s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-beat { animation: fxBeat .8s ease-in-out var(--d, 0s) 2; }
.fx:is(:hover, .play) .fx-duck { animation: fxDuck 1s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-lean-r { animation: fxLeanR 1.2s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-lean-l { animation: fxLeanL 1.2s ease-in-out var(--d, 0s); }
.fx:is(:hover, .play) .fx-paw { animation: fxPaw .35s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s) both; }

@keyframes fxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes fxRock { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } 85% { transform: rotate(-1.5deg); } }
@keyframes fxSail { 0%, 100% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(10px, -9px) rotate(-5deg); } 60% { transform: translate(6px, -2px) rotate(3deg); } 85% { transform: translate(2px, 0) rotate(-1deg); } }
@keyframes fxFlutter { 0%, 100% { transform: skewY(0) scaleX(1); } 30% { transform: skewY(-9deg) scaleX(.86); } 70% { transform: skewY(6deg) scaleX(1.05); } }
@keyframes fxBlink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } }
@keyframes fxWag { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg); } 75% { transform: rotate(-12deg); } }
@keyframes fxTilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 65% { transform: rotate(6deg); } }
@keyframes fxNod { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(3px) rotate(4deg); } }
@keyframes fxPop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.3); } 70% { transform: scale(.92); } }
@keyframes fxPopIn { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fxSpin { to { transform: rotate(360deg); } }
@keyframes fxTurn { 0% { transform: rotate(0); } 70% { transform: rotate(200deg); } 100% { transform: rotate(180deg); } }
@keyframes fxSwing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } 88% { transform: rotate(-2deg); } }
@keyframes fxShake { 0%, 100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-3px) rotate(-4deg); } 40% { transform: translateX(3px) rotate(4deg); } 60% { transform: translateX(-2px) rotate(-2deg); } 80% { transform: translateX(2px) rotate(2deg); } }
@keyframes fxJump { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.08, .9); } 45% { transform: translateY(-12px) scale(.96, 1.05); } 75% { transform: translateY(0) scale(1.04, .96); } }
@keyframes fxRise { 0% { opacity: 0; transform: translateY(4px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px) scale(1.1); } }
@keyframes fxDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--x, 12px)); } }
@keyframes fxDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fxMarch { to { stroke-dashoffset: var(--m, -26); } }
@keyframes fxPulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes fxGlow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes fxGrowY { from { transform: scaleY(0); } }
@keyframes fxGrowX { from { transform: scaleX(.15); } }
@keyframes fxFlip { 0%, 100% { transform: scaleX(1); } 25% { transform: scaleX(0); } 50% { transform: scaleX(1); } 75% { transform: scaleX(0); } }
@keyframes fxPage { 0% { opacity: 1; transform: scaleX(1); } 85% { opacity: 1; transform: scaleX(-1); } 100% { opacity: 0; transform: scaleX(-1); } }
@keyframes fxRain { 0% { opacity: 0; transform: translate(2px, -8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-4px, 10px); } }
@keyframes fxFlap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.35); } }
@keyframes fxDrop { 0% { opacity: 0; transform: translateY(-26px); } 45% { opacity: 1; transform: translateY(0); } 62% { transform: translateY(-7px); } 80% { transform: translateY(0); } 90% { transform: translateY(-2px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fxWave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--x, -10px)); } }
@keyframes fxArrow { 0% { opacity: 0; transform: translate(16px, -16px); } 55% { opacity: 1; transform: translate(-1px, 1px); } 100% { opacity: 1; transform: translate(0, 0); } }
@keyframes fxSignal { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fxSlide { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(var(--x, 24px)); } }
@keyframes fxPress { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes fxHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--y, -6px)); } }
@keyframes fxPeek { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-10px) rotate(-6deg); } 65% { transform: translateY(-8px) rotate(6deg); } }
@keyframes fxSpark { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fxFanL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@keyframes fxFanR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes fxBeat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 28% { transform: scale(1.08); } }
@keyframes fxDuck { 0%, 100% { transform: translateY(0) scale(1); } 30%, 60% { transform: translateY(5px) scale(1.04, .92); } }
@keyframes fxLeanR { 0%, 100% { transform: translateX(0) rotate(0); } 40%, 60% { transform: translateX(8px) rotate(6deg); } }
@keyframes fxLeanL { 0%, 100% { transform: translateX(0) rotate(0); } 40%, 60% { transform: translateX(-8px) rotate(-6deg); } }
@keyframes fxPaw { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: scale(1); } }

/* Dauerschleifen: Hero-Szene, Hintergrund-Deko, Siegel */
.idle-bob { animation: fxBob 3.2s ease-in-out infinite; }
.idle-rock { animation: idleRock 4.6s ease-in-out infinite; }
.idle-flutter { animation: fxFlutter 1.6s ease-in-out infinite; }
.idle-drift { animation: fxDrift 9s ease-in-out infinite; }
.idle-drift-2 { --x: -10px; animation: fxDrift 12s ease-in-out -4s infinite; }
.idle-flap { animation: idleFlap 1.4s ease-in-out infinite; }
.idle-sun { animation: idleSun 6s ease-in-out infinite; }
.idle-wave { animation: fxWave 6s ease-in-out infinite; }
.idle-wave-2 { --x: 10px; animation: fxWave 7s ease-in-out -2s infinite; }
.idle-beam { animation: idleBeam 3s ease-in-out infinite; }
.idle-beam-2 { animation: idleBeam 3s ease-in-out -1.5s infinite; }
.idle-light { animation: idleLight 2.4s ease-in-out infinite; }
.idle-blink { animation: idleBlink 5s ease-in-out 1.2s infinite; }
.idle-wag { animation: idleWag 1.8s ease-in-out infinite; }
.idle-swing { animation: idleSwing 3.4s ease-in-out infinite; }
.idle-float { animation: idleFloat 4s ease-in-out infinite; }
.idle-spin-slow { animation: fxSpin 60s linear infinite; }
.deco > svg { animation: idleFloat 9s ease-in-out infinite; }
.deco.d2 > svg { animation-duration: 11s; animation-delay: -3s; }
.deco.d3 > svg { animation-duration: 10s; animation-delay: -6s; }
.deco.d4 > svg { animation-duration: 12s; animation-delay: -2s; }
.deco .idle-turn { animation: fxSpin 40s linear infinite; }
.deco .idle-sway { transform-origin: 50% 0; animation: idleSway 6s ease-in-out infinite; }
.deco .idle-wiggle { animation: idleSway 5s ease-in-out infinite; }

@keyframes idleRock { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes idleFlap { 0%, 100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(.55) translateY(-2px); } }
@keyframes idleSun { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes idleBeam { 0%, 100% { opacity: .25; transform: scaleX(.75); } 50% { opacity: 1; transform: scaleX(1.05); } }
@keyframes idleLight { 0%, 60%, 100% { opacity: 1; } 80% { opacity: .25; } }
@keyframes idleBlink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes idleWag { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(10deg); } 30% { transform: rotate(-6deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(0); } }
@keyframes idleSwing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes idleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes idleSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* Siegel: Zacken drehen sich langsam, beim Hover läuft die Naht rückwärts */
.seal-svg polygon { transform-box: fill-box; transform-origin: center; animation: fxSpin 80s linear infinite; }
.seal-svg circle { transform-box: fill-box; transform-origin: center; }
.seal.fx:is(:hover, .play) .seal-svg circle { animation: fxSpin 2.4s linear reverse; }

@media (prefers-reduced-motion: reduce) {
    svg [class*="fx-"], svg [class*="idle-"], .deco > svg, .seal-svg * { animation: none !important; }
}