:root {
    --ra-duration: 800ms;
    --ra-distance: 24px;
    --ra-delay-step: 100ms;
    --ra-stagger-step: 90ms;
    --ra-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ra-blur-strength: 6px;
}

.ra-reveal {
    --ra-opacity: 1;
    --ra-x: 0px;
    --ra-y: 0px;
    --ra-scale: 1;
    --ra-spin: 0deg;
    --ra-tilt: 0deg;

    opacity: var(--ra-opacity);
    transform:
        perspective(1200px)
        translate3d(var(--ra-x), var(--ra-y), 0)
        scale(var(--ra-scale))
        rotate(var(--ra-spin))
        rotateX(var(--ra-tilt));
}

.ra-reveal.ra-armed.ra-fade { --ra-opacity: 0; }

.ra-reveal.ra-armed.ra-from-bottom { --ra-y: var(--ra-distance); }
.ra-reveal.ra-armed.ra-from-top { --ra-y: calc(var(--ra-distance) * -1); }

.ra-reveal.ra-armed.ra-from-left { --ra-x: calc(var(--ra-distance) * -1); }
.ra-reveal.ra-armed.ra-from-right { --ra-x: var(--ra-distance); }

.ra-reveal.ra-armed.ra-zoom-in { --ra-scale: 0.94; }
.ra-reveal.ra-armed.ra-zoom-out { --ra-scale: 1.06; }

.ra-reveal.ra-armed.ra-tilt { --ra-spin: -3deg; }
.ra-reveal.ra-armed.ra-flip { --ra-tilt: 12deg; transform-origin: center bottom; }

.ra-reveal.ra-armed.ra-blur { filter: blur(var(--ra-blur-strength)); }

.ra-reveal.ra-armed:not(.ra-in) {
    will-change: opacity, transform;
}

.ra-reveal.ra-transition,
.ra-reveal.ra-transition.ra-stagger > * {
    transition:
        opacity var(--ra-duration) var(--ra-ease),
        transform var(--ra-duration) var(--ra-ease),
        filter var(--ra-duration) var(--ra-ease);
}

.ra-reveal.ra-armed.ra-in {
    --ra-opacity: 1;
    --ra-x: 0px;
    --ra-y: 0px;
    --ra-scale: 1;
    --ra-spin: 0deg;
    --ra-tilt: 0deg;
}

.ra-reveal.ra-armed.ra-blur.ra-in { filter: blur(0px); }

.ra-reveal.ra-near {
    --ra-distance: 12px;
    --ra-blur-strength: 3px;
}

.ra-reveal.ra-far {
    --ra-distance: 56px;
    --ra-blur-strength: 12px;
}

.ra-reveal.ra-fast { --ra-duration: 450ms; }
.ra-reveal.ra-slow { --ra-duration: 1200ms; }

.ra-reveal.ra-ease-spring { --ra-ease: cubic-bezier(0.16, 1.08, 0.38, 1); }
.ra-reveal.ra-ease-linear { --ra-ease: linear; }

.ra-reveal.ra-delay-1 { transition-delay: calc(var(--ra-delay-step) * 1); }
.ra-reveal.ra-delay-2 { transition-delay: calc(var(--ra-delay-step) * 2); }
.ra-reveal.ra-delay-3 { transition-delay: calc(var(--ra-delay-step) * 3); }
.ra-reveal.ra-delay-4 { transition-delay: calc(var(--ra-delay-step) * 4); }
.ra-reveal.ra-delay-5 { transition-delay: calc(var(--ra-delay-step) * 5); }
.ra-reveal.ra-delay-6 { transition-delay: calc(var(--ra-delay-step) * 6); }
.ra-reveal.ra-delay-7 { transition-delay: calc(var(--ra-delay-step) * 7); }
.ra-reveal.ra-delay-8 { transition-delay: calc(var(--ra-delay-step) * 8); }
.ra-reveal.ra-delay-9 { transition-delay: calc(var(--ra-delay-step) * 9); }
.ra-reveal.ra-delay-10 { transition-delay: calc(var(--ra-delay-step) * 10); }

.ra-reveal.ra-armed.ra-stagger {
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
}

.ra-reveal.ra-armed.ra-stagger > * {
    opacity: var(--ra-opacity);
    transform:
        perspective(1200px)
        translate3d(var(--ra-x), var(--ra-y), 0)
        scale(var(--ra-scale))
        rotate(var(--ra-spin))
        rotateX(var(--ra-tilt));
}

.ra-reveal.ra-armed.ra-stagger.ra-blur > * { filter: blur(var(--ra-blur-strength)); }
.ra-reveal.ra-armed.ra-stagger.ra-blur.ra-in > * { filter: blur(0px); }

@media (prefers-reduced-motion: reduce) {
    .ra-reveal,
    .ra-reveal.ra-stagger > * {
        --ra-opacity: 1 !important;
        --ra-x: 0px !important;
        --ra-y: 0px !important;
        --ra-scale: 1 !important;
        --ra-spin: 0deg !important;
        --ra-tilt: 0deg !important;
        filter: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}