[data-reveal] {
    opacity: 0;
    transition: opacity 0.5s ease-in-out,
                transform 0.5s ease-in-out;

    &[data-reveal="fromTop"] {
        transform: translateY(-30px);
    }
    &[data-reveal="fromRight"] {
        transform: translateX(-30px);
    }
    &[data-reveal="fromBottom"] {
        transform: translateY(30px);
    }
    &[data-reveal="fromLeft"] {
        transform: translateX(30px);
    }

    &.visible {
        opacity: 1;
        transform: none;
    }
}