:root {
    --hs-delay: 0ms;
    --hs-easing: var(--hs-ease-out);
    --hs-duration: 600ms;
    --hs-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --hs-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --hs-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --hs-opacity: 1;
    --hs-visibility: visible;
    --hs-translate-y: 0;
    --hs-translate-x: 0;
    --hs-scale: 1;
    --hs-rotate: 0deg;
    --hs-ratio: 1;
    --hs-translate-ratio: 1;
    --hs-scale-ratio: 0.2;
    --hs-duration-ratio: 1;
    --hs-translate-x-amount: 2rem;
    --hs-translate-y-amount: 3rem;
    --hs-blur: 0
}

:root:not(.no-js) [data-hs]>* {
    filter: blur(var(--hs-blur));
    opacity: var(--hs-opacity);
    pointer-events: none;
    transform: translateX(var(--hs-translate-x)) translateY(var(--hs-translate-y)) scale(var(--hs-scale)) rotate(var(--hs-rotate));
    transition-delay: var(--hs-delay);
    transition-duration: calc(var(--hs-duration)*var(--hs-duration-ratio));
    transition-property: transform, opacity, visibility, filter;
    transition-timing-function: var(--hs-easing);
    visibility: var(--hs-visibility)
}

:root:not(.no-js) [data-hs].hs-inview>*,
:root:not(.no-js) [data-hs].hs-once>* {
    --hs-opacity: 1;
    --hs-visibility: visible;
    --hs-translate-y: 0;
    --hs-translate-x: 0;
    --hs-scale: 1;
    --hs-rotate: 0deg;
    --hs-blur: 0;
    pointer-events: auto
}

:root:not(.no-js) [data-hs*=ease-in] {
    --hs-easing: var(--hs-ease-in)
}

:root:not(.no-js) [data-hs*=ease-out] {
    --hs-easing: var(--hs-ease-out)
}

:root:not(.no-js) [data-hs*=ease-in-out] {
    --hs-easing: var(--hs-ease-in-out)
}

:root:not(.no-js) [data-hs*=sm] {
    --hs-translate-ratio: 0.5
}

:root:not(.no-js) [data-hs*=md] {
    --hs-translate-ratio: 0.75
}

:root:not(.no-js) [data-hs*=lg] {
    --hs-translate-ratio: 1.5
}

:root:not(.no-js) [data-hs*=xl] {
    --hs-translate-ratio: 2
}

:root:not(.no-js) [data-hs*="2xl"] {
    --hs-translate-ratio: 3
}

:root:not(.no-js) [data-hs~=extra-slow] {
    --hs-duration-ratio: 3
}

:root:not(.no-js) [data-hs~=slow] {
    --hs-duration-ratio: 1.5
}

:root:not(.no-js) [data-hs~=fast] {
    --hs-duration-ratio: 0.5
}

:root:not(.no-js) [data-hs~=extra-fast] {
    --hs-duration-ratio: 0.25
}

:root:not(.no-js) [data-hs*=fade],
:root:not(.no-js) [data-hs*=zoom] {
    --hs-opacity: 0;
    --hs-visibility: hidden
}

:root:not(.no-js) [data-hs*=up]>* {
    --hs-translate-y: calc(var(--hs-translate-y-amount)*var(--hs-translate-ratio))
}

:root:not(.no-js) [data-hs*=down]>* {
    --hs-translate-y: calc(0px - var(--hs-translate-y-amount)*var(--hs-translate-ratio))
}

:root:not(.no-js) [data-hs*=left]>* {
    --hs-translate-x: calc(var(--hs-translate-x-amount)*var(--hs-translate-ratio))
}

:root:not(.no-js) [data-hs*=right]>* {
    --hs-translate-x: calc(0px - var(--hs-translate-x-amount)*var(--hs-translate-ratio))
}

:root:not(.no-js) [data-hs*=zoom-in]>* {
    --hs-scale: calc(1 + var(--hs-scale-ratio))
}

:root:not(.no-js) [data-hs*=zoom-out]>* {
    --hs-scale: calc(1 - var(--hs-scale-ratio))
}

:root:not(.no-js) [data-hs*=flip]>* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

:root:not(.no-js) [data-hs*=flip].hs-inview>*,
:root:not(.no-js) [data-hs*=flip].hs-once>* {
    transform: perspective(2000px) rotateY(0deg) rotateX(0deg)
}

:root:not(.no-js) [data-hs*=flip-up]>* {
    transform: perspective(2000px) rotateX(-100deg)
}

:root:not(.no-js) [data-hs*=flip-down]>* {
    transform: perspective(2000px) rotateX(100deg)
}

:root:not(.no-js) [data-hs*=flip-left]>* {
    transform: perspective(2000px) rotateY(-100deg)
}

:root:not(.no-js) [data-hs*=flip-right]>* {
    transform: perspective(2000px) rotateY(100deg)
}

:root:not(.no-js) [data-hs*=blur] {
    --hs-blur: 5px
}

@media (prefers-reduced-motion:reduce) {
    :root body [data-hs]>* {
        filter: none;
        opacity: 1;
        transform: none;
        transition: none;
        visibility: visible
    }
}