@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--duration-slow) var(--ease-emphasized),
      transform var(--duration-slow) var(--ease-emphasized);
  }

  .js body[data-product-slug="coupon-email-system-for-woocommerce"] [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .card,
  .product-card,
  .support-card,
  .bucket-card,
  .media-frame,
  .ui-window {
    transition:
      border-color var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .product-card:hover,
  .support-card:hover,
  .bucket-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  .card:hover {
    box-shadow: var(--shadow-md);
    transform: none;
  }

  .faq-card__panel {
    animation: soft-panel-in var(--duration-base) var(--ease-standard);
  }

  @keyframes soft-panel-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

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

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}