/* Top loading progress: fill once left → 100%, then fade out */
:root {
  --site-loader-color: #237804;
}

#languageLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  margin: 0;
  padding: 0;
  background: color-mix(in srgb, var(--site-loader-color) 14%, transparent);
  display: none;
  z-index: 10001;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
}

#languageLoader.is-active {
  display: block;
}

#languageLoader.is-done {
  opacity: 0;
  transition: opacity 0.28s ease;
}

#languageLoader .loader-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#languageLoader .loader-spinner,
#languageLoader .loader-text {
  display: none !important;
}

#languageLoader .site-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--site-loader-color);
  border-radius: 0 1px 1px 0;
  box-shadow: 0 0 6px color-mix(in srgb, var(--site-loader-color) 40%, transparent);
  transform-origin: left center;
  animation: none;
}

#languageLoader.is-active:not(.is-done) .site-progress-bar {
  animation: site-top-fill 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes site-top-fill {
  0% { width: 0%; }
  15% { width: 22%; }
  45% { width: 58%; }
  75% { width: 88%; }
  100% { width: 100%; }
}