/* =========================
   LOADER
========================= */

#loader{
  position:fixed;
  inset:0;
  background:#ffffff;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  transition:opacity .6s ease, visibility .6s ease;
}

#loader.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loader-mark{
  display:flex;
  align-items:center;
  justify-content:center;
}

.loader-logo{
  position:relative;
  width:420px;
  height:420px;
}

.loader-logo-base{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  opacity:0.18;
  filter:grayscale(1);
}

.loader-logo-fill{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, #d7ea7a 0%, #9fc63a 45%, #1f3d2b 100%);
  -webkit-mask-image:url("../images/stock/loader.png");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image:url("../images/stock/loader.png");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
  -webkit-clip-path:inset(100% 0 0 0);
  clip-path:inset(100% 0 0 0);
  animation:logo-fill 2.4s ease-in-out infinite;
}

@keyframes logo-fill{
  0%{
    -webkit-clip-path:inset(100% 0 0 0);
    clip-path:inset(100% 0 0 0);
  }
  55%{
    -webkit-clip-path:inset(0 0 0 0);
    clip-path:inset(0 0 0 0);
  }
  100%{
    -webkit-clip-path:inset(0 0 100% 0);
    clip-path:inset(0 0 100% 0);
  }
}

@media (max-width:900px){
  #loader{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .loader-logo-fill{
    animation:none;
    -webkit-clip-path:inset(0 0 0 0);
    clip-path:inset(0 0 0 0);
  }
}

@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  .loader-logo-fill{
    display:none;
  }

  .loader-logo-base{
    opacity:1;
    filter:none;
  }
}