/* Stavy a kľúčové snímky animácií. [F2-Pohyb]

   Zásady (PLAN.md, bod 4 a 8):
   - Nič v tomto súbore nemení pokojový stav stránky. Skryté štartovacie stavy platia iba pod html.m-on;
     tú triedu pridáva assets/js/motion.js a nepridá ju pri ?static ani pri prefers-reduced-motion.
   - Triedy m-sticky / m-stuck na hlavičke (aj v statickom režime, bez prechodov) pridá skript až po odscrollovaní.
   - Animujú sa iba transformácie (transform / translate / rotate / scale), opacity, clip-path,
     stroke-dashoffset a background-position.
   - Dekoratívne prvky .m-scan, .m-mail, .m-typing sú bez html.m-on skryté (display:none). */

:root{
  --m-ease:cubic-bezier(.2,.8,.2,1);
  --m-spring:cubic-bezier(.34,1.4,.64,1);
}

/* ---------- dekoratívne prvky (bez pohybu neexistujú) ---------- */
.m-scan,.m-mail,.m-typing{display:none}

/* ---------- odkrývanie pri načítaní a scrollovaní ---------- */
/* Skrytý štart platí od prvého snímku (m-on pridá motion-boot.js v <head>), preto selektory priamo na prvky,
   nie na triedu, ktorú by pridal až modul. Zoznam musí zodpovedať TARGETS v motion.js. */
@media screen{
  html.m-on :is(.hero>.t,.sh>div>.kick,.shc>.kick,.sh h2,.shc>h2,.sh>p,.shc>p,.ind>.t,.au>.t,.sc>.t,.ab>.t,
    .proc,.pc>article,.note2,.cta,.footer):not(.m-in),
  html.m-on .m-r:not(.m-in){opacity:0}
}
/* nadpisy odkrývané po riadkoch: slová dočasne zabalí motion.js, po dobehnutí vráti pôvodný obsah */
.m-w{display:inline-block;clip-path:inset(-.42em -.18em -.26em -.18em)}
.m-wi{display:inline-block;transform-origin:0 100%}

/* body otáčania pre transformácie (bez transformácie nemajú vizuálny účinok) */
html.m-on .h4t .doc i,html.m-on .aub .prog i{transform-origin:0 50%}
html.m-on .h6t .toast{transform-origin:0 100%}
html.m-on .bn .chat .u{transform-origin:0 100%}
html.m-on .bn .chat .b{transform-origin:100% 100%}
html.m-on .h7t .stp3 span,html.m-on .bdgs span{transform-origin:0 50%}

/* ---------- navigácia: lepkavá, po odscrollovaní plávajúca pilulka ---------- */
/* Lepkavá je až po prvom odscrollovaní (m-sticky): na vrchu stránky ostáva hlavička presne ako v návrhu
   a nevzniká žiadna kompozitná vrstva, ktorá by zmenila vyhladzovanie textu na celej stránke. */
.nav.m-sticky{position:sticky;top:0;z-index:40}
.nav.m-sticky::before{content:"";position:absolute;z-index:-1;inset:.75rem .875rem;border-radius:var(--r-pill);
  background:rgba(255,246,236,.8);box-shadow:0 .875rem 2rem -.75rem rgba(27,20,16,.22),inset 0 0 0 1px rgba(27,20,16,.07);
  opacity:0;pointer-events:none}
.nav.m-stuck::before{opacity:1;-webkit-backdrop-filter:saturate(1.5) blur(.875rem);backdrop-filter:saturate(1.5) blur(.875rem)}
html.menu-open .nav::before{opacity:0}
@media (max-width:1199.98px){.nav.m-sticky::before{inset:.5rem .625rem}}
html.m-on .nav{transition:translate .5s var(--m-ease)}
html.m-on .nav.m-sticky::before{scale:.98;transition:opacity .35s ease,scale .5s var(--m-ease)}
html.m-on .nav.m-stuck::before{scale:1}
/* schovanie pri scrollovaní nadol; nie pri otvorenom menu (fixné potomky) ani s fokusom vnútri */
html.m-on:not(.menu-open) .nav.m-hidden:not(:focus-within){translate:0 -110%}

/* ---------- automatizácia: stavy slučky ---------- */
html.m-on .aub .hl.m-dim{outline-color:transparent;background-color:transparent}
html.m-on .aub .opt span.on.m-dim{outline-color:transparent;background-color:var(--paper)}
html.m-on .aub .opt span.on.m-dim::before{border:.125rem solid #cdbcae}
html.m-on .aub .flow span.on.m-dim{background:rgba(255,255,255,.14);color:#fff}

/* skenovací pás nad faktúrou */
html.m-on .paper .m-scan{display:block;position:absolute;left:0;right:0;top:0;height:2.75rem;pointer-events:none;opacity:0;
  border-radius:.75rem .75rem 0 0;border-bottom:.125rem solid #ff8a2b;
  background:linear-gradient(rgba(255,138,43,0),rgba(255,138,43,.16));box-shadow:0 .5rem .875rem -.5rem rgba(255,106,43,.55)}

/* obálka, ktorá odletí k riešiteľovi */
html.m-on .em .m-mail{display:block;position:absolute;left:0;top:0;width:1.625rem;height:1.125rem;margin:-.5625rem 0 0 -.8125rem;
  border-radius:.25rem;background:var(--or);box-shadow:0 .375rem .75rem rgba(255,106,43,.35);opacity:0;pointer-events:none;overflow:hidden}
html.m-on .em .m-mail::before{content:"";position:absolute;left:50%;top:-.625rem;width:1rem;height:1rem;margin-left:-.5rem;
  border:.125rem solid #fff;border-radius:.125rem;rotate:45deg;box-sizing:border-box}

/* bublina „píše…“ v chate podpory */
html.m-on .chat .m-typing{display:block;position:absolute;right:0;top:0;width:3.25rem;max-width:none;height:1.75rem;padding:0;
  border-radius:.875rem .875rem .25rem .875rem;background:var(--lime);opacity:0;pointer-events:none;transform-origin:100% 100%}
html.m-on .chat .m-typing::before,html.m-on .chat .m-typing::after{content:"";position:absolute;left:.6875rem;top:50%;
  width:1.875rem;height:.5rem;margin-top:-.25rem;
  background:radial-gradient(circle,var(--lk) .17rem,transparent .2rem) 0 50%/.625rem .5rem repeat-x}
html.m-on .chat .m-typing::before{opacity:.3}
html.m-on .chat .m-typing::after{background-repeat:no-repeat}
html.m-on .chat .m-typing.m-go::after{animation:m-type .96s steps(3,end) infinite}
@keyframes m-type{to{background-position:1.875rem 50%}}

/* ---------- pomalé slučky (iba v pohľade; .m-pause / .m-bg ich zastaví) ---------- */
html.m-on .abm.m-spin .rg{animation:m-spin 60s linear infinite}
/* limetková bodka obieha okolo stredu monogramu (pôvod = stred kruhu, prepočítaný z polohy ::after) */
html.m-on .abm.m-spin .mono::after{transform-origin:-2.8125rem -2.3125rem;animation:m-spin 16s linear infinite}
html.m-on .cta.m-drift .ring{animation:m-drift-b 22s ease-in-out infinite}
html.m-on .cta.m-drift .ring2{animation:m-drift-c 28s ease-in-out infinite}
html.m-on .m-pause .rg,html.m-on .m-pause .mono::after,html.m-on .m-pause .ring,html.m-on .m-pause .ring2,
html.m-on.m-bg .rg,html.m-on.m-bg .mono::after,html.m-on.m-bg .ring,html.m-on.m-bg .ring2{animation-play-state:paused}
@keyframes m-spin{to{rotate:360deg}}
@keyframes m-drift-b{0%,100%{translate:0 0;scale:1}33%{translate:-1.5rem 1rem;scale:1.03}66%{translate:.75rem 1.75rem;scale:.99}}
@keyframes m-drift-c{0%,100%{translate:0 0;scale:1}50%{translate:1.75rem -1.25rem;scale:1.05}}

/* ---------- odvetvia: hover (iba myš) ---------- */
@media (hover:hover) and (pointer:fine){
  html.m-on .ind>.t{transition:translate .55s var(--m-ease)}
  html.m-on .ind>.t:hover{translate:0 -.375rem}
  html.m-on .ind .it .ic{transition:translate .7s var(--m-ease),rotate .7s var(--m-ease),scale .7s var(--m-ease)}
  html.m-on .ind .it:hover .ic{translate:-.5rem -.625rem;rotate:-6deg;scale:1.05}
  html.m-on .ind .it .ic .bl0{transform-box:fill-box;transform-origin:center;transition:scale .8s var(--m-ease)}
  html.m-on .ind .it:hover .ic .bl0{scale:1.08}
  html.m-on .ind .it:hover .frg,html.m-on .ind .big:hover .stt{animation:m-hop .7s var(--m-ease)}
}
@keyframes m-hop{0%{translate:0 0}30%{translate:0 -.625rem}58%{translate:0 .125rem}78%{translate:0 -.1875rem}100%{translate:0 0}}