/*
 * Header wordmark: "Standard Notional Protocol" at the top of the page; once
 * scrolled (nav.js adds .is-compact) or on hover, the words
 * blur out one after another, the mark flashes, and "SNP" resolves in.
 * Both labels share one grid cell, so the hover area keeps the long name's
 * width and never shrinks out from under the pointer.
 */
.logo__words { display: grid; }
.logo__words > * { grid-area: 1 / 1; white-space: nowrap; }

.logo__full > span {
  display: inline-block;
  transition: opacity 0.35s, filter 0.35s, translate 0.35s;
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* coming back: wait for the ticker to leave, then return left to right */
  transition-delay: calc(140ms + var(--i) * 50ms);
}
.logo__ticker {
  opacity: 0;
  filter: blur(8px);
  translate: 0 4px;
  transition: opacity 0.4s, filter 0.4s, translate 0.4s;
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.logo:is(:hover, :focus-visible, .is-compact) .logo__full > span {
  opacity: 0;
  filter: blur(8px);
  translate: 0 -4px;
  transition-delay: calc(var(--i) * 50ms);
}
.logo:is(:hover, :focus-visible, .is-compact) .logo__ticker {
  opacity: 1;
  filter: blur(0);
  translate: 0 0;
  transition-delay: 200ms;
}
.logo:is(:hover, :focus-visible, .is-compact) .logo__mark { animation: mark-flash 0.9s ease-out; }
@keyframes mark-flash {
  30% { filter: brightness(1.4) drop-shadow(0 0 6px rgb(255 255 255 / 0.55)); }
}

/* not enough room for the full name beside the nav: show the ticker only */
@media (max-width: 1100px) {
  .logo__full { display: none; }
  .logo__ticker { opacity: 1; filter: none; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .logo__full > span, .logo__ticker { transition: opacity 0.2s; filter: none !important; translate: none !important; }
  .logo .logo__mark { animation: none !important; }
}