@layer components {
@keyframes signal-blink {
  0%, 44% { opacity: 0.25; }
  45%, 100% { opacity: 1; }
}

@keyframes frequency-breathe {
  0%, 100% { transform: scale(0.82); opacity: 0.65; }
  50% { transform: scale(1.08); opacity: 1; }
}

.protocol-visual__pulse i:nth-child(1) {
  animation: signal-blink 1.6s steps(1) infinite;
}

.protocol-visual__pulse i:nth-child(2) {
  animation: signal-blink 1.6s 0.3s steps(1) infinite;
}

.protocol-visual__pulse i:nth-child(3) {
  animation: signal-blink 1.6s 0.6s steps(1) infinite;
}

.dispatch-preview__frequency span {
  animation: frequency-breathe 5s ease-in-out infinite;
  transform-origin: 50% 50%;
}

.dispatch-preview__frequency span:nth-child(even) {
  animation-delay: -2.5s;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  position: absolute;
  bottom: calc(100% + 0.55rem);
  left: 50%;
  z-index: 30;
  width: max-content;
  max-width: 14rem;
  padding: 0.4rem 0.55rem;
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--paper-bright);
  box-shadow: 2px 2px 0 var(--ink);
  content: attr(data-tooltip);
  font-family: var(--mono);
  font-size: 0.6rem;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.3rem);
  transition: opacity 120ms ease, transform 120ms ease;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}

}