@layer components {
    /* Section reveal */
    [data-reveal] .anim--fade,
    [data-reveal] .anim--slide-up,
    [data-reveal] .anim--slide-down,
    [data-reveal] .anim--blur {
        --anim-speed: var(--reveal-speed, 0.6s);
        --anim-distance: var(--reveal-distance, 20px);
    }

    /* Post reveal */
    [data-post-reveal] .anim--fade,
    [data-post-reveal] .anim--slide-up,
    [data-post-reveal] .anim--slide-down,
    [data-post-reveal] .anim--blur {
        --anim-speed: var(--post-reveal-speed, 0.4s);
        --anim-distance: var(--post-reveal-distance, 15px);
    }

    /* Stagger */
    [data-stagger] .anim--fade,
    [data-stagger] .anim--slide-up,
    [data-stagger] .anim--slide-down,
    [data-stagger] .anim--blur {
        --anim-speed: var(--stagger-speed, 0.4s);
        --anim-distance: var(--stagger-distance, 15px);
        transition-delay: calc(var(--stagger-index, 0) * var(--stagger-delay, 0.08s));
    }
}