:root {
  --pageloader-bg: #0b0a09;
  --pageloader-glow-primary: rgba(255, 193, 79, 0.22);
  --pageloader-glow-secondary: rgba(255, 167, 211, 0.18);
  --pageloader-logo-size: clamp(140px, 18vw, 240px);
  --pageloader-bar-width: clamp(140px, 20vw, 240px);
}

html.is-loading,
html.is-loading body {
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

html.is-loading .page_wrap {
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
}

.page_loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 193, 79, 0.15), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(255, 167, 211, 0.18), transparent 52%),
    radial-gradient(circle at 50% 80%, rgba(255, 180, 145, 0.12), transparent 60%),
    var(--pageloader-bg);
  color: var(--text-alternate);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.is-loading .page_loader,
.page_loader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.page_loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page_loader-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  z-index: 1;
}

.page_loader-glow {
  position: absolute;
  width: clamp(220px, 30vw, 420px);
  height: clamp(220px, 30vw, 420px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--pageloader-glow-primary), transparent 62%),
    radial-gradient(circle at 60% 60%, var(--pageloader-glow-secondary), transparent 58%);
  filter: blur(28px);
  opacity: 0.85;
  z-index: -1;
}

.page_loader-logo {
  width: var(--pageloader-logo-size);
  height: auto;
  display: block;
  filter: invert(1) drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}

.page_loader-bar {
  width: var(--pageloader-bar-width);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 193, 79, 0), rgba(255, 193, 79, 0.9), rgba(255, 167, 211, 0.9), rgba(255, 167, 211, 0));
  transform-origin: center;
}

.page_loader-fact {
  max-width: 40ch;
  text-align: center;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0.9;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .page_loader-inner {
    gap: 1rem;
  }

  .page_loader-glow {
    filter: blur(22px);
  }
}