/* Page transitions.
   Paired with public/js/page-transitions.js.

   Two short animations: content rises and fades in on arrival, and fades and
   settles back on departure. Between them a navigation reads as one page giving
   way to another, rather than the new document appearing in a single frame with
   nothing to indicate the old one left.

   Only opacity and transform are animated. Both are handled by the compositor,
   so the transition does not compete with the browser laying out the page it is
   about to replace. */

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The element that carries the transition. On the dashboard this is the content
   column, so the sidebar and header stay put and only the region that actually
   changed animates. On the public page it is the body.

   The fill mode is `backwards`, not `both`, and the difference matters well
   beyond this animation. `both` retains the final keyframe after the animation
   ends, which leaves a transform applied permanently, and an element with a
   transform becomes the containing block for any `position: fixed` descendant.
   Every fixed element inside would then be positioned against this element
   rather than the viewport: the row action menus, which compute viewport
   coordinates and would land off screen, along with modals and the scroll to top
   button.

   `backwards` applies the opening keyframe before the animation starts, so there
   is no flash of unstyled content, and leaves no transform behind once it has
   finished. */
.main_dashboard-content,
body.page-transition-root {
    animation: pageEnter 260ms cubic-bezier(0.21, 1.02, 0.73, 1) backwards;
}

/* Leaving. Slightly faster than the entrance and travelling less, because the
   reader has already decided to go and is waiting on the next page. */
html.is-leaving .main_dashboard-content,
html.is-leaving body.page-transition-root {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 180ms ease-in, transform 180ms ease-in;
}

/* A transition is decoration. Where it has been asked not to move, the pages
   still change, they simply do so without travelling. */
@media (prefers-reduced-motion: reduce) {
    .main_dashboard-content,
    body.page-transition-root {
        animation: none;
    }

    html.is-leaving .main_dashboard-content,
    html.is-leaving body.page-transition-root {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Fullscreen.

   The browser resizes the window itself, instantly and outside any control the
   page has, so the switch cannot be animated while it happens. What can be
   softened is the arrival: the content scales up into its new size, which reads
   as the page adjusting rather than being replaced between two frames. */

@keyframes fullscreenSettle {
    from {
        opacity: 0.4;
        transform: scale(0.985);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fullscreen-settle {
    animation: fullscreenSettle 320ms cubic-bezier(0.21, 1.02, 0.73, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
    .fullscreen-settle {
        animation: none;
    }
}