/* Shared entrance motion for every page that uses [data-reveal]
   (products, product, brand-detail, brands, orders, beauty-store-landing-ar).
   Elements carry [data-reveal]; adding .revealed plays the reveal.
   Product cards additionally slide from the inline-start side (RTL-friendly).
   Per-element stagger is set with var --d. */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].revealed { opacity: 1; transform: none; }
body.no-js [data-reveal] { opacity: 1; transform: none; }

.prod-card[data-reveal] {
  transform: translateX(24px) translateY(12px);
  transition-property: opacity, transform, box-shadow;
  transition-duration: .5s, .5s, .35s;
  transition-timing-function: var(--ease);
  transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms;
}
.prod-card[data-reveal].revealed { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .prod-card[data-reveal] { transform: none; }
}