@layer components {
    /* `clip` rather than `hidden`: hidden would make every section a scroll container. */
    .section--parallax {
        --scrim: 88%;

        position: relative;
        overflow: clip;
        isolation: isolate;
    }

    /* Depths carried over verbatim from the legacy site's per-section data attributes. */
    #hero {
        --depth: 0.2;
        --scrim: 62%;
    }

    #gallery {
        --depth: 0.1;
    }

    #philosophy,
    #services,
    #contact {
        --depth: 0.15;
    }

    /* --parallax-shift is written per-element by the Tier 1 rAF module; this is its resting value. */
    .parallax {
        --parallax-shift: 0px;

        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
    }

    .parallax__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* The scrim is what keeps --ink on a photograph legible; the hero carries less of it than the
       prose sections because it holds two short lines rather than a paragraph. */
    .parallax::after {
        content: '';
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--surface) var(--scrim), transparent);
    }

    @media (prefers-reduced-motion: no-preference) {
        /* Overscan only where the layer is going to travel; Tier 0 leaves it flush with the section. */
        :root.js .parallax {
            inset: calc(var(--depth) * -50vh) 0;
            transform: translate3d(0, var(--parallax-shift), 0);
        }

        @supports (animation-timeline: view()) {
            :root.js .parallax {
                animation: parallax-drift linear both;
                animation-timeline: view();
                animation-range: cover 0% cover 100%;
            }
        }

        @keyframes parallax-drift {
            from {
                transform: translate3d(0, calc(var(--depth) * 50vh), 0);
            }

            to {
                transform: translate3d(0, calc(var(--depth) * -50vh), 0);
            }
        }
    }
}