/* Round 28a (HDR-3, header r.321–328): one page sequence on view transitions, soft (scNav,
   15-nav.js) and hard (cross-document, sc-page-motion.js). Supplements sc-chrome-slide.css.
   Names only while a transition runs (html.sc-nav-vt): a permanent name is a stacking context.
   The order only when the header slots change (html.sc-nav-stage): the old content fades out
   at t=0, viewer and panes follow at --sc-stage, the new content at 2x.
   Run 29a (HDR-1, header r.41–48, V2): a header slot is named per slot key (scSlotVt.name(),
   sc-slot-{key}), so slots of another key never pair: the old one leaves upwards out of view,
   then the new one enters from above, strictly in turn, never stretched or overlapping. */
:root {
    --sc-stage: calc(var(--sc-motion-d, 280ms) / 2);
    --sc-slot-d: calc(var(--sc-motion-d, 280ms) / 2);
}

html.sc-nav-vt .siteclick-bar-header [data-sc-slot-key] {
    view-transition-class: sc-slot;
}

/* A pair (same key) keeps its natural size: no stretch. */
::view-transition-old(*.sc-slot),
::view-transition-new(*.sc-slot) {
    inline-size: auto;
    block-size: auto;
}

::view-transition-old(*.sc-slot):only-child {
    animation: sc-slot-out var(--sc-slot-d) var(--sc-ease-in-out) both;
}

::view-transition-new(*.sc-slot):only-child {
    animation: sc-slot-in var(--sc-slot-d) var(--sc-ease-out) var(--sc-slot-d) both;
}

/* In the page without a navigation (41-header-context.js): enter waits for leave in JS.
   Leave last: a slot that leaves while it enters goes. */
.sc-slot-enter {
    animation: sc-slot-in var(--sc-slot-d) var(--sc-ease-out) both;
}

.sc-slot-leave {
    animation: sc-slot-out var(--sc-slot-d) var(--sc-ease-in-out) both;
}

@keyframes sc-slot-out {
    70% { opacity: 1; }
    to { translate: 0 calc(-1 * var(--sc-bar-h, 40px)); opacity: 0; }
}

@keyframes sc-slot-in {
    from { translate: 0 calc(-1 * var(--sc-bar-h, 40px)); opacity: 0; }
    30% { opacity: 1; }
}

html.sc-nav-stage::view-transition-group(sc-viewer),
html.sc-nav-stage::view-transition-old(sc-viewer),
html.sc-nav-stage::view-transition-new(sc-viewer),
html.sc-nav-stage::view-transition-group(sc-pane-l),
html.sc-nav-stage::view-transition-old(sc-pane-l),
html.sc-nav-stage::view-transition-new(sc-pane-l),
html.sc-nav-stage::view-transition-group(sc-pane-r),
html.sc-nav-stage::view-transition-old(sc-pane-r),
html.sc-nav-stage::view-transition-new(sc-pane-r) {
    animation-delay: var(--sc-stage);
}

html.sc-nav-stage::view-transition-new(sc-content) {
    animation-delay: calc(var(--sc-stage) * 2);
    animation-duration: var(--sc-dur-base, 200ms);
}

/* r.328: a load without a view transition fades the content in once (opacity only: a
   transform would move its fixed descendants). sc-page-motion.js drops the class. */
html.sc-reveal [data-sc-nav-root] {
    animation: sc-reveal var(--sc-dur-base, 200ms) var(--sc-motion-ease, ease) both;
}

@keyframes sc-reveal {
    from { opacity: 0; }
}

/* r.326: siteclickUi.refresh() after 150 ms: the old content dims under a loader overlay
   (.sc-loader--overlay, ui-loader.css). Zero specificity: a positioned element stays so. */
:where([data-sc-refresh]) {
    position: relative;
}

[data-sc-refresh] > :not(.sc-loader--overlay) {
    opacity: .6;
    transition: opacity var(--sc-dur-base, 200ms);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --sc-stage: 0ms;
        --sc-slot-d: 0ms;
    }

    html.sc-reveal [data-sc-nav-root] {
        animation: none;
    }
}