/* In-place changes as view transitions (page-swap.js): the part that changes (swap) rises a
   little into place as the old one fades, like the site's entrance (fadeSlideUp: 18px, .5s,
   style.css) but shorter and all at once; the series' head (swap-head) stays put. */

::view-transition-old(swap), ::view-transition-old(swap-list) { animation: 180ms ease-out both swap-fade-out; }
::view-transition-new(swap), ::view-transition-new(swap-list) { animation: 420ms cubic-bezier(.16, 1, .3, 1) both swap-rise-in; }
::view-transition-group(swap-head),
::view-transition-old(swap-head),
::view-transition-new(swap-head) {
    animation: none;
}
::view-transition-old(swap-head) { opacity: 0; }

/* The dashboard's views (index.html): the cards (swap) and the table (swap-list) come anew while
   the rest shows at once as it is, the rails' pills and the chart moving on their own. */
html[data-swap-root="still"]::view-transition-old(root) { animation: none; opacity: 0; }
html[data-swap-root="still"]::view-transition-new(root) { animation: none; }

/* The loading bar (page-swap.js progress): a thin line over the page's top edge, above the
   site's bar, creeping on toward its end while a swap waits, then full and fading out. Its own
   transition layer keeps it moving on top while the page changes under it. */
.swap-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    height: 3px;
    pointer-events: none;
    /* The cards' spotlight outline (style.css .spotlight-border), its head fading as the band does. */
    background: linear-gradient(90deg, rgba(99, 102, 241, .7), rgba(99, 102, 241, .7) 80%, rgba(99, 102, 241, 0));
    transform-origin: 0 50%;
    animation: swap-progress-creep 10s cubic-bezier(.05, .7, .1, 1) both;
    view-transition-name: swap-progress;
}
.swap-progress.is-done { animation: swap-progress-done 400ms ease-out both; }
::view-transition-group(swap-progress),
::view-transition-new(swap-progress) { animation: none; }
::view-transition-old(swap-progress) { display: none; }

/* Phones only for now (the user, 30.10): wider screens keep the page as it is meanwhile. */
@media (min-width: 640px) {
    .swap-progress { display: none; }
}

@keyframes swap-progress-creep { from { transform: scaleX(0); } to { transform: scaleX(.92); } }
@keyframes swap-progress-done {
    from { transform: scaleX(var(--from, .6)); opacity: 1; }
    60% { transform: scaleX(1); opacity: 1; }
    to { transform: scaleX(1); opacity: 0; }
}
@keyframes swap-fade-out { to { opacity: 0; } }
@keyframes swap-rise-in { from { opacity: 0; transform: translateY(calc(10px * var(--s, 1))); } }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    .swap-progress { animation: none; transform: scaleX(.5); }
    .swap-progress.is-done { animation: none; opacity: 0; }
}