/* Story 4 accessibility affordances. */

/* Placement only; appearance comes from the shared tonal button. */
.story4-motion-toggle {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
}

#four .header {
    position: relative;
}

html:not(.story4-motion-enabled) .story4-motion-toggle,
html.story4-ambient-hidden #particles-js {
    display: none;
}

/*
 * Stopping the ambient gradient.
 *
 * This needs the #four the splash rule carries. `#four .header` is 0-1-0-1
 * against this selector's 0-0-2-1, so the lower-specificity rule never
 * applied - and because the splash sets the `animation` shorthand, every
 * declaration of it reset animation-play-state back to running. Source order
 * does not help: specificity is resolved first.
 */
html.story4-ambient-hidden #four .header {
    animation-play-state: paused;
}

html.story4-flowing,
html.story4-flowing body#four {
    height: auto;
    min-height: 100%;
    overflow-x: clip;
}

html.story4-flowing #four .header {
    /* Back to a stacked column: the grid's bottom-left composition is for the
       animated splash, and here the scene summary becomes visible and must read
       in order after the title block. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 32rem;
    animation: none;
}

html.story4-flowing #four .story4-title-block {
    width: min(100% - 2rem, 52rem);
    margin: 0 auto;
}

html.story4-flowing #four #particles-js {
    display: none;
}

html.story4-flowing #four :where(.section1, .svgparts) {
    height: auto;
    min-height: 0;
    overflow: visible;
}

html.story4-flowing #four [class^="scene"],
html.story4-flowing #four [class*=" scene"] {
    box-sizing: border-box;
    height: auto;
    min-height: min(70svh, 40rem);
    overflow: clip;
    position: relative;
    inset: auto !important;
    transform: none !important;
}

html.story4-flowing #four .story4-scene-summary {
    position: relative;
    width: min(100% - 2rem, 52rem);
    height: auto;
    padding: 2rem 1rem 0;
    margin: 0 auto;
    overflow: visible;
    clip: auto;
    /* Inside the splash header, so it takes the splash text colour rather than
       the body colour, which was unreadable against the gradient. */
    color: var(--story4-splash-text);
    text-align: center;
    white-space: normal;
}

@media (prefers-reduced-transparency: reduce) {
    #four .header {
        background: #162a5b;
    }
}

@media (forced-colors: active) {
    /* Both splash rules are borders, so they would otherwise drop out. */
    #four .story4-title-block {
        border-inline-start-color: CanvasText;
    }

    #four .header .subtitle {
        border-block-start-color: CanvasText;
    }

    #four .story4-motion-toggle {
        border: 2px solid CanvasText;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
        forced-color-adjust: auto;
    }

    #four .story4-motion-toggle:focus-visible {
        outline-color: Highlight;
        box-shadow: none;
    }
}

/* The readable scene layout collapses to source order: prose, then artwork. */
html.story4-flowing #four .story4-scene {
    display: block;
    padding-inline: 0;
}

html.story4-flowing #four .story4-scene__prose {
    width: min(100% - 2rem, 52rem);
    margin-inline: auto;
    padding-block: clamp(2rem, 7vw, 5rem);
}

html.story4-flowing #four .story4-scene__stage {
    position: static;
    height: auto;
    /* `container-type: size` needs a definite height; with the stage flowing to
       auto, cqh resolves to zero and the plate collapses to its border. */
    container-type: normal;
}

html.story4-flowing #four .story4-scene .story4-scene__stage [class^="scene"] {
    width: 100%;
    height: auto;
    aspect-ratio: var(--story4-stage-ratio);
}

html.story4-flowing #four .story4-step {
    max-width: none;
    margin-bottom: 1.5rem;
    /* Releases a held scene's step along with the stage above. */
    position: static;
}

/* The hold spacer is pure scroll budget; flowing, there is nothing to hold. */
html.story4-flowing #four .story4-scene__hold {
    height: 0;
}