@property --resource-interaction-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

.resource-motion-card {
  --resource-card-opacity: 1;
  --resource-card-scale: 1;
  --resource-interaction-scale: 1;
  opacity: var(--resource-card-opacity) !important;
  transform: scale(var(--resource-card-scale)) !important;
  scale: var(--resource-interaction-scale);
  transform-origin: center center;
  transition:
    background-color var(--ct-interaction-duration) var(--ct-interaction-ease),
    scale var(--ct-interaction-duration) var(--ct-interaction-ease) !important;
  will-change: opacity, transform, scale;
}

.resource-motion-card:is(:hover, :focus-visible, :focus-within) {
  --resource-interaction-scale: var(--ct-interaction-hover-scale);
}

.resource-motion-card[aria-current="true"]:is(:hover, :focus-visible, :focus-within) {
  --resource-interaction-scale: var(--ct-interaction-hover-scale);
  background: var(--ct-color-resource-selected-hover);
}

.resource-motion-card:active {
  --resource-interaction-scale: var(--ct-interaction-pressed-scale);
}

@media (prefers-reduced-motion: reduce) {
  .resource-motion-card {
    --resource-card-opacity: 1 !important;
    --resource-card-scale: 1 !important;
    --resource-interaction-scale: 1 !important;
    transition-duration: 0.01ms !important;
    will-change: auto;
  }
}