:root {
  --motion-duration-fast: 140ms;
  --motion-duration-standard: 240ms;
  --motion-duration-emphasis: 360ms;
  --motion-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

.cc-motion-active {
  will-change: transform, opacity;
}

.cc-motion-ready :is(
  button,
  [role="button"],
  .agenda-card,
  .calendar-day-event,
  .calendar-pill
) {
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .cc-motion-ready :is(
    .stat,
    .home-stat-action
  ):hover {
    translate: 0 -1px;
  }
}

.cc-motion-ready :is(
  button,
  [role="button"],
  .stat,
  .home-stat-action
):active {
  scale: 0.985;
}

.cc-motion-ready :is(
  button,
  [role="button"],
  .stat,
  .home-stat-action
):focus-visible {
  transition: outline-offset var(--motion-duration-fast) var(--motion-ease-standard);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 1ms;
    --motion-duration-standard: 1ms;
    --motion-duration-emphasis: 1ms;
  }

  .cc-motion-active {
    will-change: auto;
  }

  .cc-motion-ready :is(
    button,
    [role="button"],
    .stat,
    .home-stat-action
  ) {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .cc-motion-ready :is(
    button,
    [role="button"],
    .stat,
    .home-stat-action
  ):hover,
  .cc-motion-ready :is(
    button,
    [role="button"],
    .stat,
    .home-stat-action
  ):active {
    translate: none;
    scale: none;
  }
}