html,
body {
    overflow-x: hidden;
}

@supports (overflow-x: clip) {

    html,
    body {
        overflow-x: clip;
    }
}

[data-effect] {
    --effect-duration: 600ms;
    --effect-delay: 0ms;

    transition-property:
        opacity,
        transform;

    transition-duration:
        var(--effect-duration);

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

    transition-timing-function:
        ease-out;

    will-change:
        opacity,
        transform;
}


/*
 * ============================================================
 * FADE
 * ============================================================
 */

[data-effect="fade"] {
    opacity: 0;
}

[data-effect="fade"].effect-visible {
    opacity: 1;
}


/*
 * ============================================================
 * FADE UP
 * ============================================================
 */

[data-effect="fade-up"] {
    opacity: 0;
    transform:
        translateY(40px);
}

[data-effect="fade-up"].effect-visible {
    opacity: 1;
    transform:
        translateY(0);
}


/*
 * ============================================================
 * FADE DOWN
 * ============================================================
 */

[data-effect="fade-down"] {
    opacity: 0;
    transform:
        translateY(-40px);
}

[data-effect="fade-down"].effect-visible {
    opacity: 1;
    transform:
        translateY(0);
}


/*
 * ============================================================
 * FADE LEFT
 * ============================================================
 */

[data-effect="fade-left"] {
    opacity: 0;
    transform:
        translateX(-40px);
}

[data-effect="fade-left"].effect-visible {
    opacity: 1;
    transform:
        translateX(0);
}


/*
 * ============================================================
 * FADE RIGHT
 * ============================================================
 */

[data-effect="fade-right"] {
    opacity: 0;
    transform:
        translateX(40px);
}

[data-effect="fade-right"].effect-visible {
    opacity: 1;
    transform:
        translateX(0);
}


/*
 * ============================================================
 * SLIDE UP
 * ============================================================
 */

[data-effect="slide-up"] {
    transform:
        translateY(60px);
}

[data-effect="slide-up"].effect-visible {
    transform:
        translateY(0);
}


/*
 * ============================================================
 * SLIDE DOWN
 * ============================================================
 */

[data-effect="slide-down"] {
    transform:
        translateY(-60px);
}

[data-effect="slide-down"].effect-visible {
    transform:
        translateY(0);
}


/*
 * ============================================================
 * SLIDE LEFT
 * ============================================================
 */

[data-effect="slide-left"] {
    transform:
        translateX(-60px);
}

[data-effect="slide-left"].effect-visible {
    transform:
        translateX(0);
}


/*
 * ============================================================
 * SLIDE RIGHT
 * ============================================================
 */

[data-effect="slide-right"] {
    transform:
        translateX(60px);
}

[data-effect="slide-right"].effect-visible {
    transform:
        translateX(0);
}


/*
 * ============================================================
 * ZOOM IN
 * ============================================================
 */

[data-effect="zoom-in"] {
    opacity: 0;
    transform:
        scale(.92);
}

[data-effect="zoom-in"].effect-visible {
    opacity: 1;
    transform:
        scale(1);
}


/*
 * ============================================================
 * ZOOM OUT
 * ============================================================
 */

[data-effect="zoom-out"] {
    opacity: 0;
    transform:
        scale(1.08);
}

[data-effect="zoom-out"].effect-visible {
    opacity: 1;
    transform:
        scale(1);
}


/*
 * ============================================================
 * REDUCED MOTION
 * ============================================================
 */

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

    [data-effect] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}