.sc-anim {
    --sc-anim-duration: 0.8s;
    --sc-anim-delay: 0s;
    --sc-anim-distance: 24px;
    transition-property: opacity, transform;
    transition-duration: var(--sc-anim-duration);
    transition-delay: var(--sc-anim-delay);
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

html.sc-anim-ready .sc-anim:not(.is-visible) {
    opacity: 0;
}

.sc-anim.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.sc-anim--fade-in {
    transform: translate3d(0, 0, 0) scale(1);
}

.sc-anim--fade-up {
    transform: translate3d(0, var(--sc-anim-distance), 0);
}

.sc-anim--fade-down {
    transform: translate3d(0, calc(var(--sc-anim-distance) * -1), 0);
}

.sc-anim--fade-left {
    transform: translate3d(var(--sc-anim-distance), 0, 0);
}

.sc-anim--fade-right {
    transform: translate3d(calc(var(--sc-anim-distance) * -1), 0, 0);
}

.sc-anim--zoom-in {
    transform: translate3d(0, 0, 0) scale(0.94);
}

.sc-duration--fast {
    --sc-anim-duration: 0.45s;
}

.sc-duration--normal {
    --sc-anim-duration: 0.8s;
}

.sc-duration--slow {
    --sc-anim-duration: 1.1s;
}

.sc-duration--slower {
    --sc-anim-duration: 2.5s;
}

.sc-hover {
    transition-property: transform, box-shadow, opacity;
    transition-duration: 0.28s;
    transition-timing-function: ease;
    transform-origin: center;
}

.sc-hover--grow:hover,
.sc-hover--grow:focus-within {
    transform: scale(1.03);
}

.sc-hover--lift:hover,
.sc-hover--lift:focus-within {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
}

.sc-hover--shrink:hover,
.sc-hover--shrink:focus-within {
    transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
    .sc-anim,
    .sc-hover {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
    }

    html.sc-anim-ready .sc-anim:not(.is-visible) {
        opacity: 1;
    }

    .sc-anim,
    .sc-anim.is-visible,
    .sc-hover:hover,
    .sc-hover:focus-within {
        transform: none !important;
        box-shadow: none !important;
    }
}