#page-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  overflow: hidden;
  background-color: #0a0a0f;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#page-loader.page-loader-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#loader-bg {
  position: absolute;
  inset: -40px;
  background: url('/assets/bg-low.webp') center / cover no-repeat;
  filter: blur(18px) brightness(0.4);
  z-index: 0;
}
#page-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 180px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}
#page-loader::after {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.loader-ring {
  position: relative;
  width: 56px;
  height: 56px;
  z-index: 1;
}
.loader-ring svg {
  width: 100%;
  height: 100%;
  animation: loader-rotate 1.4s linear infinite;
}
.loader-ring circle {
  fill: none;
  stroke: url(#loaderGrad);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 80 120;
  animation: loader-dash 1.4s ease-in-out infinite;
}
@keyframes loader-rotate { 100% { transform: rotate(360deg); } }
@keyframes loader-dash {
  0%   { stroke-dasharray: 1 200;   stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 100 200; stroke-dashoffset: -30px; }
  100% { stroke-dasharray: 100 200; stroke-dashoffset: -125px; }
}
.loader-label {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  z-index: 1;
  animation: loader-pulse 2s ease-in-out infinite;
}
@keyframes loader-pulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.7; }
}
.loader-bar-track {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: #0078d74d;
  z-index: 1;
  overflow: hidden;
}
.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0078d7cc, #0078d74d);
  transition: width 0.3s ease;
  box-shadow: 0 0 12px #0078d7cc;
}