/* ============================================================
   MOLTISANTI — motion layer
   Sve je GPU-friendly: samo opacity i transform, bez layout-a.
   ============================================================ */

:root{--m-ease:cubic-bezier(.16,.84,.28,1)}

/* ---------- prelaz stranice (overlay, nikad ne sakriva sadržaj) ---------- */
.m-veil{position:fixed;inset:0;z-index:300;pointer-events:none;
  background:var(--paper,#f5f6f4);opacity:1;transition:opacity .45s ease}
[data-theme=dark] .m-veil{background:var(--ink,#0d0d0d)}
.m-veil.m-off{opacity:0}
.m-veil.m-on{opacity:1;transition:opacity .26s ease}

/* ---------- otkrivanje na skrolu ---------- */
.m-js [data-m]{opacity:0;will-change:opacity,transform}
.m-js [data-m="up"]{transform:translate3d(0,26px,0)}
.m-js [data-m="fade"]{transform:none}
.m-js [data-m="scale"]{transform:scale(.975)}
.m-js [data-m].m-in{opacity:1;transform:none;will-change:auto;
  transition:opacity .85s var(--m-ease),transform 1s var(--m-ease);
  transition-delay:var(--m-d,0ms)}


/* ---------- header ---------- */



/* ---------- linkovi u tekstu ---------- */
.prose p a:not(.cs-btn):not(.solution-link),
.hub-note a,.faq-a a{position:relative;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--m-ease),opacity .3s ease}
.prose p a:hover,.hub-note a:hover,.faq-a a:hover{background-size:0% 1px;opacity:.62}

/* ---------- magnetic ---------- */
.magnetic,.cs-btn,.btn-primary,.btn-ghost{transition:transform .45s var(--m-ease)}

/* ---------- brojači u herou ---------- */
.m-ticker{overflow:hidden;margin-top:clamp(26px,3.2vw,44px);
  border-top:1px solid var(--line,rgba(13,13,13,.14));padding-top:clamp(14px,1.6vw,22px)}
.m-ticker__track{display:flex;gap:38px;width:max-content;
  animation:m-slide 42s linear infinite}
.m-ticker:hover .m-ticker__track{animation-play-state:paused}
.m-ticker span{font-size:clamp(11px,1vw,13px);letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;opacity:.42}
.m-ticker i{font-style:normal;opacity:.24}
@keyframes m-slide{to{transform:translateX(-50%)}}

/* ---------- hero pojačanje ---------- */
.home-hero .hero-gradient__orb{animation:m-orb 22s ease-in-out infinite alternate}
.home-hero .hero-gradient__orb--2{animation-duration:28s;animation-delay:-6s}
.home-hero .hero-gradient__orb--3{animation-duration:34s;animation-delay:-12s}
@keyframes m-orb{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-3%,0) scale(1.08)}
  100%{transform:translate3d(-2%,2.5%,0) scale(.96)}}

.home-hero .hero-gradient::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line,rgba(13,13,13,.055)) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line,rgba(13,13,13,.055)) 1px,transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  -webkit-mask-image:radial-gradient(120% 85% at 50% 40%,#000 0,transparent 78%);
  mask-image:radial-gradient(120% 85% at 50% 40%,#000 0,transparent 78%);opacity:.85}

@media (prefers-reduced-motion:reduce){
  .m-veil{display:none}
  .m-js [data-m]{opacity:1!important;transform:none!important}
  .m-ticker__track,.home-hero .hero-gradient__orb{animation:none!important}
  .m-js .site-header{transition:none}
}