/*
 * Itensity highlight-on-navigate styles
 *
 * Pairs with highlight.js. Brand yellow-green (#c0d62e) inner pulse plus
 * itensity-blue (#1575FB) outer pulse on a floating ring overlay, and a
 * brief scale-bounce on the target element itself.
 */

@keyframes itensity-highlight-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

[data-itensity-highlight] {
  animation: itensity-highlight-bounce 0.6s ease-in-out 3;
  transform-origin: center;
  position: relative;
  z-index: 1;
}

.itensity-highlight-ring {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 8px;
  opacity: 1;
  transition: opacity 0.4s ease-out;
  animation: itensity-highlight-ring-pulse 1.1s ease-out infinite;
}

@keyframes itensity-highlight-ring-pulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(192, 214, 46, 0.95),
      0 0 0 0 rgba(21, 117, 251, 0.55);
  }
  100% {
    box-shadow:
      0 0 0 14px rgba(192, 214, 46, 0),
      0 0 0 28px rgba(21, 117, 251, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-itensity-highlight] {
    animation: none;
  }
  .itensity-highlight-ring {
    animation: none;
    box-shadow: 0 0 0 6px rgba(192, 214, 46, 0.45);
  }
}