/* ============================================================================
   AMADO — pokret
   Sve kreće iz stanja "sakriveno" i otključava se klasom .is-in koju dodaje
   IntersectionObserver. Bez JS-a (ili sa reduce-motion) sve je odmah vidljivo.
   ==========================================================================*/

/* Dok JS ne javi da je preuzeo kontrolu, ništa nije sakriveno — no-JS je čitljiv. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-4) var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Varijanta "mask": okvir se ne pomjera niti blijedi — otkriva se sama slika
   ispod njega. Transform ostaje slobodan za paralaksu na unutrašnjem sloju. */
.js [data-reveal="mask"] { opacity: 1; transform: none; transition: none; }
.js [data-reveal="mask"]:not(.is-in) img { --reveal: 100%; --reveal-scale: 1.06; }

/* Naslovi se otkrivaju red po red iza maske, ne fade-om. */
/* overflow: hidden je maska za red — padding sprječava sjecanje repova slova
   i posljednjeg razmaka koji pravi letterspacing. */
.line {
  display: block; overflow: hidden;
  padding-block-end: .14em; margin-block-end: -.14em;
  padding-inline-end: .16em; margin-inline-end: -.16em;
}
.line__inner {
  display: block;
  transform: translateY(108%);
  transition: transform var(--dur-4) var(--ease) calc(var(--i, 0) * 90ms);
}
.js [data-split].is-in .line__inner,
.no-js [data-split] .line__inner { transform: none; }

/* Linija ispred nadnaslova se izvlači kad sekcija uđe u kadar. */
.js .eyebrow { --rule: 0; }
.js .is-in .eyebrow, .js .eyebrow.is-in { --rule: 1; }

/* Paralaksa — JS upisuje --py u piksele. */
.parallax { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }

/* Zaglavlje ulazi zajedno sa herojem, u tri koraka: znak, meni, jezik.
   Animira se sadržaj trake, a ne sama traka — njen transform je rezervisan
   za sakrivanje pri skrolovanju naniže. */
.js .site-header__inner > * { opacity: 0; transform: translateY(-.6rem); }
.js .site-header.is-ready .site-header__inner > * {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.js .site-header.is-ready .site-header__inner > :nth-child(1) { transition-delay: 140ms; }
.js .site-header.is-ready .site-header__inner > :nth-child(2) { transition-delay: 250ms; }
.js .site-header.is-ready .site-header__inner > :nth-child(3) { transition-delay: 360ms; }

/* Vrata (vinska karta i meni) otkrivaju se maskom kao i ostale slike, a
   natpis se podiže tek kad se slika ukaže. */
.js .door[data-reveal="mask"]:not(.is-in) img { clip-path: inset(0 0 100% 0); transform: scale(1.06); }
.js .door[data-reveal="mask"]:not(.is-in) .door__body { opacity: 0; transform: translateY(.75rem); }

/* Hero ulazna sekvenca */
.js .hero__rule    { --rule-y: 0; transition: transform 1.1s var(--ease) 120ms; }
.js .hero__logo,
.js .hero__tagline,
.js .hero__actions,
.js .hero__scroll  { opacity: 0; transform: translateY(1rem); }
.js .hero__logo    { transform: translateY(1.5rem) scale(.985); }

.js .hero.is-ready .hero__rule    { --rule-y: 1; }
.js .hero.is-ready .hero__logo,
.js .hero.is-ready .hero__tagline,
.js .hero.is-ready .hero__actions,
.js .hero.is-ready .hero__scroll {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.js .hero.is-ready .hero__logo     { transition-delay: 380ms; }
.js .hero.is-ready .hero__tagline  { transition-delay: 640ms; }
.js .hero.is-ready .hero__actions  { transition-delay: 820ms; }
.js .hero.is-ready .hero__scroll   { transition-delay: 1100ms; }

/* Poziv na skrolovanje blijedi čim strana krene. Vrijednost --cue upisuje JS
   na .hero; ide na djecu da se ne sudari sa ulaznom animacijom roditelja. */
.js .hero__scroll > * { opacity: var(--cue, 1); }

/* --- Poštovanje sistemske postavke ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .hero__logo, .js .hero__tagline, .js .hero__actions, .js .hero__scroll {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .line__inner { transform: none !important; transition: none !important; }
  .js .eyebrow { --rule: 1; }
  .js .hero__rule { --rule-y: 1; }
  .parallax { transform: none !important; }
  .js .site-header__inner > * { opacity: 1 !important; transform: none !important; }
  .js .door[data-reveal="mask"]:not(.is-in) img { clip-path: none !important; transform: none !important; }
  .js .door[data-reveal="mask"]:not(.is-in) .door__body { opacity: 1 !important; transform: none !important; }
  .js .hero__scroll > * { opacity: 1 !important; }
  .gallery__track { transform: none !important; }
  .hero__media img, .hero__media video { animation: none !important; }
  .hero__scroll i::after { animation: none !important; }
  .frame > img { transition: none !important; clip-path: none !important; transform: none !important; }
}