@media screen {
    [data-scroll-fire] {
        --scroll-fire-duration: 0.3s;
        --scroll-fire-distance: 100px;
        --scroll-fire-scale: 0.4;
        transition-delay: var(--scroll-fire-delay, 0);
        transition-duration: var(--scroll-fire-duration);
    }
    [data-scroll-fire]:not([data-scroll-fire-animate]) {
        pointer-events: none;
    }
    [data-scroll-fire-dummy] {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        height: 1px !important;
        pointer-events: none !important;
        width: 100% !important;
        background: none !important;
        outline: none !important;
        border-width: 0 !important;
        transform: translateY(calc(var(--scroll-fire-ratio-top, 0) * -1)) !important;
    }
    [data-scroll-fire-dummy][data-scroll-fire-dummy-view]:before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        border-color: inherit !important;
        border-style: dashed !important;
        border-width: 0 !important;
        border-top-width: 1px !important;
        transform: translateY(var(--scroll-fire-ratio-top, 0)) !important;
    }
    [data-scroll-fire-threshold-demo] {
        display: block !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
        background: none !important;
        outline: none !important;
        border-style: dashed !important;
        border-width: 0 !important;
        border-top-width: 1px !important;
    }
    [data-scroll-fire^="fade"] {
        opacity: 0;
        transition-property: opacity, transform;
        transition-delay: var(--scroll-fire-delay, 0);
        transition-duration: var(--scroll-fire-duration);
        will-change: opacity, transform;
    }
    [data-scroll-fire^="fade"][data-scroll-fire-animate] {
        opacity: 1;
        transform: translate(0);
    }
    [data-scroll-fire="fade-up"] {
        transform: translateY(var(--scroll-fire-distance));
    }
    [data-scroll-fire="fade-down"] {
        transform: translateY(calc(var(--scroll-fire-distance) * -1));
    }
    [data-scroll-fire="fade-left"] {
        transform: translate(var(--scroll-fire-distance));
    }
    [data-scroll-fire="fade-right"] {
        transform: translate(calc(var(--scroll-fire-distance) * -1));
    }
    [data-scroll-fire="fade-up-left"] {
        transform: translate(var(--scroll-fire-distance), var(--scroll-fire-distance));
    }
    [data-scroll-fire="fade-up-right"] {
        transform: translate(calc(var(--scroll-fire-distance) * -1), var(--scroll-fire-distance));
    }
    [data-scroll-fire="fade-down-left"] {
        transform: translate(var(--scroll-fire-distance), calc(var(--scroll-fire-distance) * -1));
    }
    [data-scroll-fire="fade-down-right"] {
        transform: translate(calc(var(--scroll-fire-distance) * -1), calc(var(--scroll-fire-distance) * -1));
    }
    [data-scroll-fire^="zoom"] {
        opacity: 0;
        transition-property: opacity, transform;
        will-change: opacity, transform;
    }
    [data-scroll-fire^="zoom"][data-scroll-fire-animate] {
        opacity: 1;
        transform: translate(0) scale(1);
    }
    [data-scroll-fire="zoom-in"] {
        transform: translate(0) scale(calc(1 - var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-in-up"] {
        transform: translateY(var(--scroll-fire-distance)) scale(calc(1 - var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-in-down"] {
        transform: translateY(calc(var(--scroll-fire-distance) * -1)) scale(calc(1 - var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-in-left"] {
        transform: translate(var(--scroll-fire-distance)) scale(calc(1 - var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-in-right"] {
        transform: translate(calc(var(--scroll-fire-distance) * -1)) scale(calc(1 - var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-in-up-left"] {
        transform: translate(var(--scroll-fire-distance), var(--scroll-fire-distance))
            scale(calc(1 - var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-in-up-right"] {
        transform: translate(calc(var(--scroll-fire-distance) * -1), var(--scroll-fire-distance))
            scale(calc(1 - var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-in-down-left"] {
        transform: translate(var(--scroll-fire-distance), calc(var(--scroll-fire-distance) * -1))
            scale(calc(1 - var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-in-down-right"] {
        transform: translate(calc(var(--scroll-fire-distance) * -1), calc(var(--scroll-fire-distance) * -1))
            scale(calc(1 - var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-out"] {
        transform: translate(0) scale(calc(1 + var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-out-up"] {
        transform: translateY(var(--scroll-fire-distance)) scale(calc(1 + var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-out-down"] {
        transform: translateY(calc(var(--scroll-fire-distance) * -1)) scale(calc(1 + var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-out-left"] {
        transform: translate(var(--scroll-fire-distance)) scale(calc(1 + var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-out-right"] {
        transform: translate(calc(var(--scroll-fire-distance) * -1)) scale(calc(1 + var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-out-up-left"] {
        transform: translate(var(--scroll-fire-distance), var(--scroll-fire-distance))
            scale(calc(1 + var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-out-up-right"] {
        transform: translate(calc(var(--scroll-fire-distance) * -1), var(--scroll-fire-distance))
            scale(calc(1 + var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-out-down-left"] {
        transform: translate(var(--scroll-fire-distance), calc(var(--scroll-fire-distance) * -1))
            scale(calc(1 + var(--scroll-fire-scale)));
    }
    [data-scroll-fire="zoom-out-down-right"] {
        transform: translate(calc(var(--scroll-fire-distance) * -1), calc(var(--scroll-fire-distance) * -1))
            scale(calc(1 + var(--scroll-fire-scale)));
    }
    [data-scroll-fire^="slide"] {
        transition-property: transform;
        transition-delay: var(--scroll-fire-delay, 0);
        transition-duration: var(--scroll-fire-duration);
        will-change: transform;
    }
    [data-scroll-fire^="slide"][data-scroll-fire-animate] {
        transform: translate(0);
    }
    [data-scroll-fire="slide-up"] {
        transform: translateY(var(--scroll-fire-distance));
    }
    [data-scroll-fire="slide-down"] {
        transform: translateY(calc(var(--scroll-fire-distance) * -1));
    }
    [data-scroll-fire="slide-left"] {
        transform: translate(var(--scroll-fire-distance));
    }
    [data-scroll-fire="slide-right"] {
        transform: translate(calc(var(--scroll-fire-distance) * -1));
    }
    [data-scroll-fire="slide-up-left"] {
        transform: translate(var(--scroll-fire-distance), var(--scroll-fire-distance));
    }
    [data-scroll-fire="slide-up-right"] {
        transform: translate(calc(var(--scroll-fire-distance) * -1), var(--scroll-fire-distance));
    }
    [data-scroll-fire="slide-down-left"] {
        transform: translate(var(--scroll-fire-distance), calc(var(--scroll-fire-distance) * -1));
    }
    [data-scroll-fire="slide-down-right"] {
        transform: translate(calc(var(--scroll-fire-distance) * -1), calc(var(--scroll-fire-distance) * -1));
    }
}