/* HelloSignal logo in the header: the icon, then the wordmark (Hello bold, Signal regular) with a
   signal pulse running through the name every few seconds.
   Kept out of style.css, which is a copy of the design system and gets replaced on updates. */

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.nav-logo-icon { width: 26px; height: 26px; flex-shrink: 0; display: block; }

.nav-logo-word { font-weight: 400; letter-spacing: -0.025em; }

/* the pulse itself, also usable on a word elsewhere (the homepage headline) */
.nav-logo-word,
.signal-text {
  background-image: linear-gradient(90deg,
    var(--h-text) 0%, var(--h-text) 42%,
    var(--accent-text) 47%, #ffffff 50%, var(--accent-text) 53%,
    var(--h-text) 58%, var(--h-text) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: signal-pulse 4.5s ease-in-out infinite;
}
.nav-logo-word b { font-weight: 700; }

/* the pulse crosses the name in the first ~1.4s, then the name rests until the next one */
@keyframes signal-pulse {
  0%   { background-position: 100% 0; }
  30%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-logo-word, .signal-text { animation: none; background-position: 0% 0; }
}