:root{
  --green: #c7da3c;                 /* zelena */
  --ease: cubic-bezier(.22,.61,.36,1);

  /* vremenski raspored animacija */
  --down: 700ms;   /* spuštanje zelene */
  --hold: 500ms;   /* koliko stoji full-screen zelena */
  --close: 700ms;  /* spuštanje bijele */
  --fade: 320ms;   /* završni fade preloadera */
}

/* skriveni tekst za čitače ekrana */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* kontejner preko cijelog ekrana */
#preloader{
  position:fixed; inset:0; z-index:999999;
  background: transparent;            /* bijelu daje .wipe--white */
  pointer-events:none; overflow:hidden;
  opacity: 1;                         /* za završni fade */
  will-change: opacity;
}

/* dva „wipe” sloja koje animiramo odozgo prema dolje */
.wipe{
  position:absolute; left:0; right:0; top:0; height:100%;
  transform: translateY(-100%);       /* start: iznad ekrana */
  will-change: transform;
}

/* 1) ZELENA spušta se prva i ispuni ekran, pa stoji */
.wipe--green{
  background: var(--green);
  animation:
    greenDown var(--down) var(--ease) 0s 1 forwards,
    greenHold var(--hold) linear var(--down) 1 forwards;
}

/* 2) BIJELA zatim spušta se i „zatvara” odozgo */
.wipe--white{
  background:#fff;
  animation: whiteClose var(--close) var(--ease) calc(var(--down) + var(--hold)) 1 forwards;
  box-shadow: 0 2px 16px rgba(0,0,0,.08); /* suptilna sjena, mekši osjećaj */
}

/* kad dodamo ovu klasu u JS-u, cijeli preloader izblijedi */
#preloader.is-fading{
  animation: preloaderFade var(--fade) ease forwards;
}

/* zaključavanje scrolla dok je preloader aktivan */
body.preloader-lock{ overflow:hidden; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  #preloader{ display:none !important; }
  .wipe{ animation:none !important; }
  body.preloader-lock{ overflow:auto !important; }
}

/* KEYFRAMES */
@keyframes greenDown{
  from{ transform: translateY(-100%); }
  to  { transform: translateY(0%); }
}

@keyframes greenHold{
  from{ transform: translateY(0%); }
  to  { transform: translateY(0%); }
}

@keyframes whiteClose{
  from{ transform: translateY(-100%); }
  to  { transform: translateY(0%); }
}

@keyframes preloaderFade{
  from{ opacity: 1; }
  to  { opacity: 0; }
}