/*

    The following effects are available:
    - Slide-up
    - Slide-down
    - Slide-left
    - Slide-right
    - Fade-in

*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                        PAGE LOADER (highway.js)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Default */
.loader {
    width: 100vw;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: var(--black-grey);
    will-change: transform;
    position: fixed;
    z-index: 9999;
}

.loader:not(.product_transition) {
    transition: background-color 0.7s cubic-bezier(0.87, 0, 0.13, 1);
    -webkit-transition: background-color 0.7s cubic-bezier(0.87, 0, 0.13, 1);
    -moz-transition: background-color 0.7s cubic-bezier(0.87, 0, 0.13, 1);
    -o-transition: background-color 0.7s cubic-bezier(0.87, 0, 0.13, 1);
}

/* Menu open */
html.menu_open .loader {
    background-color: #fff;
}

/* Product */
.loader.product_transition {
    background-color: var(--light-grey);
}

.inherit {
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    display: inline !important;
}

.inherit.detect {
    display: inline-block !important;
}

.split-text-lines:not(.inited) {
    color: transparent !important;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                            GSAP
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
[data-slide-up], [data-each-line-up] {
    transform: translateY(100px);
    opacity: 0;
}

[data-slide-left] {
    transform: translateX(100px);
    opacity: 0;
}

[data-slide-right] {
    transform: translateX(-100px);
    opacity: 0;
}

@media (max-width: 992px) {
    [data-slide-up] {
        transform: translateY(50px);
    }

    [data-each-line-up] {
        transform: translateY(70px);
    }
}

.has_ajax [data-slide-up], .has_ajax [data-slide-left], .has_ajax [data-slide-right] {
    transform: unset;
    opacity: unset;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                            INITIAL STATE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.slide-up:not(.loaded), .slide-down:not(.loaded), .slide-left:not(.loaded), .slide-right:not(.loaded), .fade-in:not(.loaded) {
    opacity: 0;
}

/* ---- SLIDE UP ---- */
.slide-up:not(.loaded) {
    transform: translateY(80px);
}

/* ---- SLIDE DOWN ---- */
.slide-down:not(.loaded) {
    transform: translateY(-80px);
}

/* ---- SLIDE LEFT ---- */
.slide-left:not(.loaded) {
    transform: translateX(150px);
}

/* ---- SLIDE RIGHT ---- */
.slide-right:not(.loaded) {
    transform: translateX(-100px);
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                            FINAL STATE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.slide-up.loaded, .slide-down.loaded, .slide-left.loaded, .slide-right.loaded, .fade-in.loaded {
    opacity: 1;
}

.slide-up.loaded, .slide-down.loaded {
    transform: translateY(0);
}

.slide-right.loaded, .slide-left.loaded {
    transform: translateX(0);
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                            TRANSITIONS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.fade-in:not(.loaded), .fade-in.loaded {
    transition: all 0.8s ease-out;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
}

.slide-up:not(.loaded), .slide-up.loaded {
    transition: all 0.8s ease-out;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
}

.slide-down:not(.loaded), .slide-down.loaded, .slide-left:not(.loaded), .slide-left.loaded, .slide-right:not(.loaded), .slide-right.loaded {
    transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
}