/* ---------- maskot A „Kruhy“: plochý geometrický rak (shared/logo.svg) ----------
   .rak-live  idle loop (hero): bob, blink, antenna sway, a claw snip now and then, bubbles
   Tap reactions on a parent, one class at a time, always happy (landing/index.html picks them at random, no repeats until all were shown):
   .rak-hi 1.6 s Hurá · .rak-ahoj 1.8 s wave · .rak-lubim 2.2 s hearts · .rak-tanec 2.2 s dance · .rak-otocka 1.5 s spin in the air
   .rak-hihi 1.7 s giggle · .rak-bubliny 2.6 s blows bubbles · .rak-zmurk 1.4 s wink
   .a-home    nav link: blink only, short wave on hover/focus
   Colours come from --rak-c (body) with the light value as fallback; only transform and opacity animate. */
.rak { display: block; width: 100%; height: auto; overflow: visible; }
.rak * { transform-box: view-box; }
.rak .rk-c { fill: var(--rak-c, #2F5BEA); }
.rak .rk-cs { stroke: var(--rak-c, #2F5BEA); }
.rak .rak-fx { stroke: var(--rak-bub, #7E9BFF); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rak-c: #6E8FFF; --rak-bub: #A9BCFF; } }
:root[data-theme="dark"] { --rak-c: #6E8FFF; --rak-bub: #A9BCFF; }

.rak-hop, .rak-bob { transform-origin: 60px 118px; }
.rak-spin { transform-origin: 60px 66px; }
.rak-side { transform-origin: 44px 62px; }
.rak-claw { transform-origin: 0 0; }
.rak-pin { transform-origin: 1px -14px; }
.rak-ant-l { transform-origin: 54px 38px; }
.rak-ant-r { transform-origin: 66px 38px; }
.rak-tail { transform-origin: 60px 80px; }
.rak-eye, .rak-bub, .rak-star, .rak-cheek, .rak-float, .rak-blow, .rak-spark { transform-box: fill-box; transform-origin: center; }
.rak-eye { animation: rak-a-blink 6.5s infinite; }
.rak-live .rak-bob { animation: rak-a-bob 3.4s ease-in-out infinite; }
.rak-live .rak-ant-l { animation: rak-a-ant 3s ease-in-out infinite; }
.rak-live .rak-ant-r { animation: rak-a-ant 3.6s ease-in-out infinite -1.4s; }
.rak-live .rak-l { animation: rak-a-sway 4.4s ease-in-out infinite; }
.rak-live .rak-r { animation: rak-a-sway 5.2s ease-in-out infinite -2s; }
.rak-live .rak-l .rak-pin { animation: rak-a-snip 5.6s ease-in-out infinite -1s; }
.rak-live .rak-r .rak-pin { animation: rak-a-snip 4.6s ease-in-out infinite -3.3s; }
.rak-live .rak-tail { animation: rak-a-tail 3.4s ease-in-out infinite -.5s; }
.rak-live .rak-look { animation: rak-a-look 9s ease-in-out infinite 1.5s; }
.rak-live .rak-bub { animation: rak-a-bubble 7s ease-out infinite 1.5s; }
.rak-live .rak-bub2 { animation-delay: 4.2s; }
.rak-live .rak-bub3 { animation-delay: 2.3s; }

.a-home:hover .rak-l, .a-home:focus-visible .rak-l,
.a-home:hover .rak-r, .a-home:focus-visible .rak-r { animation: rak-a-clap .4s ease-in-out 2; }
.a-home:hover .rak-pin, .a-home:focus-visible .rak-pin { animation: rak-a-snap .3s ease-in-out 2 .15s; }

/* 1 Hurá (today's .rak-hi) */
.rak-hi .rak-hop { animation: rak-a-jump .9s cubic-bezier(.3, .7, .4, 1) 1; }
.rak-hi .rak-l, .rak-hi .rak-r { animation: rak-a-clap .32s ease-in-out 4 !important; }
.rak-hi .rak-pin { animation: rak-a-snap .32s ease-in-out 4 !important; }
.rak-hi .rak-star { animation: rak-a-star 1.3s ease-out 1 .15s both; }
.rak-hi .rak-star2 { animation-delay: .3s; }
.rak-hi .rak-star3 { animation-delay: .42s; }
.rak-hi .rak-smile { animation: rak-x-off 1.6s both; }
.rak-hi .rak-grin { animation: rak-x-on 1.6s both; }

/* 2 Ahoj: waves one claw */
.rak-ahoj .rak-spin { --tilt: -5deg; animation: rak-x-tilt 1.8s ease-in-out both; }
.rak-ahoj .rak-l { animation: rak-x-wave 1.8s ease-in-out both !important; }
.rak-ahoj .rak-l .rak-pin { animation: rak-a-snap .3s ease-in-out 5 .25s !important; }
.rak-ahoj .rak-ant-l, .rak-ahoj .rak-ant-r { animation: rak-x-antjoy .36s ease-in-out 5 !important; }
.rak-ahoj .rak-look { animation: none !important; }
.rak-ahoj .rak-smile { animation: rak-x-off 1.8s both; }
.rak-ahoj .rak-grin { animation: rak-x-on 1.8s both; }

/* 3 Srdiečka: happy eyes, blush, hearts */
.rak-lubim .rak-spin { animation: rak-x-sway 2.2s ease-in-out both; }
.rak-lubim .rak-l, .rak-lubim .rak-r { animation: rak-x-raise 2.2s ease-in-out both !important; }
.rak-lubim .rak-pin { animation: rak-x-pinch 2.2s ease-in-out both !important; }
.rak-lubim .rak-look { animation: rak-x-off 2.2s both !important; }
.rak-lubim .rak-hap { animation: rak-x-on 2.2s both; }
.rak-lubim .rak-cheek { animation: rak-x-blush 2.2s ease-in-out both; }
.rak-lubim .rak-heart { animation: rak-x-float 1.5s ease-out both .15s; }
.rak-lubim .rak-heart2 { animation-delay: .45s; }
.rak-lubim .rak-heart3 { animation-delay: .75s; }

/* 4 Tanček: side to side, claws take turns, notes */
.rak-tanec .rak-spin { animation: rak-x-dance 2.2s ease-in-out both; }
.rak-tanec .rak-l { animation: rak-x-armup .55s ease-in-out 4 !important; }
.rak-tanec .rak-r { animation: rak-x-armup .55s ease-in-out 4 .275s !important; }
.rak-tanec .rak-tail { animation: rak-a-tail .275s ease-in-out 8 !important; }
.rak-tanec .rak-ant-l, .rak-tanec .rak-ant-r { animation: rak-x-antjoy .55s ease-in-out 4 !important; }
.rak-tanec .rak-smile { animation: rak-x-off 2.2s both; }
.rak-tanec .rak-grin { animation: rak-x-on 2.2s both; }
.rak-tanec .rak-note { animation: rak-x-float 1.4s ease-out both .1s; }
.rak-tanec .rak-note2 { animation-delay: .6s; }
.rak-tanec .rak-note3 { animation-delay: 1.05s; }

/* 5 Otočka: jumps and turns once in the air */
.rak-otocka .rak-hop { animation: rak-x-launch 1.5s cubic-bezier(.3, .7, .4, 1) both; }
.rak-otocka .rak-spin { animation: rak-x-flip 1.5s ease-in-out both; }
.rak-otocka .rak-l, .rak-otocka .rak-r { animation: rak-x-raise 1.5s ease-in-out both !important; }
.rak-otocka .rak-smile { animation: rak-x-off 1.5s both; }
.rak-otocka .rak-grin { animation: rak-x-on 1.5s both; }
.rak-otocka .rak-star { animation: rak-a-star 1s ease-out 1 .95s both; }
.rak-otocka .rak-star2 { animation-delay: 1.05s; }
.rak-otocka .rak-star3 { animation-delay: 1.1s; }

/* 6 Hihi: the tap tickles */
.rak-hihi .rak-spin { animation: rak-x-giggle .16s ease-in-out 10 alternate; }
.rak-hihi .rak-l, .rak-hihi .rak-r { animation: rak-a-clap .2s ease-in-out 8 !important; }
.rak-hihi .rak-pin { animation: rak-a-snap .2s ease-in-out 8 !important; }
.rak-hihi .rak-look { animation: rak-x-off 1.7s both !important; }
.rak-hihi .rak-hap { animation: rak-x-on 1.7s both; }
.rak-hihi .rak-cheek { animation: rak-x-blush 1.7s ease-in-out both; }
.rak-hihi .rak-smile { animation: rak-x-off 1.7s both; }
.rak-hihi .rak-grin { animation: rak-x-on 1.7s both; }
.rak-hihi .rak-hihi-t { animation: rak-x-float 1s ease-out both .1s; }
.rak-hihi .rak-hihi-t2 { animation-delay: .55s; }

/* 7 Bublinky: looks up and blows a row of bubbles */
.rak-bubliny .rak-hop { animation: rak-x-hop 2.6s ease-in-out both; }
.rak-bubliny .rak-look { animation: rak-x-lookup 2.6s ease-in-out both !important; }
.rak-bubliny .rak-smile { animation: rak-x-off 2.6s both; }
.rak-bubliny .rak-oh { animation: rak-x-oh 2.6s both; }
.rak-bubliny .rak-cheek { animation: rak-x-puff .5s ease-in-out 3 .2s; }
.rak-bubliny .rak-ant-l, .rak-bubliny .rak-ant-r { animation: rak-x-antjoy .5s ease-in-out 4 !important; }
.rak-bubliny .rak-blow { animation: rak-x-blow 1.2s ease-out both; }
.rak-bubliny .rak-blow1 { animation-delay: .25s; }
.rak-bubliny .rak-blow2 { animation-delay: .5s; }
.rak-bubliny .rak-blow3 { animation-delay: .75s; }
.rak-bubliny .rak-blow4 { animation-delay: 1s; }
.rak-bubliny .rak-blow5 { animation-delay: 1.25s; }

/* 8 Žmurk: winks, tilts, snaps a sparkle */
.rak-zmurk .rak-spin { --tilt: 6deg; animation: rak-x-tilt 1.4s ease-in-out both; }
.rak-zmurk .rak-r { animation: rak-x-raise 1.4s ease-in-out both !important; }
.rak-zmurk .rak-r .rak-pin { animation: rak-a-snap .25s ease-in-out 2 .35s !important; }
.rak-zmurk .rak-eye-l .rak-look { animation: rak-x-off 1.4s both !important; }
.rak-zmurk .rak-eye-l .rak-hap { animation: rak-x-on 1.4s both; }
.rak-zmurk .rak-look { animation: none !important; }
.rak-zmurk .rak-smile { animation: rak-x-off 1.4s both; }
.rak-zmurk .rak-grin { animation: rak-x-on 1.4s both; }
.rak-zmurk .rak-spark { animation: rak-x-pop .9s ease-out both .3s; }

@keyframes rak-a-bob { 50% { transform: translateY(-2.5px); } }
@keyframes rak-a-ant { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg); } }
@keyframes rak-a-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@keyframes rak-a-snip { 0%, 64%, 100% { transform: rotate(0); } 69%, 79% { transform: rotate(-12deg); } 74%, 84% { transform: rotate(4deg); } }
@keyframes rak-a-snap { 50% { transform: rotate(-14deg); } }
@keyframes rak-a-tail { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes rak-a-look { 0%, 18%, 62%, 100% { transform: none; } 22%, 34% { transform: translate(-2px, .5px); } 40%, 52% { transform: translate(2px, -.5px); } }
@keyframes rak-a-blink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(.1); } }
@keyframes rak-a-bubble { 0%, 55% { opacity: 0; transform: translateY(0) scale(.5); } 60% { opacity: 1; } 85% { opacity: .8; } 95%, 100% { opacity: 0; transform: translate(3px, -40px) scale(1.2); } }
@keyframes rak-a-jump { 0% { transform: none; } 14% { transform: scale(1.08, .9); } 42% { transform: translateY(-16px) scale(.96, 1.05); } 70% { transform: scale(1.06, .93); } 85% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes rak-a-clap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
@keyframes rak-a-star { 0% { opacity: 0; transform: translateY(8px) scale(.2) rotate(-40deg); } 30% { opacity: 1; transform: translateY(0) scale(1.2) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px) scale(.9) rotate(20deg); } }

@keyframes rak-x-on { 0% { opacity: 0; } 8%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rak-x-off { 0% { opacity: 1; } 8%, 86% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rak-x-oh { 0%, 8%, 72%, 100% { opacity: 0; } 12%, 66% { opacity: 1; } }
@keyframes rak-x-blush { 0%, 100% { transform: none; opacity: .8; } 15%, 85% { transform: scale(1.45); opacity: 1; } }
@keyframes rak-x-puff { 0%, 100% { transform: none; } 50% { transform: scale(1.35); } }
@keyframes rak-x-tilt { 0%, 100% { transform: none; } 15%, 85% { transform: rotate(var(--tilt, -6deg)); } }
@keyframes rak-x-wave { 0%, 100% { transform: rotate(0); } 14% { transform: rotate(52deg); } 26% { transform: rotate(34deg); } 38% { transform: rotate(52deg); } 50% { transform: rotate(34deg); } 62% { transform: rotate(52deg); } 74% { transform: rotate(36deg); } 86% { transform: rotate(44deg); } }
@keyframes rak-x-antjoy { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(10deg); } }
@keyframes rak-x-sway { 0%, 100% { transform: none; } 25% { transform: rotate(-5deg); } 50% { transform: translateY(-2px); } 75% { transform: rotate(5deg); } }
@keyframes rak-x-raise { 0%, 100% { transform: rotate(0); } 15%, 85% { transform: rotate(24deg); } }
@keyframes rak-x-pinch { 0%, 100% { transform: rotate(0); } 15%, 85% { transform: rotate(-14deg); } }
@keyframes rak-x-float { 0% { opacity: 0; transform: translate(0, 8px) scale(.3); } 22% { opacity: 1; transform: translate(0, 0) scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0px), -30px) scale(.9); } }
@keyframes rak-x-dance { 0%, 100% { transform: none; } 12.5%, 62.5% { transform: translateX(-5px) rotate(-8deg); } 25%, 50%, 75% { transform: translateY(-4px); } 37.5%, 87.5% { transform: translateX(5px) rotate(8deg); } }
@keyframes rak-x-armup { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(42deg); } }
@keyframes rak-x-launch { 0%, 100% { transform: none; } 14% { transform: scale(1.1, .86); } 32%, 62% { transform: translateY(-28px); } 82% { transform: scale(1.08, .9); } 92% { transform: translateY(-2px); } }
@keyframes rak-x-flip { 0%, 24% { transform: rotate(0); } 66%, 100% { transform: rotate(360deg); } }
@keyframes rak-x-giggle { 0% { transform: rotate(-4deg); } 100% { transform: rotate(4deg) translateY(-1.5px); } }
@keyframes rak-x-lookup { 0%, 100% { transform: none; } 10%, 80% { transform: translate(1px, -2.5px); } }
@keyframes rak-x-hop { 0%, 72%, 100% { transform: none; } 79% { transform: scale(1.06, .92); } 89% { transform: translateY(-9px); } }
@keyframes rak-x-blow { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 12% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.25); } }
@keyframes rak-x-pop { 0% { opacity: 0; transform: scale(0) rotate(-45deg); } 35% { opacity: 1; transform: scale(1.3) rotate(0); } 70% { opacity: 1; transform: scale(1) rotate(20deg); } 100% { opacity: 0; transform: scale(.6) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .rak, .rak * { animation: none !important; } }