html.is-loading,
html.is-loading body {
  background: #0e3527;
}

html.is-loading .site-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid !important;
  place-items: center;
  background: #0e3527;
  opacity: 1;
  visibility: visible;
}

html.is-loading .site-loader > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: vrelkoLoaderIn 0.5s ease-out both;
}

html.is-loading .site-loader img {
  width: clamp(104px, 32vw, 143px);
  height: auto;
  animation: vrelkoLogoPulse 1.1s ease-in-out infinite;
}

html.is-loading .site-loader span {
  width: 72px;
  height: 2px;
  overflow: hidden;
  background: rgba(214, 239, 114, 0.24);
}

html.is-loading .site-loader span::after {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: #c9e36b;
  animation: vrelkoLine 1s ease-in-out infinite;
}

@keyframes vrelkoLoaderIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes vrelkoLogoPulse {
  50% {
    opacity: 0.65;
    transform: scale(0.97);
  }
}

@keyframes vrelkoLine {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-loading .site-loader > div,
  html.is-loading .site-loader img,
  html.is-loading .site-loader span::after {
    animation: none;
  }
}