@property --jacana-phase {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.jacana-orbital-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #ffffff;
  pointer-events: none;
}

.jacana-orbital-root--subtle {
  opacity: 0.55;
}

.jacana-orbital-stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  perspective: 180vmin;
}

.jacana-orbital-ring {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: jacana-orbital-spin 30s linear infinite;
  --N: 28;
  --R: 42vmin;
  --segLen: 5.1vmin;
  --band: 10.5vmin;
  --skew: -12deg;
  --overlap: 0.18;
  --pinch: 0.35;
  --jacana-phase: 0;
}

.jacana-orbital-root--subtle .jacana-orbital-ring {
  animation-duration: 45s;
  --R: 32vmin;
  --segLen: 3.8vmin;
  --band: 8vmin;
}

.jacana-orbital-seg {
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  width: var(--segLen);
  height: var(--band);
  margin-left: calc(var(--segLen) * -0.5);
  margin-top: calc(var(--band) * -0.5);
  background: linear-gradient(90deg, #b8ecf7, #46b7dd, #2f9fc4);
  animation: jacana-orbital-torsion 12s linear infinite;
  transform:
    rotateY(calc((360deg / 28) * var(--seg-index)))
    translateZ(var(--R))
    rotateZ(90deg)
    scaleY(calc(1 - 0.35 * (1 - cos(calc((var(--seg-index) / 28) * 2turn)))))
    skewX(-12deg)
    scaleX(calc(1 + 0.18))
    rotateY(calc((var(--jacana-phase) * 1turn) + (var(--seg-index) / 28 * 1turn)));
}

.jacana-orbital-seg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: screen;
  opacity: 0.4;
}

.jacana-orbital-star {
  position: absolute;
  border-radius: 9999px;
  animation: jacana-orbital-pulse 3s ease-in-out infinite;
}

.jacana-orbital-star--1 {
  left: 25%;
  top: 25%;
  width: 4px;
  height: 4px;
  background: linear-gradient(90deg, #a8e4f2, #46b7dd);
  opacity: 0.55;
}

.jacana-orbital-star--2 {
  right: 33%;
  top: 33%;
  width: 3px;
  height: 3px;
  background: linear-gradient(90deg, #77c7e2, #2f9fc4);
  opacity: 0.45;
  animation-delay: 1s;
}

.jacana-orbital-star--3 {
  bottom: 25%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: linear-gradient(90deg, #c5eff8, #46b7dd);
  opacity: 0.6;
  animation-delay: 0.5s;
}

.jacana-orbital-star--4 {
  right: 25%;
  top: 50%;
  width: 3px;
  height: 3px;
  background: linear-gradient(90deg, #46b7dd, #1a8aab);
  opacity: 0.35;
  animation-delay: 2s;
}

.jacana-orbital-star--5 {
  left: 33%;
  top: 75%;
  width: 3px;
  height: 3px;
  background: linear-gradient(90deg, #8fd9ec, #46b7dd);
  opacity: 0.5;
  animation-delay: 0.75s;
}

@keyframes jacana-orbital-spin {
  0% {
    transform: rotateX(24deg) rotateY(0turn) rotateZ(0deg);
  }
  50% {
    transform: rotateX(24deg) rotateY(0.5turn) rotateZ(180deg);
  }
  100% {
    transform: rotateX(24deg) rotateY(1turn) rotateZ(360deg);
  }
}

@keyframes jacana-orbital-torsion {
  to {
    --jacana-phase: 1;
  }
}

@keyframes jacana-orbital-pulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.4);
  }
}

@media (max-width: 900px) {
  #jacana-auth-shell-bg,
  #jacana-auth-shell-bg .jacana-orbital-root,
  .jacana-orbital-root {
    overflow: visible;
  }

  .jacana-orbital-stage {
    perspective: 240vmin;
  }

  .jacana-orbital-ring {
    --R: 72vmin;
    --segLen: 6.8vmin;
    --band: 13.5vmin;
  }

  .jacana-orbital-root--subtle .jacana-orbital-ring {
    --R: 58vmin;
    --segLen: 5.8vmin;
    --band: 11.5vmin;
  }
}

.jacana-orbital-root--paused .jacana-orbital-ring,
.jacana-orbital-root--paused .jacana-orbital-seg,
.jacana-orbital-root--paused .jacana-orbital-star,
#jacana-auth-shell-bg[data-active='false'] .jacana-orbital-ring,
#jacana-auth-shell-bg[data-active='false'] .jacana-orbital-seg,
#jacana-auth-shell-bg[data-active='false'] .jacana-orbital-star {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .jacana-orbital-ring,
  .jacana-orbital-seg,
  .jacana-orbital-star {
    animation: none !important;
  }
}