/* space.css */

#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  background:
    radial-gradient(ellipse 65% 55% at 22% 32%, rgba(163, 210, 232, 0.22) 0%, transparent 100%),
    radial-gradient(ellipse 55% 45% at 78% 68%, rgba(185, 228, 208, 0.18) 0%, transparent 100%),
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(230, 244, 252, 0.45) 0%, transparent 100%),
    linear-gradient(150deg, #f3f8fe 0%, #e8f3f8 35%, #edf6f2 68%, #f6f9fe 100%);
}

#viewport::before,
#viewport::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

#viewport::before {
  width: 55vw;
  height: 38vh;
  background: radial-gradient(ellipse, rgba(163, 216, 235, 0.18) 0%, transparent 70%);
  top: 15%;
  left: 8%;
  animation: lightdrift 22s ease-in-out infinite alternate;
}

#viewport::after {
  width: 48vw;
  height: 42vh;
  background: radial-gradient(ellipse, rgba(188, 230, 212, 0.14) 0%, transparent 70%);
  bottom: 12%;
  right: 10%;
  animation: lightdrift2 28s ease-in-out infinite alternate;
}

@keyframes lightdrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(6vw, -4vh) scale(1.12); }
  100% { transform: translate(-3vw, 5vh) scale(0.93); }
}

@keyframes lightdrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-7vw, 3vh) scale(1.08); }
  100% { transform: translate(4vw, -6vh) scale(0.96); }
}

#viewport.dragging {
  cursor: grabbing;
}

#connections {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

#connections path {
  stroke: rgba(100, 160, 200, 0.35);
  stroke-width: 1px;
}

#space {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 1;
}