.os-loading-progress,
.os-loading-orb {
  pointer-events: none;
}

html.os-loading-active,
html.os-loading-active body,
html.os-loading-active a,
html.os-loading-active button,
html.os-loading-active input,
html.os-loading-active select,
html.os-loading-active textarea {
  cursor: progress !important;
}

.os-loading-progress {
  position: fixed;
  z-index: 2147483000;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  background:
    radial-gradient(circle at 14% 50%, rgba(126,200,255,0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 47% 45%, rgba(255,255,255,0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 52%, rgba(54,163,255,0.8) 0 1px, transparent 2px),
    linear-gradient(90deg, #061126, #0a74d1 38%, #36a3ff 62%, #071123);
  box-shadow: 0 0 22px rgba(54,163,255,0.42);
}

.os-loading-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 46%;
  transform: translateX(-110%);
  background: linear-gradient(90deg, transparent, rgba(126,200,255,0.96), #ffffff, rgba(54,163,255,0.88), transparent);
  filter: blur(0.5px);
  animation: os-loading-comet 1.1s cubic-bezier(.45,0,.22,1) infinite;
}

.os-loading-orb {
  position: fixed;
  z-index: 2147483001;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(160px, 22vw, 260px);
  aspect-ratio: 420 / 207;
  opacity: 0;
  transform: translate(-50%, -46%) scale(0.96);
  transition: opacity 0.22s ease, transform 0.22s ease;
  filter:
    drop-shadow(0 18px 36px rgba(4,12,28,0.28))
    drop-shadow(0 0 28px rgba(54,163,255,0.3));
  will-change: opacity, transform;
}

.os-loading-eye-media {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
}

html.os-loading-active .os-loading-progress {
  opacity: 1;
  transform: translateY(0);
}

html.os-loading-active .os-loading-orb {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@keyframes os-loading-comet {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(260%); }
}

@media (max-width: 700px) {
  .os-loading-orb {
    width: min(68vw, 230px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .os-loading-progress::before {
    animation-duration: 2.4s;
  }

  .os-loading-orb {
    transition-duration: 0.01ms;
  }
}