@layer components {
    @media (prefers-reduced-motion: no-preference) {
        :root.js [data-reveal] {
            opacity: 0;
        }

        :root.js [data-reveal='shown'] {
            animation: reveal-rise 500ms ease-out both;
        }

        :root.js [data-reveal='shown'][data-reveal-still] {
            animation-name: reveal-fade;
        }

        @keyframes reveal-rise {
            from {
                opacity: 0;
                transform: translateY(1.5rem);
            }

            to {
                opacity: 1;
                transform: none;
            }
        }

        @keyframes reveal-fade {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    }
}