@layer components {

    /* The home hero only. The diagram carries its own blank band above the
       art, so the subheading's usual bottom margin doubles the gap. */
    .c-hero--figure .c-eyebrow::before {
        content: none;
    }

    .c-hero--figure .c-hero__sub {
        margin-bottom: var(--space-4);
    }

    /* ── Document journey (.c-journey) ──────────────────────────────
       The animated isometric diagram in the home-page hero. Inner SVG
       classes (.mv, .ch, .scan, ...) are short because the markup
       repeats them hundreds of times; every rule is scoped under
       .c-journey so they cannot leak. */
    .c-journey {
        margin: 0;
        padding: var(--space-6) var(--space-5);
        background: var(--color-surface-alt);
    }

    .c-journey__stage {
        position: relative;
    }

    .c-journey__svg {
        display: block;
        width: 100%;
        height: auto;
    }

    @keyframes c-journey-move {
        from { transform: translate(0, 0); }
        to   { transform: translate(var(--tx), var(--ty)); }
    }

    @keyframes c-journey-fade {
        0%, 3%    { opacity: 0; }
        9%, 91%   { opacity: 1; }
        97%, 100% { opacity: 0; }
    }

    @keyframes c-journey-seal {
        0%, 21.9% { opacity: 0; }
        22%, 100% { opacity: 1; }
    }

    @keyframes c-journey-chevron {
        0%, 100% { opacity: .32; }
        45%      { opacity: 1; }
    }

    @keyframes c-journey-scan {
        0%, 100% { opacity: .45; }
        50%      { opacity: 1; }
    }

    @keyframes c-journey-blip {
        0%, 100% { opacity: .25; }
        40%      { opacity: .95; }
    }

    .c-journey .mv {
        animation-name: c-journey-move;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
    }

    .c-journey .mvf {
        animation-name: c-journey-move, c-journey-fade;
    }

    .c-journey .sealon {
        opacity: 0;
        animation-name: c-journey-seal;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
    }

    .c-journey .ch,
    .c-journey .scan,
    .c-journey .blip {
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    .c-journey .ch { animation-name: c-journey-chevron; }
    .c-journey .scan { animation-name: c-journey-scan; }
    .c-journey .blip { animation-name: c-journey-blip; }

    /* The gate comes after every animation rule on purpose: a shorthand
       `animation:` below it would silently reset play-state to running.
       Motion runs only while the diagram is on screen and not paused. */
    .c-journey .mv,
    .c-journey .sealon,
    .c-journey .ch,
    .c-journey .scan,
    .c-journey .blip {
        animation-play-state: paused;
    }

    .c-journey.is-visible:not(.is-paused) .mv,
    .c-journey.is-visible:not(.is-paused) .sealon,
    .c-journey.is-visible:not(.is-paused) .ch,
    .c-journey.is-visible:not(.is-paused) .scan,
    .c-journey.is-visible:not(.is-paused) .blip {
        animation-play-state: running;
    }

    /* Sits on the artwork, in the empty corner to the right of the storage
       block, rather than in the margin above it where it reads as its own
       line. 11% / 3% is where the art's top-right corner falls in the
       1080 x 608 viewBox. */
    .c-journey__pause {
        position: absolute;
        right: 3%;
        top: 11%;
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        height: 2rem;
        padding: 0 var(--space-3);
        border-radius: var(--radius-pill);
        border: 1px solid var(--color-line);
        background: transparent;
        color: var(--color-ink-mute);
        font: 600 var(--fs-caption)/1 var(--font-body);
        letter-spacing: .03em;
        cursor: pointer;
    }

    .c-journey__pause:hover {
        color: var(--color-ink);
    }

    .c-journey__pause:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    .c-journey__play {
        display: none;
    }

    .c-journey.is-paused .c-journey__play {
        display: inline;
    }

    .c-journey.is-paused .c-journey__stop {
        display: none;
    }

    .c-journey__markers {
        display: none;
    }

    /* The numbered steps under the diagram, at every width. On desktop the
       diagram's own labels add the detail; on phones they are hidden. */
    .c-journey__list {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        margin: var(--space-6) 0 0;
        padding: 0;
        list-style: none;
    }

    .c-journey__list > li {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
    }

    .c-journey__n {
        flex: 0 0 1.5rem;
        height: 1.5rem;
        align-self: flex-start;
        margin-top: .1em;
        border-radius: var(--radius-circle);
        background: var(--color-accent);
        color: var(--color-on-dark);
        font: 700 var(--fs-ui-sm)/1 var(--font-body);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .c-journey__list p {
        margin: 0;
        font-size: var(--fs-body);
        line-height: 1.5;
        color: var(--color-ink-soft);
    }

    .c-journey__list b {
        font-weight: 600;
        color: var(--color-ink);
    }

    .c-journey__note {
        margin: var(--space-5) 0 0;
        padding-top: var(--space-5);
        border-top: 1px solid var(--color-line);
        font-size: var(--fs-body-sm);
        line-height: 1.5;
        color: var(--color-ink-soft);
    }

    /* Cards are staggered with negative delays, so paused IS the composed
       still picture — reduced motion gets it with nothing else to do. */
    @media (prefers-reduced-motion: reduce) {
        .c-journey.is-visible:not(.is-paused) .mv,
        .c-journey.is-visible:not(.is-paused) .sealon,
        .c-journey.is-visible:not(.is-paused) .ch,
        .c-journey.is-visible:not(.is-paused) .scan,
        .c-journey.is-visible:not(.is-paused) .blip {
            animation-play-state: paused;
        }

        .c-journey .sealon {
            opacity: 1;
        }

        .c-journey__pause {
            display: none;
        }
    }

    /* Phones: at this width the labels would be a few pixels high, so the
       diagram swaps them for numbered markers in the art. The panel bleeds
       to the screen edge by cancelling the hero's phone gutter (.c-hero,
       --space-5). */
    @media (max-width: 760px) {
        .c-journey {
            margin-inline: calc(var(--space-5) * -1);
        }

        .c-journey__labels {
            display: none;
        }

        /* The phone crop starts at the art, so its top-right corner is the stage's. */
        .c-journey__pause {
            right: 0;
            top: 0;
        }

        .c-journey__markers {
            display: inline;
        }
    }
}