.section-transition {
  position: relative;
  z-index: 8;
  height: 0;
  pointer-events: none;
}

.section-transition::before,
.section-transition::after {
  content: "";
  position: absolute;
  top: -1px;
  width: calc(50% - 25px);
  height: 1px;
}

.section-transition::before {
  right: calc(50% + 25px);
  background: linear-gradient(90deg, transparent, rgba(57, 184, 236, 0.18) 35%, rgba(57, 184, 236, 0.9));
}

.section-transition::after {
  left: calc(50% + 25px);
  background: linear-gradient(90deg, rgba(57, 184, 236, 0.9), rgba(57, 184, 236, 0.18) 65%, transparent);
}

.section-transition span {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: #031722;
  border: 1px solid var(--blue2);
  box-shadow:
    0 0 0 5px rgba(30, 167, 232, 0.07),
    0 0 24px rgba(30, 167, 232, 0.4);
  transform: translateX(-50%) rotate(45deg);
}

.section-transition span::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--blue2);
  box-shadow: 0 0 10px rgba(57, 184, 236, 0.85);
}

@media (max-width: 640px) {
  .section-transition::before,
  .section-transition::after {
    width: calc(50% - 20px);
  }

  .section-transition::before {
    right: calc(50% + 20px);
  }

  .section-transition::after {
    left: calc(50% + 20px);
  }

  .section-transition span {
    top: -6px;
    width: 12px;
    height: 12px;
  }

  .section-transition span::before {
    inset: 3px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .section-transition span::before {
    animation: section-node-pulse 3.2s ease-in-out infinite;
  }
}

@keyframes section-node-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}