/* ==========================================================================
   UVODNA ANIMACIJA — tecni metal koji se sliva u logo.
   Ucitava se samo na naslovnoj. Bez JavaScripta se ne prikazuje uopste,
   pa sajt radi normalno i kad skripta zakaze.
   ========================================================================== */
#uvod{display:none}

html[data-uvod] #uvod{
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:999;background:var(--mrak);
  transition:opacity .45s ease;
}
html[data-uvod] body{overflow:hidden}
#uvod.gotov{opacity:0;pointer-events:none}

#uvod-platno{position:absolute;inset:0;width:100%;height:100%;display:block}

/* logo se pojavljuje iz metala; transform-origin je levi gornji ugao
   da bi let do zaglavlja mogao da se racuna iz pravih koordinata */
#uvod-logo{
  position:absolute;top:0;left:0;
  opacity:0;clip-path:inset(0 100% 0 0);
  transform-origin:0 0;will-change:transform,opacity,clip-path;
}
#uvod-logo img{width:100%;height:auto;display:block}

/* odsjaj koji prelazi preko logotipa */
#uvod-sjaj{
  position:absolute;top:0;left:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.78) 50%,transparent 58%);
  mix-blend-mode:overlay;
}

#uvod-preskoci{
  position:absolute;right:22px;bottom:calc(20px + env(safe-area-inset-bottom));
  padding:9px 16px;border:1px solid rgba(236,234,228,.22);border-radius:100px;
  background:none;color:rgba(236,234,228,.6);font:inherit;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;opacity:0;
  transition:opacity .4s ease .9s,color .25s ease,border-color .25s ease;
}
#uvod.spreman #uvod-preskoci{opacity:1}
#uvod-preskoci:hover{color:var(--papir);border-color:rgba(236,234,228,.5)}

/* dok uvod traje sadrzaj miruje; posle se otkrije uobicajenim putem */
html[data-uvod] .nav,
html[data-uvod] main{opacity:0;transition:opacity .5s ease}
html[data-uvod].uvod-gotov .nav,
html[data-uvod].uvod-gotov main{opacity:1}

@media(prefers-reduced-motion:reduce){
  html[data-uvod] #uvod{display:none}
  html[data-uvod] body{overflow:auto}
  html[data-uvod] .nav,html[data-uvod] main{opacity:1}
}