/****************************************
*       ANIMATION LOADING               *
*****************************************/
html {
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

:root {
  --preloader-overlay-light: rgb(255 255 255 / 0.38);

  --preloader-overlay-dark: #070708;

  --preloader-glass-border-light: rgb(255 255 255 / 0.52);

  --preloader-glass-shadow-light: 0 18px 45px rgb(17 24 39 / 0.18);

  --preloader-glass-shadow-dark: 0 16px 42px rgb(0 0 0 / 0.55);

  --preloader-text-light: #182136;

  --preloader-text-dark: #f3f4f8;
}

#preloader {
  position: fixed;
  inset: 0;
  background: var(--preloader-overlay-light);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--preloader-glass-border-light);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35);
  z-index: 9999;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

body.darkmode #preloader {
  background: var(--preloader-overlay-dark);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: var(--preloader-glass-shadow-dark);
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loader_ {
  width: 64px;
  height: 64px;
  border: 4px solid rgb(255 255 255 / 0.2);
  border-radius: 50%;
  border-color: #ff725e #ffb86f #6dd2a6 #5ca9ff;
  box-shadow: 0 12px 30px rgb(17 24 39 / 0.14);
  animation: spin 0.9s linear infinite;
}

body.darkmode .loader_ {
  border: 4px solid rgb(255 255 255 / 0.22);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.5);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#preloader-text {
  color: var(--preloader-text-light);
  font-family: Poppins, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.darkmode #preloader-text {
  color: var(--preloader-text-dark);
}

#preloader-bar {
  width: 140px;
  height: 2px;
  background: rgb(0 0 0 / 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

body.darkmode #preloader-bar {
  background: rgb(255 255 255 / 0.12);
}

#preloader-bar-fill {
  height: 100%;
  width: 0%;
  background: #f05f40;
  border-radius: 2px;
  animation: bar-fill 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bar-fill {
  0% { width: 0%; }
  60% { width: 75%; }
  85% { width: 92%; }
  100% { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .loader_ {
    animation-duration: 2.4s;
  }
}