:root{

    --ekeko-duration:1000ms;

    --ekeko-delay:0ms;

    --ekeko-distance:50px;

    --ekeko-scale:1.2;

}



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

.ekeko-fade{

    opacity:0;

}

.ekeko-visible.ekeko-fade{

    opacity:1;

    transition:
        opacity var(--ekeko-duration) ease;

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

}



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

.ekeko-fade-up{

    opacity:0;

    transform:
        translateY(
            var(--ekeko-distance)
        );

}

.ekeko-visible.ekeko-fade-up{

    opacity:1;

    transform:
        translateY(0);

    transition:

        opacity
        var(--ekeko-duration)
        ease,

        transform
        var(--ekeko-duration)
        ease;

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

}



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

.ekeko-fade-down{

    opacity:0;

    transform:
        translateY(
            calc(
                var(--ekeko-distance)
                * -1
            )
        );

}

.ekeko-visible.ekeko-fade-down{

    opacity:1;

    transform:
        translateY(0);

    transition:

        opacity
        var(--ekeko-duration)
        ease,

        transform
        var(--ekeko-duration)
        ease;

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

}



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

.ekeko-fade-left{

    opacity:0;

    transform:
        translateX(
            calc(
                var(--ekeko-distance)
                * -1
            )
        );

}

.ekeko-visible.ekeko-fade-left{

    opacity:1;

    transform:
        translateX(0);

    transition:

        opacity
        var(--ekeko-duration)
        ease,

        transform
        var(--ekeko-duration)
        ease;

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

}



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

.ekeko-fade-right{

    opacity:0;

    transform:
        translateX(
            var(--ekeko-distance)
        );

}

.ekeko-visible.ekeko-fade-right{

    opacity:1;

    transform:
        translateX(0);

    transition:

        opacity
        var(--ekeko-duration)
        ease,

        transform
        var(--ekeko-duration)
        ease;

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

}



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

.ekeko-zoom-in{

    opacity:0;

    transform:
        scale(
            var(--ekeko-scale)
        );

}

.ekeko-visible.ekeko-zoom-in{

    opacity:1;

    transform:
        scale(1);

    transition:

        opacity
        var(--ekeko-duration)
        ease,

        transform
        var(--ekeko-duration)
        ease;

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

}



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

.ekeko-zoom-out{

    opacity:0;

    transform:
        scale(
            calc(
                2 - var(--ekeko-scale)
            )
        );

}

.ekeko-visible.ekeko-zoom-out{

    opacity:1;

    transform:
        scale(1);

    transition:

        opacity
        var(--ekeko-duration)
        ease,

        transform
        var(--ekeko-duration)
        ease;

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

}



/* ===========================================
   POP
=========================================== */

@keyframes ekekoPop{

    0%{

        transform:
            scale(
                calc(
                    var(--ekeko-scale) * .5
                )
            );

    }

    70%{

        transform:
            scale(
                calc(
                    var(--ekeko-scale) + .1
                )
            );

    }

    100%{

        transform:scale(1);

    }

}

.ekeko-pop.ekeko-visible{

    animation:

        ekekoPop

        var(--ekeko-duration)

        ease;

    animation-delay:
        var(--ekeko-delay);

    animation-fill-mode:
        both;

}

.ekeko-background-media{
    position:absolute;
    inset:0;
}

.ekeko-background-overlay{
    position:absolute;
    inset:0;
}

.ekeko-background-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}