/* ============================================================================
   transitions.css — page-to-page motion (cross-document View Transitions)

   Every page links this file, which opts the whole site into same-origin
   navigation transitions. Browsers without support (Firefox today) simply
   load the next page; nothing here is needed for the site to work.

   What moves, and how:
     kg-topbar   the green top bar stays put while the content changes
     kg-wordmark "Kort og godt" slides from the Hub's position to the apps'
     kg-app      the card (or landmark) you clicked on the Hub grows into the
                 app, and shrinks back into it on "← Apps"
                 (named per navigation by assets/js/transitions.js)
     root        everything else cross-fades

   Curves are the motion tokens' (tokens.css): the morph is a "glide" — a
   surface travelling — and the cross-fade is "swift". They are written out
   here too because the legacy pages do not load tokens.css.
   ========================================================================== */

@view-transition { navigation: auto; }

/* Persistent chrome. Each page's top bar and wordmark carry these names
   (data-vt attributes in the markup, see below). */
[data-vt="topbar"]   { view-transition-name: kg-topbar; }
[data-vt="wordmark"] { view-transition-name: kg-wordmark; }
/* The app's content area — the destination of the card morph. */
[data-vt="app"]      { view-transition-name: kg-app; }

/* Root: the old page leaves quickly and the new one arrives a beat later,
   so the two never sit on top of each other as a muddy double exposure. */
::view-transition-old(root) { animation: vt-fade-out 140ms ease both; }
::view-transition-new(root) { animation: vt-fade-in 220ms ease 60ms both; }

::view-transition-group(kg-app) {
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);   /* glide */
}
/* The card and the app differ wildly in aspect ratio; stretching either
   image looks wrong, so both keep their own proportions and cross-fade. */
::view-transition-old(kg-app),
::view-transition-new(kg-app) {
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
/* The small image is gone before it has been scaled up far enough to blur;
   what the eye follows is the box growing and the new page settling in it. */
::view-transition-old(kg-app) { animation: vt-fade-out 120ms ease both; }
::view-transition-new(kg-app) { animation: vt-fade-in 220ms ease both; }

::view-transition-group(kg-topbar),
::view-transition-group(kg-wordmark) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);   /* settle */
}
/* The bars are the same green on both pages: no cross-fade flicker. */
::view-transition-old(kg-topbar) { animation: none; opacity: 0; }
::view-transition-new(kg-topbar) { animation: none; }

@keyframes vt-fade-out { to   { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}