/**
 * Shared visual cue for semantic URL fragment targets.
 * The missing final keyframe intentionally returns each component to its own
 * computed background and shadow instead of assuming a transparent base.
 */
[data-anchor-highlight],
[data-anchor-highlight] > a[name] {
  scroll-margin-top: 64px;
}

.anchor-navigation-highlight {
  animation: anchor-navigation-highlight-flash 2s ease-out;
}

@keyframes anchor-navigation-highlight-flash {
  0% {
    background-color: color-mix(in srgb, var(--theme-accent-color, #999) 22%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent-color, #999) 45%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .anchor-navigation-highlight {
    animation: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent-color, #999) 55%, transparent);
  }
}