/*
|--------------------------------------------------------------------------
| Home motion
|--------------------------------------------------------------------------
*/

/*
 * Τα animations ενεργοποιούνται μόνο
 * όταν υπάρχει JavaScript.
 */

.js [data-reveal] {
    opacity: 0;

    transition:
        opacity 0.7s ease,
        transform 0.85s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/*
|--------------------------------------------------------------------------
| Reveal from left
|--------------------------------------------------------------------------
*/

.js [data-reveal="left"] {
    transform:
        translateX(-45px)
        translateY(8px);
}


/*
|--------------------------------------------------------------------------
| Reveal from right
|--------------------------------------------------------------------------
*/

.js [data-reveal="right"] {
    transform:
        translateX(45px)
        translateY(8px);
}


/*
|--------------------------------------------------------------------------
| Reveal from bottom
|--------------------------------------------------------------------------
*/

.js [data-reveal="up"] {
    transform:
        translateY(30px);
}


/*
|--------------------------------------------------------------------------
| Visible
|--------------------------------------------------------------------------
*/

.js [data-reveal].is-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


/*
|--------------------------------------------------------------------------
| Parallax elements
|--------------------------------------------------------------------------
*/

[data-parallax] {
    will-change: transform;
}


/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .js [data-reveal] {
        opacity: 1;

        transform: none;

        transition: none;
    }

    [data-parallax] {
        transform: none !important;
    }
}