/* Aimlink | Impact: the small pulse (DESIGNDIRECTION 8.6). A ring leaves the thing that was touched, once, because
   something happened. Only transform and opacity on a pseudo-sized element; nothing carries information alone.
   assets/impact.js adds and removes .imp-ring (the ring) and .imp-recoil (the mark pressing in).
   The nav mark's own version is in nav.css (.is-reacting); the landing's is in film.css. */

@layer utilities {
  .imp-ring {
    position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0;
    box-shadow: 0 0 0 1.5px var(--imp-c, var(--accent-strong, var(--color-lime)));
    animation: imp-ring 680ms var(--ease-out) both;
  }
  @keyframes imp-ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(var(--imp-s, 1.3)); } }
  .imp-recoil { animation: imp-recoil 520ms var(--ease-out); }
  @keyframes imp-recoil { 0% { transform: scale(1); } 24% { transform: scale(var(--imp-r, 0.88)); } 100% { transform: scale(1); } }

  /* The footer's ripple answers a shot on its mark */
  .footer-ripple.imp-boost { animation: imp-boost 900ms var(--ease-out); }
  @keyframes imp-boost { 0% { filter: brightness(1); } 20% { filter: brightness(1.9) saturate(1.2); } 100% { filter: brightness(1); } }

  /* Keyboard focus: the ring grows in from a little way out */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    animation: imp-focus 260ms var(--ease-out);
  }
  @keyframes imp-focus { from { outline-offset: 9px; outline-color: transparent; } }
}

@media (prefers-reduced-motion: reduce) {
  .imp-ring { display: none; }
  .imp-recoil, .footer-ripple.imp-boost, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { animation: none; }
}