/* =========================================================================
   MHP — pokret (brand kit v1.1)
   Izvor: MHP Brand Guidelines v2.4, poglavlje 07 „Pokret”. Odluke M1–M7 (3. 10. 2026.).
   Ovisi o: tokens.css, components.css. JS: mhp-pokret.js (M2, M3, M4, M6).
   Pravilo: sve što se pomiče ima statičnu verziju — „smanji pokrete” = bez animacije.
   ========================================================================= */

/* M3 · H2 naslovi se otkrivaju po riječima (klasa .mhp-otkrij na naslovu; riječi omata JS) */
.js .mhp-otkrij .mhp-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js .mhp-otkrij .mhp-w > span { display: inline-block; transform: translateY(105%); transition: transform var(--mhp-pokret-otkrivanje) var(--mhp-pokret-krivulja); }
.js .mhp-otkrij.is-vidljivo .mhp-w > span { transform: none; }

/* M4 · „Kako radimo” kao put (omot .mhp-put oko .mhp-koraci; traku i glavu umeće JS) */
.mhp-put { position: relative; }
.mhp-put__traka { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--mhp-crvena); z-index: 2; }
.mhp-put__glava { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; background: var(--mhp-crvena); z-index: 3; transform: translateX(-6px); }
.mhp-put .mhp-korak { transition: opacity .5s var(--mhp-pokret-krivulja); }
.mhp-put .mhp-korak__n { transition: color .4s var(--mhp-pokret-krivulja); }
.js .mhp-put .mhp-korak { opacity: .35; }
.js .mhp-put .mhp-korak.is-upaljen { opacity: 1; }
.js .mhp-put .mhp-korak.is-upaljen .mhp-korak__n { color: var(--mhp-crvena); }

/* M5 · prijelaz između stranica (cross-document View Transitions; preglednici bez podrške učitavaju normalno) */
@view-transition { navigation: auto; }
.mhp-hero .mhp-h1 { view-transition-name: mhp-naslov; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--mhp-pokret-prijelaz); animation-timing-function: var(--mhp-pokret-krivulja); }
::view-transition-group(mhp-naslov) { animation-duration: .6s; animation-timing-function: var(--mhp-pokret-krivulja); }

/* M6 · HUB rezultat se gradi — trake (širinu postavlja mhp-pokret.js / alat) */
.hub-traka { height: 4px; background: var(--hub-rub); border-radius: 2px; overflow: hidden; }
.hub-traka > i { display: block; height: 100%; width: 0; background: var(--hub-plava); }

/* M7 · redovi područja: kvadratić naraste u traku */
.mhp-red h3::before { transition: width var(--mhp-pokret-hover) var(--mhp-pokret-krivulja); }
.mhp-red:hover h3::before, .mhp-red:focus-visible h3::before { width: 26px; }
.mhp-red:hover .mhp-red__str, .mhp-red:focus-visible .mhp-red__str { transform: translateX(8px); }

/* Smanji pokrete — sve statično, sav sadržaj odmah vidljiv */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js .mhp-otkrij .mhp-w > span { transform: none; transition: none; }
  .js .mhp-put .mhp-korak { opacity: 1; }
  .mhp-put__traka, .mhp-put__glava { display: none; }
  .mhp-red h3::before, .mhp-red__str { transition: none; }
}