/* ============================================================================
   LumenSpark - landing/motion.css
   Jedan sustav pokreta: reveal, brojaci, ambient. Ukljucuje potpuni
   prefers-reduced-motion fallback (sadrzaj se prikazuje odmah).
   ============================================================================ */

/* --- Reveal --------------------------------------------------------------- */
.lsw-rv{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--motion-slow) var(--motion-ease),
             transform var(--motion-slow) var(--motion-ease);
}
.lsw-rv.is-in{opacity:1;transform:none}

/* Stagger - mali koraci, nikad ne odgadja pristup sadrzaju */
.lsw-rv[data-lsw-delay="1"]{transition-delay:120ms}
.lsw-rv[data-lsw-delay="2"]{transition-delay:120ms}
.lsw-rv[data-lsw-delay="3"]{transition-delay:180ms}
.lsw-rv[data-lsw-delay="4"]{transition-delay:320ms}

/* Bez JS-a sadrzaj mora biti vidljiv. Ulazna sekvenca radi na cistom CSS-u
   (animation-fill-mode:both), pa je i bez JS-a hero potpuno vidljiv. */
.lsw-no-js .lsw-rv{opacity:1;transform:none}
.lsw-no-js .lsw-xp-panel[hidden]{display:block}
.lsw-no-js .lsw-xp-rail{display:none}
.lsw-no-js .lsw-story-frame{position:relative;opacity:1;visibility:visible;transform:none}
.lsw-no-js .lsw-story-step{opacity:1}
.lsw-no-js .lsw-role-panel[hidden]{display:block}
.lsw-no-js .lsw-roles-tabs{display:none}

/* --- KPI brojac ----------------------------------------------------------- */
.lsw-count{font-variant-numeric:tabular-nums}

/* --- Video (opcionalno, kad je datoteka prisutna) ------------------------- */
.lsw-video{
  position:relative;overflow:hidden;border-radius:var(--lsw-r-lg);
  background:var(--lsw-brand-dark);
}
.lsw-video video{width:100%;height:auto;display:block;opacity:.86}
.lsw-video::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,14,12,.28),rgba(15,14,12,.62));
}
.lsw-video-cap{
  position:absolute;left:18px;bottom:16px;z-index:2;
  font-family:var(--lsw-mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lsw-on-dark-2);
}

/* ==========================================================================
   REDUCED MOTION - sve se zaustavlja, sadrzaj je odmah dostupan
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,*::before,*::after{
    animation-duration:.120ms !important;   /* dokumentirano: gasenje ambient loopova */
    animation-iteration-count:1 !important;
    transition-duration:.120ms !important;
  }

  .lsw-rv{opacity:1 !important;transform:none !important;transition-delay:120ms !important}

  /* Bez lebdenja, bez 3D nagiba, bez parallaxa */
  .lsw-float{animation:none !important}
  .lsw-hero-stage,
  .lsw-hero-visual[data-lsw-parallax] .lsw-hero-stage{transform:none !important}

  /* Bez ambijentalnog videa i bez ulazne sekvence kad je pokret smanjen */
  .lsw-hero-media{display:none !important}
  .lsw-hero [data-lsw-in]{animation:none !important;opacity:1 !important;transform:none !important}
  .lsw-hero-visual[data-lsw-in]{animation:none !important;opacity:1 !important;transform:none !important}

  /* Rijeci naslova stoje na mjestu, ne padaju */
  .lsw-w{overflow:visible}
  .lsw-w>span{animation:none !important;transform:none !important}
  /* Bez sjaja pod pokazivacem i bez linije napretka */
  .lsw-bento-card::after{display:none}
  .lsw-nav-progress{display:none}
  /* Crtica eyebrowa odmah puna */
  .lsw-rv .lsw-eyebrow::before,
  .lsw-eyebrow.lsw-rv::before{transform:scaleX(1) !important}
  /* Grafovi u bentu: konacno stanje odmah, bez iscrtavanja i pulsa */
  .lsw-sc-line{stroke-dashoffset:0 !important;animation:none !important}
  .lsw-sc-fill,.lsw-sc-dot,.lsw-sc-low{opacity:1 !important;transition:none !important}
  .lsw-flow-pulse{display:none !important}
  .lsw-flow-anim .lsw-flow-dot{animation:none !important}

  /* Bez mikropulsa */
  .lsw-badge-red .lsw-badge-dot,
  .lsw-badge-orange .lsw-badge-dot{animation:none !important}
  .lsw-brandmark:hover svg rect{transform:none !important}

  /* Kadar preglednika bez tranzicije */
  .lsw-xp-panel:not([hidden]) .lsw-xp-viz,
  .lsw-xp-panel:not([hidden]) .lsw-xp-copy{animation:none !important}

  /* Sekvenca: bez scale/crossfadea, bez parallaxa (JS ih i sam preskace) */
  .lsw-story-frame{transform:none !important;transition:none !important}
  .lsw-story-progress::after{transform:scaleY(1) !important;transition:none !important}
  .lsw-story-step{opacity:1 !important}
  .lsw-story-step::before{transform:none !important}
  [data-lsw-py]{transform:none !important}

  /* Staticna stanja umjesto crtanja i rasta */
  .lsw-rail-draw{stroke-dashoffset:0 !important}
  .lsw-bars[data-lsw-grow] .lsw-bar{height:var(--h,40%) !important}
  [data-lsw-grow] .lsw-meter i{width:var(--w,50%) !important}
  [data-lsw-grow] .lsw-funnel-bar{width:var(--w,100%) !important}

  /* Pulsevi i indikatori mirni */
  .lsw-spark-pulse::after,
  .lsw-spk-ai-dot::after,
  .lsw-app-timer i,
  .lsw-hero-scroll i::after{animation:none !important;opacity:.55}

  /* Prica: svi kadrovi u normalnom toku, bez sticky panela */
  .lsw-story-sticky{position:static}
  .lsw-story-frame{position:relative;opacity:1;visibility:visible;transform:none}
  .lsw-story-frame+.lsw-story-frame{margin-top:16px}
  .lsw-story-step{opacity:1}
}

/* ==========================================================================
   POTPISNI TRENUTAK 1 - naslov rijec po rijec
   Rijeci umeće site.js (splitWords) nakon svake promjene jezika, pa je
   ucinak jezicno neutralan i <em> ostaje sacuvan.
   ========================================================================== */
/* padding/margin par sirі kutiju za rezanje ispod osnovne linije, inace
   overflow:hidden odsijeca donje dijelove slova (g, j, p, ć, ž). */
.lsw-w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.16em;margin-bottom:-.16em;
}
.lsw-w>span{
  display:inline-block;
  transform:translateY(112%);
  animation:lsw-word-up .82s var(--motion-ease) both;
  animation-delay:calc(var(--lsw-wi,0) * 120ms + var(--lsw-wd,120ms));
}
@keyframes lsw-word-up{
  from{transform:translateY(112%)}
  to  {transform:translateY(0)}
}

/* Naslov heroja: rijeci nose ulaz, pa blok sam ne treba jos jednu animaciju */
.lsw-hero-title{--lsw-wd:150ms}
/* Naslov u sekcijama krece kad sekcija ude u vidno polje */
.lsw-statement.lsw-rv{opacity:1;transform:none;transition:none}
.lsw-statement .lsw-w>span{animation-play-state:paused}
.lsw-statement.is-in .lsw-w>span{animation-play-state:running}

/* ==========================================================================
   POTPISNI TRENUTAK 3 - bento kartice prate pokazivac
   Meki radijalni sjaj vezan na --mx/--my koje postavlja rAF u site.js.
   ========================================================================== */
.lsw-bento-card{position:relative;overflow:hidden}
.lsw-bento-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  opacity:0;transition:opacity var(--motion-standard);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(204,120,92,.14),transparent 62%);
}
.lsw-bento-card:hover::after{opacity:1}
.lsw-bento-card.is-dark::after{
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(204,120,92,.24),transparent 62%);
}
.lsw-bento-card>*{position:relative;z-index:1}

/* ==========================================================================
   NAPREDAK CITANJA - 1px terracotta linija na dnu navigacije
   ========================================================================== */
.lsw-nav-progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform:scaleX(var(--lsw-progress,0));transform-origin:left;
  background:linear-gradient(90deg,var(--lsw-accent),var(--lsw-accent-deep));
  opacity:0;transition:opacity var(--motion-standard);
  pointer-events:none;
}
.lsw-nav.is-stuck .lsw-nav-progress{opacity:1}

/* ==========================================================================
   EYEBROW - crtica se iscrta pri reveal-u
   ========================================================================== */
.lsw-rv .lsw-eyebrow::before,
.lsw-eyebrow.lsw-rv::before{
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--motion-slow) var(--motion-ease) 120ms;
}
.lsw-rv.is-in .lsw-eyebrow::before,
.lsw-eyebrow.lsw-rv.is-in::before{transform:scaleX(1)}

/* ==========================================================================
   MIKROINTERAKCIJE
   Svaka radi jednu stvar i traje ispod 320 ms. Nijedna ne pomice layout.
   ========================================================================== */

/* Navigacija: crta raste iz sredine na hover, iz lijeva kad je aktivna */
.lsw-nav-links a::before{
  content:'';position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  border-radius:2px;background:currentColor;opacity:.34;
  transform:scaleX(0);transform-origin:center;
  transition:transform var(--motion-standard) var(--motion-ease);
}
.lsw-nav-links a:hover::before{transform:scaleX(1)}
.lsw-nav-links a[aria-current="true"]::before{display:none}

/* Logotip: trake se blago razmaknu i akcentna poskoci */
.lsw-brandmark svg rect{transition:transform var(--motion-standard) var(--motion-ease)}
.lsw-brandmark:hover svg rect:nth-of-type(1){transform:translateY(-1px)}
.lsw-brandmark:hover svg rect:nth-of-type(2){transform:translateY(-2px)}
.lsw-brandmark:hover svg rect:nth-of-type(3){transform:translateY(-3.5px)}
.lsw-brandmark:hover svg rect:nth-of-type(4){transform:translateY(-2px)}

/* Zivi signal: tocka u crvenoj/narancastoj znacki tiho pulsira */
.lsw-badge-red .lsw-badge-dot,
.lsw-badge-orange .lsw-badge-dot{animation:lsw-sig 2.8s ease-in-out infinite}
@keyframes lsw-sig{
  0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1}
  55%    {box-shadow:0 0 0 3px transparent;opacity:.55}
}

/* Usporedba: red se "prebaci" na LumenSpark stranu */
.lsw-cmp-rows li{transition:background var(--motion-fast)}
.lsw-cmp-rows li:hover{background:var(--lsw-surface)}
.lsw-cmp-rows li span,
.lsw-cmp-rows li b::before{transition:opacity var(--motion-fast),transform var(--motion-fast) var(--motion-ease)}
.lsw-cmp-rows li:hover span{opacity:.5}
.lsw-cmp-rows li:hover b::before{transform:scale(1.5)}

/* Tabovi preglednika: broj se pali prije nego se tab odabere */
.lsw-xp-tab .lsw-xp-n{transition:color var(--motion-fast)}
.lsw-xp-tab:hover .lsw-xp-n{color:var(--lsw-accent)}

/* Footer: crtica izlazi ispred poveznice */
.lsw-foot-col a{position:relative;transition:color var(--motion-fast),padding-left var(--motion-fast) var(--motion-ease)}
.lsw-foot-col a::before{
  content:'';position:absolute;left:0;top:50%;width:0;height:1px;
  background:var(--lsw-accent);
  transition:width var(--motion-fast) var(--motion-ease);
}
.lsw-foot-col a:hover{padding-left:16px}
.lsw-foot-col a:hover::before{width:9px}

/* Primarni gumb: sjaj se skupi pri pritisku (taktilna povratna informacija) */
.lsw-btn-primary:active{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 3px 10px -8px rgba(204,120,92,.9)}

/* Kartice konektora: oznaka poprimi akcent */
.lsw-conn-list li .lsw-conn-mark{transition:background var(--motion-fast),color var(--motion-fast)}
.lsw-conn-list li:hover .lsw-conn-mark{background:var(--lsw-accent-soft);color:var(--lsw-accent-deep)}