/* Apparition — modèle canonique ; son emploi : canon_appear.md. */

@layer components {
    @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
        [data-appear-ready] [data-appear-item]:not([data-appear-item="shown"]) {
            transform: translateY(-0.15em);
        }
        [data-appear-ready] :is(h1, h2, h3, h4, h5, h6)[data-appear-item]:not([data-appear-item="shown"]) {
            transform: translateY(0.55em);
        }
    }

    @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
        [data-appear]:not([data-appear-ready]),
        [data-appear-ready] [data-appear-item]:not([data-appear-item="shown"]) {
            opacity: 0;
        }
    }

    @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
        [data-appear-ready] [data-appear-item]:not([data-appear-item="shown"]) {
            transition: none;
        }
        [data-appear]:not([data-appear-ready]) {
            animation: appear-ready 0s 1.5s forwards;
        }
        [data-appear-item="shown"] {
            transition: opacity 330ms cubic-bezier(0.33, 1, 0.68, 1), transform 330ms cubic-bezier(0.33, 1, 0.68, 1);
        }
        :is(h1, h2, h3, h4, h5, h6)[data-appear-item="shown"] {
            transition: opacity 700ms cubic-bezier(0.61, 1, 0.88, 1), transform 500ms cubic-bezier(0.37, 0, 0.63, 1);
        }
    }
    @keyframes appear-ready {
        to {
            opacity: 1;
        }
    }
}