/* Story 1 progressive motion states and user-preference adaptations. */

/*
 * The waiting state must hold from the very first paint. These rules used to
 * also require data-reveal-state="waiting", which js/reveals.js sets — but that
 * module is deferred, so the targets painted fully opaque and then blinked out.
 * Matching on :not([data-reveal-state="revealed"]) keeps the same end state
 * while making the initial one correct before any script runs;
 * shared/js/loading-gate.js supplies story1-reveals-enhanced pre-paint.
 */
html.story1-reveals-enhanced #one[data-motion-state="running"]
    [data-story-reveal]:not([data-reveal-state="revealed"]) {
    opacity: 0;
}

html.story1-reveals-enhanced #one[data-motion-state="running"]
    .story1-scale-figure:not([data-reveal-state="revealed"]) {
    opacity: 0.9;
    transform: translateY(1rem) scale(0.98);
}

html.story1-reveals-enhanced #one[data-motion-state="running"]
    .story1-scale-figure[data-reveal-state="revealed"] {
    opacity: 1;
    transform: none;
    transition:
        opacity 700ms ease-out,
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.story1-reveals-enhanced #one[data-motion-state="running"]
    .story1-scale-figure::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        110deg,
        var(--color-surface),
        var(--color-surface-muted) 65%,
        transparent
    );
    opacity: 0.55;
    transform: scaleX(1);
    transform-origin: right center;
}

html.story1-reveals-enhanced #one[data-motion-state="running"]
    .story1-scale-figure[data-reveal-state="revealed"]::after {
    opacity: 0;
    transform: scaleX(0);
    transition:
        opacity 700ms ease-out,
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.story1-reveals-enhanced #one[data-motion-state="running"]
    [data-story-reveal="sequence"][data-reveal-state="revealed"] {
    opacity: 1;
    transition: opacity 300ms ease-out;
}

html.story1-reveals-enhanced #one[data-motion-state="running"]
    .img-three > :nth-child(2)[data-reveal-state="revealed"] {
    transition-delay: 80ms;
}

html.story1-reveals-enhanced #one[data-motion-state="running"]
    .img-three > :nth-child(3)[data-reveal-state="revealed"] {
    transition-delay: 160ms;
}

#one[data-motion-state="paused"] [data-story-motion="gif"]:not([data-motion-frame="frozen"]) {
    visibility: hidden;
}

#one[data-motion-state="paused"] [data-story-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

#one[data-motion-state="paused"] .story1-scale-figure::after {
    content: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html.story1-page {
        scroll-behavior: auto;
    }

    #one #main-content *,
    #one #main-content *::before,
    #one #main-content *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    #one [data-story-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    #one .story1-scale-figure::after {
        content: none !important;
    }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    #one #intro {
        background-image: none;
    }

    #one .introSection {
        grid-template-columns: minmax(0, 36rem);
    }

    #one .story1-figure-card {
        display: none;
    }

    #one .story1-scale-figure::after {
        content: none !important;
    }
}

@media (prefers-contrast: more) {
    #one #intro {
        background-image: none;
    }

    #one .story1-figure-card,
    #one .story1-heading,
    #one .story1-scale-figure,
    #one .img-above-text {
        border-width: 0.25rem;
    }

    #one .story1-figure-card,
    #one .story1-heading,
    #one .story1-scale-figure,
    #one .img-above-text {
        border-color: var(--color-heading);
    }
}

@media (forced-colors: active) {
    #one .story1-scale-figure,
    #one .img-above-text {
        border: 2px solid CanvasText;
        color: CanvasText;
        background: Canvas;
        box-shadow: none;
    }
}