#journey {
  position: relative;
  overflow: clip;
}

#journey::before {
  content: "";
  position: absolute;
  inset: 18% 0 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 62%, rgba(75, 150, 255, 0.07), transparent 36rem);
}

.cyc-ring {
  --phase-rgb: 114, 203, 255;
  --phase-rgb-soft: 68, 105, 255;
  isolation: isolate;
}

.cyc-cosmos {
  position: absolute;
  inset: -7%;
  width: 114%;
  height: 114%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  mix-blend-mode: screen;
}

.cyc-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68%;
  height: 52%;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(var(--phase-rgb), 0.22) 0%,
    rgba(var(--phase-rgb-soft), 0.09) 42%,
    transparent 72%
  );
  filter: blur(22px);
  opacity: 0.82;
  transition: background 0.8s ease, opacity 0.8s ease;
  animation: journey-breathe 7s ease-in-out infinite;
}

.cyc-ring.is-transitioning .cyc-halo {
  animation: journey-phase-pulse 0.85s ease-out, journey-breathe 7s 0.85s ease-in-out infinite;
}

.cyc-svg { z-index: 2; }
.cyc-base { stroke: rgba(255, 255, 255, 0.075); }
.cyc-spin { stroke: rgba(143, 211, 255, 0.25); }

.cyc-center {
  z-index: 4;
  text-shadow: 0 2px 22px rgba(5, 13, 28, 0.96);
}

.cyc-node { z-index: 5; }

@keyframes journey-breathe {
  0%, 100% { opacity: 0.68; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes journey-phase-pulse {
  0% { opacity: 0.64; transform: translate(-50%, -50%) scale(0.92); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
  100% { opacity: 0.76; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 600px) {
  .cyc-cosmos { inset: -3%; width: 106%; height: 106%; }
  .cyc-halo { width: 62%; height: 48%; filter: blur(16px); }
}

@media (prefers-reduced-motion: reduce) {
  .cyc-halo { animation: none; opacity: 0.78; }
  .cyc-ring.is-transitioning .cyc-halo { animation: none; }
}