:root {
  --sigma-orbit-size: clamp(156px, 44vw, 208px);
  --sigma-orbit-emerge-duration: 340ms;
  --sigma-orbit-rotate-duration: 720ms;
  --sigma-orbit-settle-duration: 260ms;
  --sigma-orbit-dissolve-duration: 360ms;
  --sigma-orbit-angle: 0deg;
}

.sigma-orbit {
  position: absolute;
  left: 50%;
  top: var(--sigma-nova-checkpoint-position);
  width: var(--sigma-orbit-size);
  aspect-ratio: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.88);
  filter: blur(3px) brightness(.72);
  will-change: opacity, transform, filter;
}

.sigma-orbit__disc {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transform: rotate(var(--sigma-orbit-angle));
  transform-origin: 50% 50%;
  filter:
    drop-shadow(0 0 6px rgba(247, 255, 252, .34))
    drop-shadow(0 0 14px rgba(48, 239, 181, .18));
  will-change: transform, filter;
}

.sigma-orbit[data-state="emerging"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0) brightness(1.06);
  transition:
    opacity var(--sigma-orbit-emerge-duration) ease,
    transform var(--sigma-orbit-emerge-duration) cubic-bezier(.18, .82, .26, 1),
    filter var(--sigma-orbit-emerge-duration) ease,
    visibility 0ms linear;
}

.sigma-orbit[data-state="visible"],
.sigma-orbit[data-state="rotating"],
.sigma-orbit[data-state="settling"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0) brightness(1);
}

.sigma-orbit[data-state="rotating"] .sigma-orbit__disc {
  transform: rotate(var(--sigma-orbit-angle));
  transition:
    transform var(--sigma-orbit-rotate-duration)
    cubic-bezier(.22, .78, .28, 1);
}

.sigma-orbit[data-state="settling"] .sigma-orbit__disc {
  filter:
    drop-shadow(0 0 8px rgba(247, 255, 252, .42))
    drop-shadow(0 0 18px rgba(48, 239, 181, .24));
  transition:
    filter var(--sigma-orbit-settle-duration) ease;
}

.sigma-orbit[data-state="dissolving"] {
  opacity: 0;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1.035);
  filter: blur(2px) brightness(1.12);
  transition:
    opacity var(--sigma-orbit-dissolve-duration) ease,
    transform var(--sigma-orbit-dissolve-duration) ease,
    filter var(--sigma-orbit-dissolve-duration) ease;
}

.sigma-orbit[data-state="hidden"] {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sigma-orbit-emerge-duration: 80ms;
    --sigma-orbit-rotate-duration: 80ms;
    --sigma-orbit-settle-duration: 80ms;
    --sigma-orbit-dissolve-duration: 80ms;
  }

  .sigma-orbit,
  .sigma-orbit__disc {
    transition-duration: 80ms !important;
  }
}