/* ═══════════════════════════════════════════════
   POKRET
   Sve što reagira na skrol. Raspored živi u layout.css i sections.css —
   ovdje je isključivo ono što se miče.

   Rječnik ima tri atributa:
     data-paralaks="y" | "x y"   dubina, samo na ukrasnim slojevima
     data-otkrij="dolje|lijevo|desno|zavjesa|udar"
     data-slijed="90"            na spremniku; pogon upisuje --kasnjenje djeci

   Skrivanje prije otkrivanja vrijedi ISKLJUČIVO unutar `.js-reveal`, klase
   koju js/pokret.js dodaje tek kad je siguran da će sadržaj i otkriti. Bez
   toga bi sadržaj bez JS-a ostao nevidljiv — izmjereno u fazi 1.
═══════════════════════════════════════════════ */

/* ── Paralaks slojevi ──────────────────────────
   Skripta pomiče samo transform; will-change daje pregledniku vremena da sloj
   izdvoji u vlastiti sloj kompozitora. */
[data-paralaks] { will-change: transform; }

/* ── Otkrivanje: osnovno stanje ────────────── */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.65,.25,1), transform .7s cubic-bezier(.2,.65,.25,1);
  transition-delay: var(--kasnjenje, 0ms);
}

/* ── Smjerovi ──────────────────────────────────
   Kartica dolazi sa svoje strane umjesto da sve nadođe odozdo. Vodoravni pomak
   je namjerno manji od okvira kartice da red ne izgleda kao da se raspada. */
.js-reveal .reveal[data-otkrij="dolje"]  { transform: translate3d(0, 26px, 0); }
.js-reveal .reveal[data-otkrij="lijevo"] { transform: translate3d(-56px, 26px, 0); }
.js-reveal .reveal[data-otkrij="desno"]  { transform: translate3d(56px, 26px, 0); }

/* Prebačaj pa slijeganje — za brojeve, gdje udar ima smisla. */
.js-reveal .reveal[data-otkrij="udar"] {
  transform: translate3d(0, 30px, 0);
  transition-timing-function: cubic-bezier(.2, 1.5, .4, 1);
}

/* Naizmjenični smjer u mrežama kartica.
   Smjer je prezentacija, pa se određuje ovdje, a ne rednim brojem provučenim
   kroz svaki poziv partiala — tamo bi se prije ili kasnije zaboravio, i to
   tiho. Vrijedi samo unutar spremnika sa slijedom, dakle tamo gdje kartice i
   ulaze jedna za drugom. */
[data-slijed] > .reveal:nth-child(odd)  { --smjer: -56px; }
[data-slijed] > .reveal:nth-child(even) { --smjer: 56px; }
.js-reveal [data-slijed] > .reveal:not([data-otkrij]) {
  transform: translate3d(var(--smjer, 0), 26px, 0);
}

/* ── Bez vodoravnog ulaza na telefonu ──────────
   ±56px po X-u je na desktopu pomak unutar mreže; na telefonu je mreža jedan
   ili dva stupca, pa kartica ulazi IZVAN ekrana i dokument stvarno dobije
   vodoravni skrol dok animacija traje. Izmjereno na 320px: naslovnica,
   vijesti i reprezentacije pomaknu se do 56px u stranu. Uspon po Y ostaje —
   nestaje samo ono što gura preko ruba.

   Blok stoji PRIJE `.is-in` pravila, iz istog razloga koji piše ispod:
   `.js-reveal [data-slijed] > .reveal:not([data-otkrij])` i
   `.js-reveal [data-slijed] > .reveal.is-in` imaju jednaku specifičnost, pa
   odlučuje redoslijed. `--smjer` je zato postavljen kao varijabla, ne kao
   novo pravilo za transform. */
@media (max-width: 920px) {
  [data-slijed] > .reveal:nth-child(odd),
  [data-slijed] > .reveal:nth-child(even) { --smjer: 0px; }

  .js-reveal .reveal[data-otkrij="lijevo"],
  .js-reveal .reveal[data-otkrij="desno"] { transform: translate3d(0, 26px, 0); }
}

/* Mora doći nakon smjerova: ista specifičnost bi inače značila da smjer
   pobijedi i element nikad ne sjedne na mjesto. */
.js-reveal .reveal.is-in,
.js-reveal .reveal[data-otkrij].is-in,
.js-reveal [data-slijed] > .reveal.is-in { opacity: 1; transform: none; }

/* ── Zavjesa ───────────────────────────────────
   Fotografija se ne pojavljuje nego je otkriva ploha koja klizne u stranu, dok
   se sam kadar smiruje iz blagog zuma. Element ostaje vidljiv cijelo vrijeme —
   skriva ga zavjesa, ne prozirnost, pa nema treperenja prije otkrivanja. */
.js-reveal .reveal[data-otkrij="zavjesa"] {
  opacity: 1;
  transform: none;
  position: relative;
  overflow: hidden;
}
/* Zadano je povučena: bez skripte zavjesa ne smije zastrti fotografiju.
   Navlači je tek `.js-reveal`, a `.is-in` je ponovno povuče. */
.zavjesa {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .82s cubic-bezier(.7,0,.2,1);
  transition-delay: var(--kasnjenje, 0ms);
}
.js-reveal .reveal[data-otkrij="zavjesa"] .zavjesa { transform: scaleX(1); }
.js-reveal .reveal[data-otkrij="zavjesa"].is-in .zavjesa { transform: scaleX(0); }

.js-reveal .reveal[data-otkrij="zavjesa"] img {
  transform: scale(1.12);
  transition: transform 1.1s cubic-bezier(.16,.84,.3,1);
  transition-delay: var(--kasnjenje, 0ms);
}
.js-reveal .reveal[data-otkrij="zavjesa"].is-in img { transform: scale(1); }

/* ── Ručna kašnjenja iz prototipa ──────────────
   Dolaze nakon --kasnjenje jer ih predlošci koriste tamo gdje slijed ne vodi
   pogon (hero, tekst-slika). */
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .4s; }

.no-anim .reveal { transition: none; }

/* ── Vrpca rezultata ───────────────────────────
   Smjer prati smjer skrola. Klasu prebacuje pogon; animacija ostaje CSS-ova da
   skripta ne dira nijedno svojstvo osim transforma i opacityja. */
.ticker__track.je-natrag { animation-direction: reverse; }

/* ── Romb u heroju ─────────────────────────────
   Najbrži sloj u heroju. Postoji samo zato da dubina ima gornju granicu —
   bez nečega što putuje osjetno brže od fotografije razlika se ne pročita.

   ZAMKA: pogon upisuje `transform` izravno na sloj s `data-paralaks`, pa bi
   svaki transform iz CSS-a na tom istom elementu bio pobrisan. Rotacija zato
   ide na pseudoelement. Isto vrijedi za svaki budući paralaks sloj. */
.hero__romb {
  position: absolute;
  right: 8%;
  top: 24%;
  width: min(38vw, 420px);
  aspect-ratio: 1;
  pointer-events: none;
}
.hero__romb::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgba(200,16,46,.42);
  transform: rotate(45deg);
}
@media (max-width: 860px) { .hero__romb { display: none; } }

/* ── Ukrasni slojevi ───────────────────────────
   Zaglavlja klubova nemaju pozadinsku fotografiju na koju bi se
   dubina objesila, pa je nosi mrlja. Ista uloga kao fotografija u vijesti i
   selekciji, samo bez sadržaja.

   Zaglavlje igrača namjerno nema sloj: ono je u Ice zoni, a dubina u zone
   čitanja ne ulazi. */
.klub-profil__glava,
.wc { position: relative; overflow: hidden; }

.profil__mrlja,
.wc__mrlja {
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  background: radial-gradient(circle at 26% 38%, rgba(74,144,196,.28), transparent 60%);
}
.wc__romb {
  position: absolute;
  right: 6%;
  top: 18%;
  width: min(30vw, 340px);
  aspect-ratio: 1;
  pointer-events: none;
}
.wc__romb::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255,255,255,.14);
  transform: rotate(45deg);
}
.wc__crte {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    115deg,
    transparent 0 38px,
    rgba(255,255,255,.04) 38px 39px
  );
}
@media (max-width: 860px) { .wc__romb { display: none; } }

/* ── Dijagonalne crte iza statistike ───────────
   Ukras, nikad nositelj sadržaja. Postoje samo u tamnim zonama. */
.sekcija-statistika { position: relative; overflow: hidden; }
.statistika__crte { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.statistika__crta {
  position: absolute;
  height: 1px;
  width: 52%;
  background: linear-gradient(90deg, transparent, rgba(74,144,196,.45), transparent);
}
/* Raspored crta je čista prezentacija, pa stoji ovdje, a ne u predlošku. */
.statistika__crta:nth-child(odd)  { left: -14%; }
.statistika__crta:nth-child(even) { left: 44%; }
.statistika__crta:nth-child(1) { top: 10%; }
.statistika__crta:nth-child(2) { top: 25%; }
.statistika__crta:nth-child(3) { top: 40%; }
.statistika__crta:nth-child(4) { top: 55%; }
.statistika__crta:nth-child(5) { top: 70%; }
.statistika__crta:nth-child(6) { top: 85%; }