/* =========================================================================
   section-handoff.css — primopredaja sekcija na skrolu
   Uz section-handoff.js.

   Lanac sekcija: 02 → 03 → 04. Svaka se pri odlasku prikuje za ekran pa
   povuče u dubinu (smanji se i zakrene), dok sljedeća naslanja preko nje i
   ispravlja se u ravan ekran. Vrijednosti su iz predloška: 1 → 0.8 skaliranje
   i 0 → −5° za onu koja odlazi, 0.8 → 1 i +5° → 0 za onu koja dolazi.

   Srednja sekcija radi oboje — prvo dolazi, kasnije odlazi — pa CSS ne dijeli
   „ulaznu" i „izlaznu" klasu. Sve pokreću --ho-s / --ho-r koje upisuje JS.
   ========================================================================= */

.dpk-ho{
  transform-origin:50% 50%;
  transform:scale(var(--ho-s,1)) rotate(var(--ho-r,0deg));
  border-radius:var(--ho-rad,0px);
  box-shadow:var(--ho-sh,none);
}

/* NEGATIVAN top, ne bottom:0. `bottom` prikiva element koji NAILAZI odozdo i
   pušta ga čim krene gore — a ovdje treba obrnuto: sekcija mora ostati stajati
   dok sljedeća prelazi preko nje. Za element viši od ekrana to daje
   top = visina ekrana − visina sekcije (dakle negativno), pa se prikuje tačno
   kad mu donja ivica dođe na dno ekrana. Vrijednost mjeri JS.

   !important jer sekcija 02 nosi position:relative u inline stilu, a inline
   stil inače pobjeđuje tablicu stilova.

   Bez z-indexa namjerno: sve sekcije su pozicionirane s z-index:auto, pa se
   crtaju redom iz dokumenta — svaka sljedeća preko prethodne, a podnožje
   preko svih. Čim se ovdje upiše broj, prikovana sekcija propline iznad
   podnožja. */
.dpk-ho[data-ho-pin]{position:sticky!important;top:var(--ho-top,0px)}

/* Prikivanje se PUŠTA čim primopredaja završi. Sticky vrijedi do kraja svog
   roditelja, a to je <main> — dakle i preko sekcije 04 i preko podnožja. Kako
   između sekcije 04 i podnožja postoji šav od ~28px, kroz njega je virila
   prikovana sekcija 02 („Izdvojeni stanovi") i vidjela se kao svijetla traka.
   Puštanjem se vraća u svoj tok (visoko iznad ekrana) pa nema šta procuriti.
   U tom trenutku je sekcija 03 već preko cijelog ekrana, tako da se prelaz ne
   vidi; sticky ionako zauzima svoje mjesto u toku, pa nema ni pomaka skrola. */
.dpk-ho[data-ho-pin].is-done{position:relative!important;top:auto}

/* will-change i rezanje uglova samo dok primopredaja traje: trajni
   overflow:hidden bi odsjekao padajući birač stana u sekciji 04, a trajni
   will-change drži tri velike sekcije u kompozitoru bez potrebe. */
.dpk-ho.is-live{will-change:transform;overflow:hidden}

/* Zakret otkriva uglove; iza njih mora stajati boja objekta, a ne bjelina. */
.dpk-ho-host{background:#0B1F33}

@media (prefers-reduced-motion:reduce){
  .dpk-ho{position:relative!important;top:auto;transform:none;border-radius:0;box-shadow:none}
  .dpk-ho.is-live{overflow:visible}
}