@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .hero-media { animation: fadeIn .7s ease both; }
  .floating-badge { animation: floatSoft 4s ease-in-out infinite; }
  .product-card, .catalog-card, .feature-card { transition: transform .22s ease, box-shadow .22s ease; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}