:root {
  --motion-fast: 160ms;
  --motion-normal: 240ms;
  --motion-enter: 460ms;
  --motion-stagger: 40ms;
  --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
}

.motion-reveal { opacity: 1; transform: none; }
html.motion-ready .motion-reveal:not(.visible) {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}
html.motion-ready .motion-reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--motion-enter) var(--motion-ease-out) var(--motion-delay, 0ms),
    transform var(--motion-enter) var(--motion-ease-out) var(--motion-delay, 0ms);
}

.button,
.store-link,
.download-trigger,
.app-store-badge,
.product-card,
.feature-card,
.faq-card,
.media-panel {
  transition:
    transform var(--motion-normal) var(--motion-ease-out),
    border-color var(--motion-normal) ease,
    box-shadow var(--motion-normal) ease,
    filter var(--motion-normal) ease;
}
.button:active,
.store-link:active,
.download-trigger:active,
.app-store-badge:active { transform: scale(.98); }

@media (hover: hover) and (pointer: fine) {
  .product-card:hover,
  .feature-card:hover,
  .faq-card:hover,
  .media-panel:hover { transform: translateY(-2px); }
  .media-panel:hover { box-shadow: 0 30px 76px rgba(22, 45, 38, .18); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .motion-reveal { opacity: 1 !important; transform: none !important; }
}