/* One short acknowledgement; page content itself never participates in navigation motion. */
:root {
    --xtore-motion-press: 100ms;
    --xtore-motion-state: 180ms;
    --xtore-motion-ease: cubic-bezier(.16, 1, .3, 1);
}
html[data-xtore-motion="ready"] { view-transition-name: none; }

html .xtore-ui [data-xtore-selection][data-xtore-selection-ready="true"] {
    position: relative;
    isolation: isolate;
    background: transparent !important;
}
.xtore-selection-motion {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: var(--ui-selection, var(--svc-selection-surface));
}
[data-xtore-selection-ready="true"]:hover > .xtore-selection-motion {
    background: var(--ui-selection-hover, var(--svc-selection-surface-hover));
}

@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    .xtore-ui [data-xtore-header] { transition: box-shadow var(--xtore-motion-state) var(--xtore-motion-ease); }
    .svc-header-button { transition: background-color var(--xtore-motion-press) var(--xtore-motion-ease); }
    .svc-header-button[data-service-preferences] > svg { transition: transform var(--xtore-motion-state) var(--xtore-motion-ease); }

    ::view-transition-group(*) {
        animation-duration: 180ms;
        animation-timing-function: cubic-bezier(.16, 1, .3, 1);
    }
    ::view-transition-old(*), ::view-transition-new(*) {
        animation-duration: 180ms;
        mix-blend-mode: normal;
    }
    /* Prevent an accidental whole-page fade even if another stylesheet names the root. */
    ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) {
        animation: none !important;
    }
    ::view-transition-old(root) { display: none; }

    :where(button, a[href], summary, [role="button"]):not(:disabled):not([aria-disabled="true"]):not([data-xtore-motion="off"]):active {
        animation: xtore-control-press 100ms cubic-bezier(.16, 1, .3, 1) both;
    }
    [data-xtore-check="true"] {
        stroke-dasharray: var(--xtore-check-length);
        animation: xtore-confirmed-check 180ms cubic-bezier(.16, 1, .3, 1) both;
    }
}

@keyframes xtore-control-press {
    from { scale: 1; }
    to { scale: .98; }
}
@keyframes xtore-confirmed-check {
    from { stroke-dashoffset: var(--xtore-check-length); }
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    html[data-xtore-motion="ready"] *, html[data-xtore-motion="ready"] *::before, html[data-xtore-motion="ready"] *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
