/**
 * WOW-style scroll reveals for SomElearning landing pages.
 * Elements use class "wow" + animation name; optional data-wow-delay / data-wow-duration / data-wow-offset.
 */

.wow {
    visibility: hidden;
}

.wow.animated {
    visibility: visible;
}

@keyframes somWowFadeInUp {
    from { opacity: 0; transform: translate3d(0, 28px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes somWowFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes somWowFadeInLeft {
    from { opacity: 0; transform: translate3d(-28px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes somWowFadeInRight {
    from { opacity: 0; transform: translate3d(28px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes somWowZoomIn {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes somWowFadeInDown {
    from { opacity: 0; transform: translate3d(0, -22px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.wow.animated.fadeInUp {
    animation-name: somWowFadeInUp;
}

.wow.animated.fadeIn {
    animation-name: somWowFadeIn;
}

.wow.animated.fadeInLeft {
    animation-name: somWowFadeInLeft;
}

.wow.animated.fadeInRight {
    animation-name: somWowFadeInRight;
}

.wow.animated.zoomIn {
    animation-name: somWowZoomIn;
}

.wow.animated.fadeInDown {
    animation-name: somWowFadeInDown;
}

.wow.animated {
    animation-duration: 1.65s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.16, 0.84, 0.28, 1);
}

@media (prefers-reduced-motion: reduce) {
    .wow,
    .wow.animated {
        visibility: visible !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}