.page-loader {
  --loader-bg: radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.08), transparent 45%), #0b172a;
  --loader-panel: rgba(15, 23, 42, 0.82);
  --loader-accent: #8bd1ff;
  --loader-track: rgba(255, 255, 255, 0.2);
  --loader-text: #e2e8f0;
  --loader-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);

  
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--loader-bg);
  color: var(--loader-text);
  transition: opacity 0.35s ease, visibility 0.35s ease;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

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

.page-loader__panel {
  padding: 1.25rem 1.5rem;
  width: 30vw;
  height: 20vw; min-height:180px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
 
  background: var(--loader-panel);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: var(--loader-shadow);
  backdrop-filter: blur(4px);
}

.page-loader__spinner {
  width: 100%;
  height: 80%;
  position: relative;

  display:flex; 
  align-items: center; justify-content: center;
}

.page-loader__spinner svg{
  width: 100%;
  height: auto;
  display: block;
}



.page-loader__ring {
  fill: none;
  stroke: var(--loader-track);
  stroke-width: 10;
}

.page-loader__arc {
  fill: none;
  stroke: var(--loader-accent);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 140 320;
  transform-origin: 50% 50%;
  animation: page-loader-spin 1s linear infinite;
}

.page-loader__svg #g-sun {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: page-loader-sun-rotate 2.4s linear infinite;
}

.page-loader__svg #g-sun .st0 {
  animation: page-loader-sun-glow 1.6s ease-in-out infinite;
}

.page-loader__text {
  margin: 0;
  color: var(--col-text-dark-1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;

  text-align: center;
}

@keyframes page-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes page-loader-sun-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes page-loader-sun-glow {
  0% {
    fill: #ffcc33;
    opacity: 0.85;
  }
  50% {
    fill: #ff8c1a;
    opacity: 1;
  }
  100% {
    fill: #ffcc33;
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader__arc {
    animation-duration: 1.8s;
  }
}

html.page-loader-active,
body.page-loader-active {
  overflow: hidden;
}