body {
  margin: 0;
}

.loader-container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 100vh;
  background: #111827;
}

.loader {
  position: relative;
  margin: auto;
  width: 160px;
  height: 160px;
}

.loader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  background-color: #e2e8f0;
  -webkit-mask-image: url('/demo/images/logo/polarlabs.svg');
  mask-image: url('/demo/images/logo/polarlabs.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: logoPulse 2s ease-in-out infinite;
  z-index: 2;
}

.loader-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #06b6d4;
  border-right-color: #8b5cf6;
  animation: ringRotate 1.4s linear infinite;
  z-index: 1;
}

.loader-ring::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-bottom-color: #3b82f6;
  border-left-color: #06b6d4;
  animation: ringRotate 2.2s linear infinite reverse;
}

.loader-ring::after {
  content: '';
  position: absolute;
  top: -16px;
  left: -16px;
  right: -16px;
  bottom: -16px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(6, 182, 212, 0.15) 25%,
    rgba(59, 130, 246, 0.2) 50%,
    rgba(139, 92, 246, 0.15) 75%,
    transparent 100%
  );
  animation: glowSweep 2.4s ease-in-out infinite;
  filter: blur(8px);
}

@keyframes ringRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes logoPulse {
  0%, 100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes glowSweep {
  0%, 100% {
    opacity: 0.4;
    transform: rotate(0deg) scale(1);
  }
  50% {
    opacity: 1;
    transform: rotate(180deg) scale(1.1);
  }
}