/* ═══════════════════════════════════════════════════════════════════ motion.css — Emil-laděné animační primitivy (žije v template-base, dědí je každá niche šablona i klientský klon). PRINCIPY (Emil Kowalski) — DRŽ je i v budoucích úpravách webů: • Animuj JEN transform + opacity (GPU, žádný layout thrash). • ease-out pro příchod, krátká trvání; pohyb VEDE pozornost, není dekorace. • Vždy respektuj prefers-reduced-motion. • Subtilní > okázalé. Když si animace všimneš jako „animace", je špatně. ═══════════════════════════════════════════════════════════════════ */ :root { /* trvání */ --mo-fast: 140ms; /* UI feedback (hover/press) */ --mo-base: 240ms; /* běžné přechody */ --mo-slow: 520ms; /* reveal větších bloků */ /* easing — ease-out dominantní pro příchod, lehký „spring" doraz */ --mo-out: cubic-bezier(0.22, 1, 0.36, 1); /* decel, jemný overshoot pocit */ --mo-inout: cubic-bezier(0.65, 0, 0.35, 1); --mo-rise: 14px; /* posun při reveal */ } /* ── Reveal on scroll (přidává se .is-in přes motion.js) ── Skryté JEN pod html.js (nastaví inline script v ) — bez JS je obsah vidět hned. Progressive enhancement (ADR-0016): web nesmí stát na JS. */ .js .reveal, .js .reveal-stagger > * { opacity: 0; transform: translate3d(0, var(--mo-rise), 0); will-change: opacity, transform; } .reveal.is-in, .reveal-stagger.is-in > * { opacity: 1; transform: none; transition: opacity var(--mo-slow) var(--mo-out), transform var(--mo-slow) var(--mo-out); } /* stagger — děti naskakují postupně (delay řídí motion.js přes --i) */ .reveal-stagger.is-in > * { transition-delay: calc(var(--i, 0) * 70ms); } /* ── Interakce: lift / press (subtilní, transform-only) ── */ .u-lift { transition: transform var(--mo-base) var(--mo-out), box-shadow var(--mo-base) var(--mo-out); } .u-lift:hover { transform: translate3d(0, -3px, 0); } .u-press { transition: transform var(--mo-fast) var(--mo-out); } .u-press:active { transform: scale(0.98); } /* ── Vstup obsahu z CMS (po hydrataci) — jemný fade, žádný „pop" ── */ [data-cms-rendered] { animation: mo-item-in var(--mo-base) var(--mo-out) both; } @keyframes mo-item-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } } /* ── Reduced motion: nic se nehýbe, obsah je hned vidět ── */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; } .reveal.is-in, .reveal-stagger.is-in > * { transition: none !important; } .u-lift, .u-press { transition: none !important; } .u-lift:hover, .u-press:active { transform: none !important; } [data-cms-rendered] { animation: none !important; } }