:root {
  --loader-bg: rgba(249, 250, 251, 0.86);
  --loader-accent: #06b6d4;
  --loader-accent-2: #0ea5e9;
  --loader-track: rgba(113, 113, 122, 0.24);
}

.dark {
  --loader-bg: rgba(9, 9, 11, 0.9);
  --loader-track: rgba(244, 244, 245, 0.12);
}

.app-infinity-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--loader-bg);
  backdrop-filter: blur(6px);
  z-index: 9999;
  opacity: 1;
  transform: translateZ(0);
  transition: opacity 180ms ease-out;
}

.app-infinity-loader__icon {
  width: 96px;
  height: 48px;
  filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.45));
  animation: loaderFadeIn 0.15s ease-out;
  backface-visibility: hidden;
  opacity: 1;
  transition:
    opacity 180ms ease-out,
    transform 180ms ease-out;
}

.app-infinity-loader--exiting {
  opacity: 0;
  pointer-events: none;
}

.app-infinity-loader--exiting .app-infinity-loader__icon {
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
}

.app-infinity-loader__track {
  stroke: var(--loader-track);
}

.app-infinity-loader__path {
  stroke-dasharray: 48 118;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: infinityFlow 1.8s linear infinite;
  will-change: stroke-dashoffset;
}

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

@keyframes infinityFlow {
  0% { stroke-dashoffset: 0; opacity: 0.65; }
  45% { opacity: 1; }
  100% { stroke-dashoffset: -166; opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  .app-infinity-loader__icon,
  .app-infinity-loader__path {
    animation: none !important;
    transition: none !important;
  }

  .app-infinity-loader__path {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}