/* =========================================================
   STUDIO BLOCK 8 · premium motion layer
   Pravilo: CSS nikad trajno ne skriva sadrzaj.
   Ako JS ili GSAP ne ucitaju, sve je vidljivo.
   ========================================================= */

/* 1. Sigurni default: bez JS-a reveal elementi su vidljivi */
.reveal{opacity:1;transform:none;transition:none}
/* 2. S JS-om (bez GSAP-a) vraca se stari IntersectionObserver reveal */
html.js-anim .reveal{opacity:0;transform:translateY(24px);transition:.9s cubic-bezier(.2,.7,.2,1)}
html.js-anim .reveal.in{opacity:1;transform:none}
/* 3. S GSAP-om reveal preuzima GSAP, CSS se mice s puta */
html.anim-on .reveal{opacity:1;transform:none;transition:none}

@media (prefers-reduced-motion: reduce){
  .reveal,html.js-anim .reveal{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Hero: maskirano otkrivanje naslova ---------- */
.w-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.w-in{display:inline-block;will-change:transform}

/* ---------- Traka napretka citanja ---------- */
.scroll-prog{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--nude),var(--nude-deep));
  pointer-events:none;
}

/* ---------- Navigacija na scroll ---------- */
.nav{transition:transform .5s cubic-bezier(.2,.7,.2,1),background .35s ease,box-shadow .35s ease}
.nav.nav--solid{background:rgba(247,243,238,.92);box-shadow:0 10px 30px -24px rgba(60,45,30,.55)}
@media(min-width:921px){ .nav.nav--hidden{transform:translateY(-104%)} }

/* ---------- Slike: parallax unutar okvira ---------- */
html.anim-on .imgblock.has-photo{overflow:hidden}
html.anim-on .imgblock.has-photo img{will-change:transform}

/* ---------- Stacking kartice ---------- */
@media(min-width:1000px){
  html.anim-on .grid.stack{
    display:block;max-width:940px;margin-inline:auto;padding-bottom:6vh;
  }
  html.anim-on .grid.stack > .card{
    position:sticky;top:calc(110px + var(--stack-i,0) * 18px);
    margin-bottom:26vh;
    transform-origin:50% 0%;
    min-height:300px;display:flex;align-items:center;
    box-shadow:0 44px 90px -56px rgba(60,45,30,.6);
    background:var(--white);
  }
  html.anim-on .grid.stack > .card:last-child{margin-bottom:0}
  html.anim-on .grid.stack > .card:hover{transform:none}
  html.anim-on .grid.stack > .card .pad{padding:clamp(38px,4vw,60px);width:100%}
  html.anim-on .grid.stack > .card h3{font-size:clamp(1.9rem,3vw,2.6rem)}
  html.anim-on .grid.stack > .card p{max-width:56ch}
}

/* ---------- Kvartovske plocice ---------- */
.area-tile .area-bg img{transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s}
.area-tile:hover .area-bg img{transform:scale(1.07);filter:brightness(.42)}

/* ---------- Gumbi i kartice: mekši hover ---------- */
.btn{transition:background .3s ease,color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.btn:hover{transform:translateY(-2px)}
.card{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}

/* ---------- Lenis ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}