/* A measured loop: JavaScript repeats one complete sequence until it covers the viewport twice. */
.signal-stream-track { width: max-content; min-width: 0; gap: 0; padding-right: 0; animation: measured-stream-loop 23s linear infinite; will-change: transform; }
.signal-stream-sequence { display: flex; flex: 0 0 auto; align-items: center; gap: 24px; height: 100%; padding-right: 24px; }
.signal-stream-sequence span { display: inline-block; }.signal-stream-sequence i { flex: 0 0 auto; }
@keyframes measured-stream-loop { to { transform: translateX(calc(var(--stream-distance, 1000px) * -1)); } }

/* Give the widescreen radar a visible heartbeat rather than static decorative rings. */
.radar::before { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(113, 244, 255, .18); border-radius: 50%; box-shadow: 0 0 0 66px rgba(76, 223, 245, .022), 0 0 0 132px rgba(76, 223, 245, .014); animation: radar-heartbeat 4.8s ease-in-out infinite; }
.radar::after { content: ""; position: absolute; top: 11.5%; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #a3ffff; box-shadow: 0 0 0 7px rgba(88, 243, 255, .11), 0 0 24px rgba(88, 243, 255, .92); animation: radar-beacon 1.9s ease-in-out infinite; }
.radar-two::before { animation-delay: -2.2s; }.radar-two::after { width: 5px; height: 5px; margin-left: -2.5px; animation-delay: -.7s; }
@keyframes radar-heartbeat { 50% { transform: scale(1.06); opacity: .36; } }
@keyframes radar-beacon { 50% { transform: scale(1.8); opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .signal-stream-track, .radar::before, .radar::after { animation: none; }.signal-stream-track { transform: none; } }