:root {
  --loader-bg: rgba(255, 255, 255, 0.6);
  --loader-accent: #06b6d4;
  --loader-accent-2: #0ea5e9;
}

.dark {
  --loader-bg: rgba(9, 9, 11, 0.6);
}

#initial-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(800px circle at 20% 20%, rgba(6, 182, 212, 0.1), transparent 55%),
    radial-gradient(700px circle at 80% 70%, rgba(14, 165, 233, 0.1), transparent 55%),
    var(--loader-bg);
  backdrop-filter: blur(6px);
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.25s ease;
}

#initial-loader.initial-loader--hide {
  opacity: 0;
  pointer-events: none;
}

.initial-loader__icon {
  width: 88px;
  height: 44px;
  filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.45));
  animation: loaderFadeIn 0.15s ease-out;
}

@keyframes loaderFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes infinityFlow {
  0% { stroke-dashoffset: 110; opacity: 0.4; }
  50% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -110; opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .initial-loader__icon {
    animation: none !important;
  }
}