/* Zlaté rybky — knihovna animací
 * 46 pohybů z osmi ručně kreslených rybek. Jen transform, opacity a clip-path.
 * Skládání: vnější prvek nese DRÁHU, vnitřní <img> nese TĚLO.
 *
 *   <div class="zr-track" style="animation:zTrackR 7s linear infinite">
 *     <img src="rybky/zelena/rybka-3.svg" style="animation:zBob 2.6s ease-in-out infinite">
 *   </div>
 *
 * Zrcadlení vždy přes scaleX na těle, aby rybka plavala hlavou dopředu.
 * Rybky 2–5 míří vpravo, rybky 1, 6, 7, 8 vlevo.
 */

@keyframes zTrackR{from{transform:translateX(-38%)}to{transform:translateX(106%)}}
@keyframes zTrackL{from{transform:translateX(106%)}to{transform:translateX(-38%)}}
@keyframes zEnterR{0%{transform:translateX(40%)}55%,90%{transform:translateX(0)}100%{transform:translateX(40%)}}
@keyframes zBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9%) rotate(3deg)}}
@keyframes zBobSoft{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-5%) rotate(1.5deg)}}
@keyframes zEight{0%{transform:translate(-24%,0)}25%{transform:translate(18%,17%)}50%{transform:translate(60%,0)}75%{transform:translate(18%,-17%)}100%{transform:translate(-24%,0)}}
@keyframes zWaveR{0%{transform:translate(-34%,0)}25%{transform:translate(1%,-16%)}50%{transform:translate(36%,0)}75%{transform:translate(70%,16%)}100%{transform:translate(105%,0)}}
@keyframes zIdle{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(5%,-8%) rotate(2deg)}}
@keyframes zUpstream{0%{transform:translateX(26%)}38%{transform:translateX(2%)}50%{transform:translateX(17%)}78%{transform:translateX(5%)}100%{transform:translateX(26%)}}
@keyframes zDash{0%,14%{transform:translateX(-34%)}86%,100%{transform:translateX(104%)}}
@keyframes zAway{0%{transform:translate(-14%,12%) scale(1);opacity:0}10%{opacity:1}70%{opacity:1}100%{transform:translate(52%,-10%) scale(.2);opacity:0}}
@keyframes zRiseLoop{0%{transform:translateY(72%);opacity:0}28%{transform:translateY(0);opacity:1}84%{transform:translateY(0);opacity:1}100%{transform:translateY(72%);opacity:0}}
@keyframes zFlipTurn{0%,42%{transform:scaleX(1)}48%{transform:scaleX(.08)}54%,92%{transform:scaleX(-1)}97%{transform:scaleX(.08)}100%{transform:scaleX(1)}}
@keyframes zSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes zRollY{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@keyframes zFlipX{from{transform:rotateX(0)}to{transform:rotateX(360deg)}}
@keyframes zRock{from{transform:rotate(-11deg)}to{transform:rotate(11deg)}}
@keyframes zDiveMove{from{transform:translate(-22%,-16%)}to{transform:translate(52%,28%)}}
@keyframes zDiveTilt{from{transform:rotate(-10deg)}to{transform:rotate(22deg)}}
@keyframes zMeetL{0%{transform:translateX(0)}38%{transform:translateX(16%)}56%{transform:translateX(16%)}94%,100%{transform:translateX(0)}}
@keyframes zMeetR{0%{transform:translateX(0)}38%{transform:translateX(-16%)}56%{transform:translateX(-16%)}94%,100%{transform:translateX(0)}}
@keyframes zFlipMid{0%,52%{transform:scaleX(1)}56%,94%{transform:scaleX(-1)}98%,100%{transform:scaleX(1)}}
@keyframes zKissL{0%{transform:translateX(0)}28%{transform:translateX(18%)}70%{transform:translateX(18%)}98%,100%{transform:translateX(0)}}
@keyframes zKissR{0%{transform:translateX(0)}28%{transform:translateX(-18%)}70%{transform:translateX(-18%)}98%,100%{transform:translateX(0)}}
@keyframes zFlipKiss{0%,68%{transform:scaleX(1)}72%,96%{transform:scaleX(-1)}99%,100%{transform:scaleX(1)}}
@keyframes zSplitR{0%{transform:translateX(0)}45%{transform:translateX(24%)}100%{transform:translateX(0)}}
@keyframes zSplitL{0%{transform:translateX(0)}45%{transform:translateX(-24%)}100%{transform:translateX(0)}}
@keyframes zBumpL{0%{transform:translateX(0)}30%{transform:translateX(19%)}36%{transform:translateX(11%)}44%{transform:translateX(15%)}100%{transform:translateX(0)}}
@keyframes zBumpR{0%{transform:translateX(0)}30%{transform:translateX(-19%)}36%{transform:translateX(-11%)}44%{transform:translateX(-15%)}100%{transform:translateX(0)}}
@keyframes zFlipBump{0%,34%{transform:scaleX(1)}38%,96%{transform:scaleX(-1)}99%,100%{transform:scaleX(1)}}
@keyframes zOrbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes zCounter{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes zScA{from{transform:translate(0,0)}to{transform:translate(-72%,-58%)}}
@keyframes zScB{from{transform:translate(0,0)}to{transform:translate(72%,-58%)}}
@keyframes zScC{from{transform:translate(0,0)}to{transform:translate(-72%,58%)}}
@keyframes zScD{from{transform:translate(0,0)}to{transform:translate(72%,58%)}}
@keyframes zTick{0%,100%{transform:translateX(0)}50%{transform:translateX(13%)}}
@keyframes zTock{0%,100%{transform:translateX(0)}50%{transform:translateX(-13%)}}
@keyframes zPopSpring{0%{transform:scale(.25);opacity:0}45%{transform:scale(1.14);opacity:1}62%{transform:scale(.96)}74%{transform:scale(1.02)}88%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes zSettle{0%{transform:translateY(-26%) rotate(-9deg);opacity:0}55%{transform:translateY(0) rotate(0);opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes zGrowIn{0%{transform:scale(.14);opacity:0}55%{transform:scale(1);opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes zRiseSettle{0%{transform:translateY(55%);opacity:0}40%{transform:translateY(0);opacity:1}55%{transform:translateY(-7%)}70%{transform:translateY(0)}90%{opacity:1}100%{opacity:0}}
@keyframes zWipe{0%{clip-path:inset(0 100% 0 0)}45%{clip-path:inset(0 0 0 0)}86%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes zTailWag{0%,100%{transform:rotate(0)}25%{transform:rotate(7deg)}75%{transform:rotate(-7deg)}}
@keyframes zStartle{0%{transform:translate(0,0) rotate(0) scale(1)}12%{transform:translate(-6%,-5%) rotate(-8deg) scale(1.07)}30%{transform:translate(5%,2%) rotate(5deg) scale(1.02)}60%,100%{transform:translate(0,0) rotate(0) scale(1)}}
@keyframes zPulse{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes zHopJoy{0%,100%{transform:translateY(0) scale(1,1)}15%{transform:translateY(0) scale(1.09,.91)}45%{transform:translateY(-26%) scale(.96,1.06) rotate(-6deg)}75%{transform:translateY(0) scale(1.05,.95)}}
@keyframes zShake{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-7%) rotate(-4deg)}35%{transform:translateX(6%) rotate(4deg)}55%{transform:translateX(-4%) rotate(-2deg)}75%{transform:translateX(3%) rotate(1deg)}}
@keyframes zBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes zBubbleRise{0%{transform:translateY(120%);opacity:0}10%{opacity:1}88%{opacity:1}100%{transform:translateY(-36%);opacity:0}}
@keyframes zBubbleSway{0%,100%{transform:translateX(-15%) rotate(-7deg)}50%{transform:translateX(15%) rotate(7deg)}}
@keyframes zBubbleSwaySoft{0%,100%{transform:translateX(-8%) rotate(-4deg)}50%{transform:translateX(8%) rotate(4deg)}}
@keyframes zBubbleGrow{0%{transform:scale(.5)}70%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes zBubblePop{0%{transform:translateY(112%) scale(.55);opacity:0}12%{opacity:1}70%{transform:translateY(4%) scale(1);opacity:1}82%{transform:translateY(0) scale(1.28);opacity:.5}90%,100%{transform:translateY(0) scale(1.55);opacity:0}}
@keyframes zBubbleDriftL{from{transform:translateX(0)}to{transform:translateX(-56%)}}
@keyframes zBubbleDriftR{from{transform:translateX(0)}to{transform:translateX(56%)}}
@media (prefers-reduced-motion: reduce){*{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important}}