/* Zivic Design - premium motion sloj (smooth scroll, otkrivanje naslova, slika, brojaca, spotlight, prelaz stranica) */
html.zd-mx-ss { scroll-behavior: auto !important; }

/* naslovi: reci izlaze iz maske */
.zd-mx .zd-mx-split.zd-reveal { opacity: 1 !important; transform: none !important; }
.zd-mx .zd-mx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .12em .2em; margin: 0 -.12em -.2em; }
.zd-mx .zd-mx-w > span { display: inline-block; transform: translate3d(0, 110%, 0) rotate(3deg); transform-origin: 0 100%; transition: transform 1.15s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 50ms + 80ms); will-change: transform; }
.zd-mx .zd-mx-split.zd-mx-in .zd-mx-w > span { transform: none; }
.zd-mx .zd-mx-split.zd-mx-done .zd-mx-w > span { will-change: auto; }

/* slike: otvaranje maske + blagi zoom out */
.zd-mx .zd-mx-img { clip-path: inset(14% 8% 14% 8% round 22px); transition: clip-path 1.35s cubic-bezier(.16, 1, .3, 1); }
.zd-mx .zd-mx-img img { transform: scale(1.16); transition: transform 1.7s cubic-bezier(.16, 1, .3, 1); }
.zd-mx .zd-mx-img.zd-mx-in { clip-path: inset(0 0 0 0 round 0); }
.zd-mx .zd-mx-img.zd-mx-in img { transform: scale(1); }

/* kartice: svetlo prati kursor */
.zd-mx .zd-mx-spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; mix-blend-mode: screen; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(46, 143, 254, .14), rgba(46, 143, 254, .05) 35%, transparent 65%); }
.zd-mx .zd-mx-spot-host:hover > .zd-mx-spot { opacity: 1; }


/* magnetna dugmad */
.zd-mx .zd-mx-mag { transition: transform .6s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.zd-mx .zd-mx-mag.is-on { transition: transform .18s ease-out; }

/* traka napretka citanja */
.zd-mx-prog { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 100000; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #2E8FFE, #6FB2FF); box-shadow: 0 0 12px rgba(46, 143, 254, .6); }

/* prelaz izmedju stranica: logo dok se ucitava sledeca strana */
.zd-mx-veil { position: fixed; inset: 0; z-index: 100001; pointer-events: none; opacity: 0; visibility: hidden; background: #070707;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: opacity .38s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .38s; }
.zd-mx-veil.is-on, .zd-mx-enter .zd-mx-veil { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .38s cubic-bezier(.65, 0, .35, 1), visibility 0s; }
.zd-mx-enter .zd-mx-veil { transition: none; }
.zd-mx-veil::before { content: ""; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(46, 143, 254, .16), transparent 70%); }
.zd-mx-veil-logo { position: relative; width: clamp(150px, 15vw, 210px); height: auto; display: block; opacity: 0; transform: translate3d(0, 12px, 0) scale(.96);
  transition: opacity .55s ease .1s, transform .8s cubic-bezier(.16, 1, .3, 1) .1s; }
.zd-mx-veil-line { position: relative; display: block; width: 120px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(111, 178, 255, .14); }
.zd-mx-veil-line::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #2E8FFE, #6FB2FF);
  box-shadow: 0 0 10px rgba(46, 143, 254, .7); transition: transform 1.4s cubic-bezier(.16, 1, .3, 1) .2s; }
.zd-mx-veil.is-on .zd-mx-veil-logo, .zd-mx-enter .zd-mx-veil-logo { opacity: 1; transform: none; }
.zd-mx-veil.is-on .zd-mx-veil-line::after { transform: scaleX(.72); }
.zd-mx-enter .zd-mx-veil-line::after { transform: scaleX(.72); transition: none; }
.zd-mx-veil.is-out .zd-mx-veil-line::after { transform: scaleX(1); transition: transform .3s ease; }
.zd-mx-veil.is-out .zd-mx-veil-logo { opacity: 0; transform: scale(1.04); transition: opacity .4s ease .05s, transform .6s cubic-bezier(.16, 1, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  .zd-mx .zd-mx-w > span, .zd-mx .zd-mx-img, .zd-mx .zd-mx-img img { transform: none !important; clip-path: none !important; transition: none !important; }
  .zd-mx-veil { display: none; }
}
.elementor-editor-active .zd-mx-w > span { transform: none !important; }