/*
 * Soft-nav transition styles.
 *
 * The transition is a simple opacity fade on the live <main> element,
 * driven by soft-nav.js toggling the `.is-soft-nav-hidden` class.
 *
 * We previously used the View Transitions API (Chromium 111+), but on
 * slower machines the browser's animation timing slipped relative to
 * the actual DOM swap and users saw both old and new <main> content
 * layered for a noticeable beat. A manual opacity fade is rock-solid
 * across browsers and hardware: <main> fades out, content is swapped
 * while invisible, <main> fades back in. There is no possible frame
 * where two pages can be visible at the same time, because there is
 * only ever ONE <main> element on the page.
 *
 * The fade is intentionally short (140ms) so navigation still feels
 * instant. During the fade-out the video background is the only thing
 * visible, which doubles as confirmation that the click registered.
 */

.idx main {
    transition: opacity 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.idx main.is-soft-nav-hidden {
    opacity: 0;
}

/* Honor the OS reduced-motion preference: skip the fade. The DOM still
 * swaps softly (no full reload, video still continuous), just without
 * the visual transition. soft-nav.js also short-circuits the wait, so
 * navigation completes immediately for these users. */
@media (prefers-reduced-motion: reduce) {
    .idx main {
        transition: none;
    }
}