:root {
  --motion-duration: 0.22s;
}

[data-animate='product-card'] {
  opacity: 1;
  transform: translateZ(0);
}

[data-animate='product-card'].is-visible {
  animation: none;
  animation-delay: 0s;
}

.site-header {
  animation: riseFade 0.35s ease both;
  will-change: opacity, transform;
}

.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  transform: translateZ(0);
}

.btn:hover {
  transform: scale(1.02) translateZ(0);
  box-shadow: 0 14px 26px rgba(18, 49, 50, 0.15);
}

@keyframes riseFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(16px);
  }
}

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

  .btn:hover {
    transform: none;
    box-shadow: none;
  }

  .site-header {
    animation: none;
  }
}