/* Initial state for headings */
h1:not([data-heading-animated]), 
h2:not([data-heading-animated]), 
h3:not([data-heading-animated]) {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    will-change: opacity, transform;
}

/* Animated state */
.reveal-active {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Accessibility: Respect reduced motion settings */
@media (prefers-reduced-motion: reduce) {
    h1, h2, h3 {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}