/* Shared card feedback; individual transforms preserve the existing scroll reveals. */
:is(.card, .aside-card, .action-tile, .value, .board-card, .impact-panel, .quote-card, .program-feature, .status-item, .directory-empty, .reds-gallery__item, .reds-feature__photo) {
  translate: 0 0;
  rotate: 0deg;
  transform-origin: 50% 55%;
  transition: opacity .7s ease, transform .7s ease, translate .32s ease-out, rotate .32s ease-out, box-shadow .25s ease, border-color .25s ease, background-color .2s ease;
}

:is(.card, .aside-card, .action-tile, .value, .board-card, .impact-panel, .quote-card, .program-feature, .status-item, .directory-empty, .reds-gallery__item, .reds-feature__photo):focus-within {
  border-color: var(--pink);
  box-shadow: 0 18px 38px rgba(95, 25, 143, .18);
}

@media (any-hover: hover) and (any-pointer: fine) {
  :is(.card, .aside-card, .action-tile, .value, .board-card, .impact-panel, .quote-card, .program-feature, .status-item, .directory-empty, .reds-gallery__item, .reds-feature__photo):hover {
    border-color: rgba(123, 39, 184, .38);
    box-shadow: 0 22px 44px rgba(95, 25, 143, .2);
  }
}

@media (prefers-reduced-motion: no-preference) and (any-hover: hover) and (any-pointer: fine) {
  :is(.card, .aside-card, .action-tile, .value, .board-card, .impact-panel, .quote-card, .program-feature, .status-item, .directory-empty, .reds-gallery__item, .reds-feature__photo):is(:hover, :focus-within) {
    translate: 0 -8px;
    animation: foundation-card-bobble 1.6s ease-in-out infinite;
  }
  /* Hold the card steady while a visitor targets a control or navigates by keyboard. */
  :is(.card, .aside-card, .value, .board-card, .impact-panel, .quote-card, .program-feature, .status-item, .directory-empty, .reds-gallery__item):has(:is(a, button, summary, input, select, textarea):hover) {
    animation-play-state: paused;
  }
  :is(.card, .aside-card, .action-tile, .value, .board-card, .impact-panel, .quote-card, .program-feature, .status-item, .directory-empty, .reds-gallery__item, .reds-feature__photo):focus-within {
    animation: none;
    translate: 0 -8px;
  }
}

@keyframes foundation-card-bobble {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  30% { translate: 0 -16px; rotate: -1deg; }
  60% { translate: 0 -5px; rotate: .7deg; }
  80% { translate: 0 -11px; rotate: -.35deg; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.card, .aside-card, .action-tile, .value, .board-card, .impact-panel, .quote-card, .program-feature, .status-item, .directory-empty, .reds-gallery__item, .reds-feature__photo) {
    translate: none;
    rotate: none;
    animation: none !important;
  }
}