@layer components {
    @media (prefers-reduced-motion: no-preference) {
        .js [data-reveal] {
            opacity: 0;
            translate: 0 8px;
            transition: opacity 240ms ease, translate 240ms ease;
        }

        .js [data-reveal].is-revealed {
            opacity: 1;
            translate: 0 0;
        }

        .js [data-reveal-group] > * {
            opacity: 0;
            translate: 0 10px;
        }

        .js [data-reveal-group].is-revealed > * {
            opacity: 1;
            translate: 0 0;
            transition: opacity 260ms ease, translate 260ms ease;
        }

        .js [data-reveal-group].is-revealed > *:nth-child(2) {
            transition-delay: 40ms;
        }

        .js [data-reveal-group].is-revealed > *:nth-child(3) {
            transition-delay: 80ms;
        }

        .js [data-reveal-group].is-revealed > *:nth-child(4) {
            transition-delay: 120ms;
        }

        .js [data-reveal-group].is-revealed > *:nth-child(5) {
            transition-delay: 160ms;
        }

        .js [data-reveal-group].is-revealed > *:nth-child(n + 6) {
            transition-delay: 200ms;
        }
    }
}