.detail-portal {
  --signal-blue: rgb(var(--data-accent-rgb));
}

.detail-portal::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--portal-x);
  top: 50%;
  width: clamp(14rem, 31vw, 31rem);
  aspect-ratio: 1;
  pointer-events: none;
  border: 1px solid rgba(var(--data-accent-rgb), 0.08);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.detail-axis {
  opacity: 0.42;
  background: linear-gradient(
    transparent,
    rgba(var(--data-accent-rgb), 0.16) 22%,
    var(--signal-blue) 50%,
    rgba(var(--data-accent-rgb), 0.16) 78%,
    transparent
  );
  box-shadow: 0 0 1.2rem rgba(var(--data-accent-rgb), 0.12);
}

.detail-axis::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--signal-blue);
  box-shadow: 0 0 1.4rem rgba(var(--data-accent-rgb), 0.8);
  transform: translate(-50%, -50%);
  animation: portal-signal-travel 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
}

.detail-modules button::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, var(--signal-blue), rgba(var(--data-accent-rgb), 0.28) 38%, transparent 82%);
  transform: scaleX(0);
  transform-origin: left;
}

.detail-modules button.active::after {
  opacity: 0.72;
  animation: portal-module-signal 0.68s cubic-bezier(.16, 1, .3, 1) both;
}

.detail-modules button.active span {
  color: var(--signal-blue);
  text-shadow: 0 0 1rem rgba(var(--data-accent-rgb), 0.56);
}

.detail-modules button.active i {
  border-color: var(--signal-blue);
  filter: drop-shadow(0 0 0.35rem rgba(var(--data-accent-rgb), 0.72));
}

@keyframes portal-signal-travel {
  0% {
    top: 8%;
    opacity: 0;
  }
  18%,
  82% {
    opacity: 1;
  }
  100% {
    top: 92%;
    opacity: 0;
  }
}

@keyframes portal-module-signal {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@media (max-width: 760px) {
  .detail-portal::after {
    top: 40%;
    width: min(72vw, 24rem);
  }

  .detail-axis {
    opacity: 0.3;
  }
}