/* =========================================================
   Studio387 — Ninium Motion
   Diskretni pokret za cijeli sajt. Klase se dodaju u Elementoru
   (Napredno → CSS klase):
     nn-reveal       element se blago podigne kad uđe u ekran
     nn-lift         kartica se podigne na hover
     nn-hero-motion  balončići koji se dižu iza sadržaja (na hero containeru)
   Sve se gasi ako posjetilac ima uključeno "smanji animacije".
   ========================================================= */

/* ---------------------------------------------------------
   Boja linkova
   Astra svaki link bez vlastite boje boji plavo (#046bd2, na hover i fokus #045cb4), pa kod klika ili povratka na stranicu
   tekst ostane plav. Te dvije boje su ovdje zamijenjene bojama sajta, tako da nijedan link ne može postati plav.
   --------------------------------------------------------- */
:root:root{--ast-global-color-0:#650031;--ast-global-color-1:#3A0A21;}

/* ---------------------------------------------------------
   Pojavljivanje pri skrolu
   Sakriva se tek kad JS potvrdi da radi (html.nn-motion),
   pa bez JS-a ništa ne ostaje nevidljivo.
   --------------------------------------------------------- */
html.nn-motion .nn-reveal,
html.nn-motion .nn-products .nn-prod-card,
html.nn-motion .nn-mag .nn-mag-card{
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--nn-reveal-delay,0ms);
}
/* Skriveno stanje važi samo dok element ne uđe u ekran (:not(.nn-in)),
   da poslije ne nadjača hover transformacije. */
html.nn-motion .nn-reveal:not(.nn-in),
html.nn-motion .nn-products .nn-prod-card:not(.nn-in),
html.nn-motion .nn-mag .nn-mag-card:not(.nn-in){
  opacity:0;
  transform:translateY(18px);
  will-change:opacity,transform;
}
/* Nakon pojavljivanja vrati brzu tranziciju da hover ne kasni. */
html.nn-motion .nn-products .nn-prod-card.nn-done,
html.nn-motion .nn-mag .nn-mag-card.nn-done,
html.nn-motion .nn-reveal.nn-done{
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  transition-delay:0ms;
}

/* ---------------------------------------------------------
   Hover: kartice
   --------------------------------------------------------- */
.nn-lift{transition:transform .25s ease,box-shadow .25s ease;}
.nn-lift:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(58,10,33,.08);
}

/* ---------------------------------------------------------
   Hover: dugmad (postojeće klase iz HTML widgeta + Elementor dugme)
   --------------------------------------------------------- */
.nn-cta,
.nn-btn-light,
.nn-btn-outline{
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease !important;
}
.nn-cta:hover,
.nn-btn-light:hover,
.nn-btn-outline:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(58,10,33,.14);
}
.nn-cta:active,
.nn-btn-light:active,
.nn-btn-outline:active{transform:none;box-shadow:none;}

.nn-arrow{display:inline-block;transition:transform .25s ease;}
.nn-cta:hover .nn-arrow,
.nn-btn-light:hover .nn-arrow,
.nn-btn-outline:hover .nn-arrow{transform:translateX(4px);}

.elementor-button .elementor-button-icon{transition:transform .25s ease;}
.elementor-button:hover .elementor-button-icon{transform:translateX(4px);}

/* ---------------------------------------------------------
   Hero: balončići iza sadržaja
   --------------------------------------------------------- */
.elementor .nn-hero-motion.e-con > .nn-hero-fx{
  position:absolute !important;
  /* Sloj počinje ispod "N" watermarka u gornjem desnom uglu: watermark se crta preko ovog sloja,
     pa bi njegove kose pruge presjekle balončić (izgleda kao precrtan krug). */
  inset:32% 0 0 0;
  z-index:0 !important;
  overflow:hidden;
  pointer-events:none;
  /* Balončići se pri vrhu sloja meko rastope umjesto da budu odsječeni. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 26%);
}
/* Balončići: dižu se iza sadržaja, lagano se njišu i izblijede pri vrhu.
   Veličinu, položaj, trajanje i visinu uspona postavlja JS kroz CSS varijable. */
.nn-hero-fx .nn-bubble{
  position:absolute;
  left:var(--x,60%);
  bottom:-60px;
  width:var(--size,24px);
  height:var(--size,24px);
  opacity:0;
  will-change:transform,opacity;
  animation:nn-bubble-rise var(--dur,10s) linear var(--delay,0s) infinite;
}
.nn-hero-fx .nn-bubble i{
  display:block;width:100%;height:100%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:
    radial-gradient(circle at 30% 28%,rgba(255,255,255,.75) 0%,rgba(255,255,255,.25) 22%,rgba(255,255,255,0) 46%),
    radial-gradient(circle at 60% 65%,var(--tint,rgba(150,132,128,.30)) 0%,rgba(150,132,128,.08) 70%,rgba(150,132,128,0) 100%);
  box-shadow:inset 0 0 8px rgba(255,255,255,.35),0 3px 10px rgba(33,16,24,.05);
  animation:nn-bubble-sway var(--sway,4s) ease-in-out var(--delay,0s) infinite alternate;
}
@keyframes nn-bubble-rise{
  0%{transform:translate3d(0,0,0) scale(.55);opacity:0;}
  10%{opacity:var(--alpha,.8);}
  72%{opacity:var(--alpha,.8);}
  92%{transform:translate3d(var(--drift,0px),calc(var(--rise,520px) * -.96),0) scale(1.12);opacity:.15;}
  100%{transform:translate3d(var(--drift,0px),calc(var(--rise,520px) * -1),0) scale(1.35);opacity:0;}
}
@keyframes nn-bubble-sway{
  from{transform:translateX(-7px);}
  to{transform:translateX(7px);}
}

/* ---------------------------------------------------------
   Poštuj "smanji animacije"
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html.nn-motion .nn-reveal,
  html.nn-motion .nn-products .nn-prod-card,
  html.nn-motion .nn-mag .nn-mag-card{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
  .nn-hero-fx .nn-bubble{display:none !important;}
  .nn-lift:hover,
  .nn-cta:hover,.nn-btn-light:hover,.nn-btn-outline:hover{transform:none;}
  .nn-arrow,.elementor-button .elementor-button-icon{transition:none;}
}