/* =========================================================
   DOCTATECH MOTION SYSTEM
   ========================================================= */


/* ---------------------------------------------------------
   BASE REVEAL
   --------------------------------------------------------- */

[data-reveal] {
    --reveal-delay: 0ms;

    opacity: 0;

    transform: translate3d(0, 32px, 0);

    transition:
        opacity 650ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 750ms cubic-bezier(0.16, 1, 0.3, 1);

    transition-delay: var(--reveal-delay);

    will-change: opacity, transform;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* ---------------------------------------------------------
   LEFT REVEAL
   --------------------------------------------------------- */

[data-reveal="left"] {
    transform: translate3d(-32px, 0, 0);
}

[data-reveal="left"].is-visible {
    transform: translate3d(0, 0, 0);
}


/* ---------------------------------------------------------
   RIGHT REVEAL
   --------------------------------------------------------- */

[data-reveal="right"] {
    transform: translate3d(32px, 0, 0);
}

[data-reveal="right"].is-visible {
    transform: translate3d(0, 0, 0);
}


/* ---------------------------------------------------------
   SCALE REVEAL
   --------------------------------------------------------- */

[data-reveal="scale"] {
    transform:
        translate3d(0, 18px, 0)
        scale(0.965);
}

[data-reveal="scale"].is-visible {
    transform:
        translate3d(0, 0, 0)
        scale(1);
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    [data-reveal],
    [data-reveal="left"],
    [data-reveal="right"],
    [data-reveal="scale"] {

        opacity: 1;
        transform: none;
        transition: none;
    }

}