/* Initially hide + offset (direction नुसार) */
  .reveal {
    opacity: 0;
    transition: opacity .8s ease, transform .8s ease;
    will-change: opacity, transform;
  }
  .reveal[data-animate="fade-up"]    { transform: translateY(24px); }
  .reveal[data-animate="fade-down"]  { transform: translateY(-24px); }
  .reveal[data-animate="fade-left"]  { transform: translateX(24px); }
  .reveal[data-animate="fade-right"] { transform: translateX(-24px); }

  /* Visible state (animation complete) */
  .reveal.visible {
    opacity: 1;
    transform: none;
  }

  /* Accessibility: motion reduce असेल तर animation बंद */
  @media (prefers-reduced-motion: reduce) {
    .reveal { transition: none !important; }
  }