/* Base animation state */
[data-animate] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Active state */
[data-animate].active {
    opacity: 1;
    transform: translateY(0);
}

/* Variations */
[data-animate="left"] {
    transform: translateX(-40px);
}

[data-animate="right"] {
    transform: translateX(40px);
}

[data-animate="zoom"] {
    transform: scale(0.95);
}

[data-animate="zoom"].active {
    transform: scale(1);
}