:root {
  --sigma-nova-start-y: 15dvh;
  --sigma-nova-end-y: 69dvh;
  --sigma-nova-checkpoint-position: 47%;
  --sigma-nova-launch-delay: 110ms;
  --sigma-nova-leg1-duration: 650ms;
  --sigma-nova-leg2-duration: 540ms;
  --sigma-nova-fade-duration: 260ms;
  --sigma-nova-core: #f7fffc;
  --sigma-nova-gem: #30efb5;
  --sigma-nova-metal: #c8d2d4;
  --sigma-nova-halo: rgba(40, 239, 181, .34);
  --sigma-nova-halo-soft: rgba(40, 239, 181, .14);
  --sigma-nova-panel: rgba(4, 16, 14, .94);
  --sigma-nova-panel-edge: rgba(180, 230, 216, .34);
  --sigma-nova-error-accent: #ef9b9b;
}

.sigma-nova {
  position: fixed;
  z-index: 18;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.sigma-nova__axis {
  position: absolute;
  left: 50%;
  top: var(--sigma-nova-start-y);
  width: 1px;
  height: calc(var(--sigma-nova-end-y) - var(--sigma-nova-start-y));
  transform: translateX(-50%);
}

.sigma-nova__head,
.sigma-nova__checkpoint,
.sigma-nova__mountain-anchor {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sigma-nova__head {
  top: 0;
  width: 13px;
  height: 13px;
  opacity: 0;
  background: radial-gradient(
    circle,
    #fff 0 18%,
    var(--sigma-nova-core) 19% 30%,
    var(--sigma-nova-metal) 31% 38%,
    var(--sigma-nova-gem) 45% 60%,
    rgba(48, 239, 181, 0) 78%
  );
  box-shadow:
    0 0 6px rgba(255, 255, 255, .96),
    0 0 14px rgba(48, 239, 181, .70),
    0 0 30px rgba(48, 239, 181, .30);
}

.sigma-nova__checkpoint {
  top: var(--sigma-nova-checkpoint-position);
  width: 5px;
  height: 5px;
  opacity: 0;
  border: 1px solid rgba(247,255,252,.76);
  background: rgba(48,239,181,.18);
  box-shadow: 0 0 10px var(--sigma-nova-halo);
}

.sigma-nova__mountain-anchor {
  top: 100%;
  width: 7px;
  height: 7px;
  opacity: 0;
  background: radial-gradient(circle, var(--sigma-nova-core) 0 24%, rgba(48,239,181,.62) 48%, rgba(48,239,181,0) 76%);
  box-shadow: 0 0 10px var(--sigma-nova-halo);
}

.sigma-nova__error {
  position: absolute;
  left: 50%;
  top: var(--sigma-nova-checkpoint-position);
  width: min(82vw, 340px);
  min-height: 112px;
  padding: 16px 16px 14px;
  border: 1px solid var(--sigma-nova-panel-edge);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 30%),
    var(--sigma-nova-panel);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 10px 32px rgba(0,0,0,.38),
    0 0 26px var(--sigma-nova-halo-soft);
  color: #eef7f3;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.06, .12);
  transform-origin: 50% 50%;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

.sigma-nova__error::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, var(--sigma-nova-core), var(--sigma-nova-gem), var(--sigma-nova-core), transparent);
  opacity: .78;
  box-shadow: 0 0 12px var(--sigma-nova-halo);
  transition: opacity 220ms ease;
}

.sigma-nova__error-title {
  position: relative;
  z-index: 1;
  margin: 0 0 7px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
}

.sigma-nova__error-text {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(238,247,243,.76);
  font-size: 13px;
  line-height: 1.42;
}

.sigma-nova__error-mark {
  color: var(--sigma-nova-error-accent);
}

.sigma-nova__error-close {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 88px;
  min-height: 38px;
  margin: 14px 0 0 auto;
  padding: 8px 13px;
  border: 1px solid rgba(199,218,212,.22);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: #eef7f3;
  font: inherit;
  cursor: pointer;
}

.sigma-nova[data-state="launch"] .sigma-nova__head,
.sigma-nova[data-state="to-checkpoint"] .sigma-nova__head,
.sigma-nova[data-state="pending"] .sigma-nova__head,
.sigma-nova[data-state="success"] .sigma-nova__head,
.sigma-nova[data-state="error"] .sigma-nova__head {
  opacity: 1;
}

.sigma-nova[data-state="to-checkpoint"] .sigma-nova__head,
.sigma-nova[data-state="pending"] .sigma-nova__head,
.sigma-nova[data-state="error"] .sigma-nova__head {
  top: var(--sigma-nova-checkpoint-position);
  transition: top var(--sigma-nova-leg1-duration) cubic-bezier(.22,.82,.31,1);
}

.sigma-nova[data-state="pending"] .sigma-nova__checkpoint {
  opacity: 1;
  animation: sigma-nova-checkpoint-breathe 1100ms ease-in-out infinite;
}

.sigma-nova[data-state="success"] .sigma-nova__head {
  top: 100%;
  transition: top var(--sigma-nova-leg2-duration) cubic-bezier(.22,.82,.31,1);
}

.sigma-nova[data-state="success"] .sigma-nova__mountain-anchor {
  opacity: 1;
  transition: opacity 160ms ease calc(var(--sigma-nova-leg2-duration) - 100ms);
}

.sigma-nova[data-state="complete"] .sigma-nova__head,
.sigma-nova[data-state="complete"] .sigma-nova__mountain-anchor {
  opacity: 0;
  transition: opacity var(--sigma-nova-fade-duration) ease;
}

.sigma-nova[data-state="error"] .sigma-nova__head {
  opacity: 0;
  transform: translate(-50%, -50%) scale(2.8);
  transition: opacity 170ms ease, transform 240ms ease;
}

.sigma-nova[data-state="error"] .sigma-nova__checkpoint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(4.2);
  background: rgba(247,255,252,.30);
  box-shadow:
    0 0 10px rgba(247,255,252,.72),
    0 0 30px var(--sigma-nova-halo);
  transition: transform 240ms ease, opacity 140ms linear;
}

.sigma-nova[data-state="error"] .sigma-nova__error {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition:
    transform 360ms cubic-bezier(.18,.82,.26,1),
    opacity 180ms ease,
    visibility 0ms linear;
}

.sigma-nova[data-state="error"] .sigma-nova__error::before {
  opacity: 0;
}

.sigma-nova-lab {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sigma-nova-lab__label {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  color: rgba(231,243,238,.46);
  font-size: 10px;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

.sigma-nova-lab__button {
  min-height: 42px;
  border: 1px solid rgba(166,220,202,.18);
  border-radius: 13px;
  background: rgba(255,255,255,.035);
  color: rgba(239,247,244,.82);
  font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: .035em;
}

@keyframes sigma-nova-checkpoint-breathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 8px var(--sigma-nova-halo);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.7);
    box-shadow: 0 0 14px var(--sigma-nova-halo), 0 0 24px var(--sigma-nova-halo-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sigma-nova-launch-delay: 0ms;
    --sigma-nova-leg1-duration: 80ms;
    --sigma-nova-leg2-duration: 80ms;
    --sigma-nova-fade-duration: 80ms;
  }

  .sigma-nova__head,
  .sigma-nova__checkpoint,
  .sigma-nova__mountain-anchor,
  .sigma-nova__error {
    transition-duration: 80ms !important;
    animation: none !important;
  }
}
