/*
 * ACS motion — reveal, linija-vodic, hero slojevi
 * Autor: D. Svilenkovic
 * Uparuje se sa acs-reveal.js / acs-landing.js / acs-hero.js.
 * Sve skrivanje je iza html.js gate-a: bez JS-a (i za robota) sadrzaj je vidljiv.
 */

/* --acs-ease / --acs-dur-ui / --acs-dur-reveal dolaze iz _tokens.css (jedini izvor).
   Ovde samo motion-lokalna sirina linije. */
:root {
  --acs-line-w: 2px;
}

/* ------------------------------------------------------------------ *
 * 1. Reveal-on-scroll
 * Krije se SAMO kad je JS aktivan (html.js). IO dodaje .in kad element
 * udje u viewport. 0% overshoot, jedna osa translacije.
 * ------------------------------------------------------------------ */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--acs-dur-reveal) var(--acs-ease),
    transform var(--acs-dur-reveal) var(--acs-ease);
  will-change: opacity, transform;
}

html.js .reveal--up { transform: translateY(40px); }
html.js .reveal--left { transform: translateX(-32px); }
html.js .reveal--right { transform: translateX(32px); }
html.js .reveal--fade { transform: none; }

html.js .reveal.in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Blago stagger-ovanje kad su deca u istom kontejneru markirana. */
html.js .reveal[data-reveal-delay="1"] { transition-delay: 80ms; }
html.js .reveal[data-reveal-delay="2"] { transition-delay: 160ms; }
html.js .reveal[data-reveal-delay="3"] { transition-delay: 240ms; }

/* ------------------------------------------------------------------ *
 * 2. Guiding line — Mod A (landing, >=1024px)
 * SVG overlay unutar <main>; putanju i draw radi acs-landing.js.
 * NIKAD vector-effect:non-scaling-stroke (gazi pathLength u Chromiumu).
 * ------------------------------------------------------------------ */
main { position: relative; } /* sidriste za absolute overlay */

.acs-guiding-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--acs-z-line, 5); /* iza sadrzaja sekcija, iznad pozadine */
  overflow: visible;
  display: none;         /* aktivira ga JS tek na >=1024 + acs-motion-full */
}

.acs-motion-full .acs-guiding-line[data-guiding-line] { display: block; }

/* Sam trag linije: JS animira stroke-dashoffset preko ScrollTrigger scrub. */
.acs-guiding-line__path {
  fill: none;
  stroke: url(#acs-line-gradient);
  stroke-width: var(--acs-line-w);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Suptilan cijan glow ispod glavne linije — bez pulsa. */
.acs-guiding-line__glow {
  fill: none;
  stroke: var(--acs-cyan);
  stroke-width: 6px;
  stroke-linecap: round;
  opacity: .14;
  filter: blur(3px);
}

/* Cvorovi na sidristima sekcija. Ugase se dok linija ne stigne. */
.acs-guiding-line__node {
  fill: var(--acs-n-0);
  stroke: var(--acs-blue);
  stroke-width: 2px;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.4);
  transition:
    opacity var(--acs-dur-ui) var(--acs-ease),
    transform var(--acs-dur-ui) var(--acs-ease);
}
.acs-guiding-line__node.is-on {
  opacity: 1;
  transform: scale(1);
}

/* Strelica-terminus u finalni CTA. */
.acs-guiding-line__arrow {
  fill: var(--acs-cyan);
  opacity: 0;
  transition: opacity var(--acs-dur-ui) var(--acs-ease);
}
.acs-guiding-line__arrow.is-on { opacity: 1; }

[data-theme="dark"] .acs-guiding-line__node {
  fill: var(--acs-graphite);
  stroke: var(--acs-blue-dark);
}

/* ------------------------------------------------------------------ *
 * 3. Guiding line — Mod B (commerce + mobilni)
 * Fiksna nit uz levi rub, puni se skrolom. Native scroll-timeline;
 * fallback = statична puna nit. Bez JS listenera (cuva INP).
 * Tema ubaci <div class="acs-progress-thread"> na .acs-motion-lite.
 * ------------------------------------------------------------------ */
.acs-progress-thread {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--acs-line-w);
  height: 100vh;
  z-index: var(--acs-z-line, 5); /* nit ispod headera/CTA */
  pointer-events: none;
  background: var(--acs-n-3);
}

.acs-progress-thread::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 100%;
  transform-origin: top;
  background: linear-gradient(180deg, var(--acs-blue), var(--acs-cyan));
  /* Fallback (nema scroll-timeline): puna nit. */
  transform: scaleY(1);
}

/* Samo na motion-lite modu prikazujemo nit (landing koristi Mod A). */
.acs-motion-full .acs-progress-thread { display: none; }

@supports (animation-timeline: scroll()) {
  .acs-progress-thread::before {
    transform: scaleY(0);
    animation: acs-thread-fill linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes acs-thread-fill {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
  }
}

/* ------------------------------------------------------------------ *
 * 4. Hero slojevi (samo Home)
 * Poster je LCP i UVEK vidljiv dok canvas ne preuzme. Canvas fade-uje
 * preko postera tek kad scena javi 'ready' (JS dodaje .is-ready).
 * ------------------------------------------------------------------ */
#acs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.acs-hero__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Kad je hero apsolutni background iza teksta, poster puni kontejner. */
#acs-hero .acs-hero__poster,
#acs-hero #acs-hero-canvas {
  position: absolute;
  inset: 0;
}

#acs-hero-canvas {
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--acs-ease);
}

/* JS postavi .is-ready na #acs-hero kad OGL scena krene. */
#acs-hero.is-ready #acs-hero-canvas { opacity: 1; }

/* Slojevitost heroja (media/poster/canvas/scrim/inner) vodi acs-theme.css
   (.acs-hero__inner ima z-index:3). NE koristimo #acs-hero > :not(...) jer taj
   selektor pogadja i .acs-hero__media wrapper i obara ga na position:relative
   (kolaps visine → poster 0px). */

/* ------------------------------------------------------------------ *
 * 5. prefers-reduced-motion — sve staticno
 * Reveal odmah vidljiv, linija bez animacije, hero ostaje poster.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal--up,
  html.js .reveal--left,
  html.js .reveal--right,
  html.js .reveal--fade {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .acs-guiding-line__node,
  .acs-guiding-line__arrow { transition: none; }

  #acs-hero-canvas { transition: none; }

  .acs-progress-thread::before {
    animation: none;
    transform: scaleY(1);
  }
}