scroll-animate {
    --slide-horizontal: 5;
    --slide-vertical: 15;
    --slide-multiplier: 1;

    display: block;
    width: 100%;
    height: 100%;
    transition: all var(--delay) ease-out;

    &.zoom-in {
        scale: calc(0.9 + (var(--scroll) / 100) * 0.2);
    }

    &.zoom-out {
        scale: calc(1.1 + (var(--scroll) / 100) * 0.2 * -1);
    }

    &.slide-slow {
        --slide-multiplier: 0.5;
    }

    &.slide-fast {
        --slide-multiplier: 2;
    }

    &.slide-left {
        --v: var(--slide-horizontal) * var(--slide-multiplier);

        translate: calc((var(--v) / 100 * var(--scroll) - var(--v) / 2) * -1vw) 0;
    }

    &.slide-right {
        --v: var(--slide-horizontal) * var(--slide-multiplier);

        translate: calc((var(--v) / 100 * var(--scroll) - var(--v) / 2) * 1vw) 0;
    }

    &.slide-top {
        --v: var(--slide-horizontal) * var(--slide-multiplier);

        translate: 0 calc((var(--v) / 100 * var(--scroll) - var(--v) / 2) * -1vh);
    }

    &.slide-bottom {
        --v: var(--slide-horizontal) * var(--slide-multiplier);

        translate: 0 calc((var(--v) / 100 * var(--scroll) - var(--v) / 2) * 1vh);
    }

    &.scaled-slide {
        scale: 1.1;
    }

    &.scaled-zoom-in {
        transform: scale(calc(1 + (var(--scroll) / 100) * 0.2));
    }

    &.scaled-zoom-out {
        transform: scale(calc(1.2 + (var(--scroll) / 100) * 0.2 * -1));
    }

    &.opacity {
        opacity: min(calc(var(--scroll) * 3 / 100), 1);
    }
}