/* Base state (hidden before reveal) */
[data-anim] {
    opacity: 0;
    will-change: opacity, transform;
    transition-property: opacity, transform;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(.22,.61,.36,1); /* natural ease-out */
}

/* Specific motions */
[data-anim="fade-up"] {
    transform: translateY(40px);
}

[data-anim="fade-in"] {
    transform: none; /* image: pure fade */
}

/* Revealed state */
.is-visible[data-anim] {
    opacity: 1;
    transform: none;
}

/* Optional: small stagger when multiple siblings reveal at once */
.stagger > [data-anim] {
    transition-delay: var(--stagger, 0ms);
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    [data-anim] {
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
}