/* ==========================================================================
   Masterka — motion presety v čistém CSS (bez GSAP)
   Použití: <link rel="stylesheet" href="masterka-motion.css"> a třída na prvku, např.
   <h1 class="mk-rise">…</h1>, <i class="mk-star mk-spin"></i>, <div class="mk-drift">…</div>
   Zpoždění: style="--d:.4s". Délky a easingy odpovídají GSAP verzi v _kit/kit.js.
   ========================================================================== */
:root {
  --mk-out: cubic-bezier(.33, 1, .68, 1);        /* power3.out */
  --mk-out4: cubic-bezier(.25, 1, .5, 1);        /* power4.out */
  --mk-inout: cubic-bezier(.65, 0, .35, 1);      /* power3.inOut */
  --mk-back: cubic-bezier(.34, 1.56, .64, 1);    /* back.out */
}
[class*="mk-"] { animation-delay: var(--d, 0s); animation-fill-mode: both; }

/* ---------- Vstupy ---------- */
.mk-fade    { animation: mk-fade .9s var(--mk-out) both; }
.mk-blur    { animation: mk-blur 1.2s var(--mk-out) both; }
.mk-scale   { animation: mk-scale 1s var(--mk-out) both; }
.mk-left    { animation: mk-left 1.1s var(--mk-out4) both; }
.mk-right   { animation: mk-right 1.1s var(--mk-out4) both; }
.mk-rotate  { animation: mk-rotate 1.1s var(--mk-out) both; transform-origin: 0 100%; }
.mk-flip    { animation: mk-flip 1.1s var(--mk-out) both; transform-origin: 50% 100%; }
.mk-clip    { animation: mk-clip 1.3s var(--mk-inout) both; }
.mk-wipe    { animation: mk-wipe 1.2s var(--mk-inout) both; }
.mk-iris    { animation: mk-iris 1.4s var(--mk-inout) both; }
.mk-zoom    { animation: mk-zoom 2.6s cubic-bezier(.45, 0, .55, 1) both; }
.mk-star    { animation: mk-star 1s var(--mk-back) both; }
.mk-grow    { animation: mk-grow 1.1s var(--mk-inout) both; transform-origin: 0 50%; }
/* Řádky titulku: <span class="mk-line"><span>řádek</span></span> */
.mk-line { display: block; overflow: hidden; }
.mk-line > span { display: inline-block; animation: mk-rise 1.15s var(--mk-out4) both; animation-delay: var(--d, 0s); }
.mk-line:nth-child(2) > span { animation-delay: calc(var(--d, 0s) + .09s); }
.mk-line:nth-child(3) > span { animation-delay: calc(var(--d, 0s) + .18s); }
.mk-stagger > * { animation: mk-fade .9s var(--mk-out) both; }
.mk-stagger > *:nth-child(2) { animation-delay: .08s; } .mk-stagger > *:nth-child(3) { animation-delay: .16s; }
.mk-stagger > *:nth-child(4) { animation-delay: .24s; } .mk-stagger > *:nth-child(5) { animation-delay: .32s; }
.mk-marker { background: linear-gradient(rgba(255,68,0,.35), rgba(255,68,0,.35)) no-repeat 0 85% / 0% 40%; animation: mk-marker 1s var(--mk-inout) both; }

/* ---------- Smyčky (3 s) ---------- */
.mk-drift   { animation: mk-drift 6s ease-in-out infinite; }
.mk-spin    { animation: mk-spin 12s linear infinite; }
.mk-spinrev { animation: mk-spin 12s linear infinite reverse; }
.mk-float   { animation: mk-float 3s ease-in-out infinite; }
.mk-pulse   { animation: mk-pulse 3s ease-in-out infinite; }
.mk-glow    { animation: mk-glow 3s ease-in-out infinite; }
.mk-twinkle > * { animation: mk-twinkle 1.5s ease-in-out infinite; }
.mk-twinkle > *:nth-child(2n) { animation-delay: .41s; } .mk-twinkle > *:nth-child(3n) { animation-delay: .82s; }
.mk-marquee { display: flex; width: max-content; animation: mk-marquee 12s linear infinite; }   /* obsah 2× zopakovat */
.mk-shimmer { background-image: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.8) 50%, transparent 70%); background-size: 200% 100%; animation: mk-shimmer 3s linear infinite; }
.mk-gradient{ background-size: 300% 300%; animation: mk-gradient 6s ease-in-out infinite; }
.mk-bounce  { animation: mk-bounce 3s infinite; }
.mk-blink   { animation: mk-blink 1s steps(1) infinite; }
.mk-sway    { animation: mk-sway 3s ease-in-out infinite; transform-origin: 50% 100%; }

@keyframes mk-fade    { from { opacity: 0; transform: translateY(16px); } }
@keyframes mk-blur    { from { opacity: 0; filter: blur(24px); transform: scale(1.04); } }
@keyframes mk-scale   { from { opacity: 0; transform: scale(.82); } }
@keyframes mk-left    { from { opacity: 0; transform: translateX(-160px); } }
@keyframes mk-right   { from { opacity: 0; transform: translateX(160px); } }
@keyframes mk-rotate  { from { opacity: 0; transform: translateY(40px) rotate(-10deg); } }
@keyframes mk-flip    { from { opacity: 0; transform: perspective(1200px) rotateX(-90deg); } }
@keyframes mk-clip    { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes mk-wipe    { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes mk-iris    { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes mk-zoom    { from { transform: scale(1.18); } }
@keyframes mk-star    { from { transform: scale(0) rotate(-90deg); } }
@keyframes mk-grow    { from { transform: scaleX(0); } }
@keyframes mk-rise    { from { transform: translateY(112%) rotate(2.5deg); } }
@keyframes mk-marker  { to { background-size: 100% 40%; } }
@keyframes mk-drift   { 50% { transform: translate(-60px, 40px); } }
@keyframes mk-spin    { to { transform: rotate(360deg); } }
@keyframes mk-float   { 50% { transform: translateY(-14px); } }
@keyframes mk-pulse   { 50% { transform: scale(1.08); } }
@keyframes mk-glow    { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes mk-twinkle { 50% { transform: scale(.5); opacity: .55; } }
@keyframes mk-marquee { to { transform: translateX(-50%); } }
@keyframes mk-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes mk-gradient{ 50% { background-position: 100% 50%; } }
@keyframes mk-bounce  { 0%, 33%, 100% { transform: translateY(0); } 15% { transform: translateY(-40px); } }
@keyframes mk-blink   { 50% { opacity: 0; } }
@keyframes mk-sway    { 50% { transform: rotate(6deg); } }

@media (prefers-reduced-motion: reduce) { [class*="mk-"], [class*="mk-"] > * { animation: none !important; } }