/*#region ROLLOVER */

@keyframes rollover {
    50% {
        margin-left: 1.5rem;
        margin-right: 0;
    }

    50.001% {
        margin-left: 0rem;
        margin-right: 1.5rem;
    }
}

@keyframes button-rollover {
    50% {
        transform: translateY(150%);
    }

    50.001% {
        transform: translateY(-150%);
    }
}

.cta:hover::after {
    animation: rollover .3s forwards;
}

.rollover {
    display: block;
}

.button:hover .rollover {
    animation: button-rollover .3s forwards;
}

/*#endregion */

/*#region PINCH */

.pinch {
    transition: .3s;
    color: rgb(var(--starting-color, var(--dark)));
    background: rgb(var(--starting-bg-color, var(--dark-light)));
}

    .pinch .pinch-spacer--top, .pinch .pinch-spacer--bottom {
        height: 0;
        transition: height .3s;
    }

    .pinch .pinch-spacer--middle {
        height: var(--starting-distance, 1.5rem);
        transition: height .3s;
    }

    .pinch:not([disabled]):hover {
        color: rgb(var(--final-color, var(--white)));
        background: rgb(var(--final-bg-color, var(--category-color, var(--primary-color))));
    }

        .pinch:not([disabled]):hover .pinch-spacer--top, .pinch:not([disabled]):hover .pinch-spacer--bottom {
            height: calc((var(--starting-distance, 1.5rem) - var(--final-distance, .5rem)) / 2);
        }

        .pinch:not([disabled]):hover .pinch-spacer--middle {
            height: var(--final-distance, .5rem);
        }

/*#endregion */

/*#region PARALLAX */

body {
    perspective: 10px;
    perspective-origin: left bottom;
}

main {
    transform-style: preserve-3d;
}

.parallax {
    z-index: -1;
    max-height: 100vh;
    transform-style: preserve-3d;
    transform-origin: left bottom;
}

.parallax--1 {
    transform: translateZ(-10px) scale(2);
}

.parallax--2 {
    transform: translateZ(-5px) scale(1.5);
}

.parallax--3 {
    transform: translateZ(-3px) scale(1.3);
}


@-moz-document url-prefix() {
    body {
        perspective: none;
    }

    .parallax {
        transform: none;
    }
}

/*#endregion */