/* Seamless navigation across the whole ASA® site (Home, Work, Lore).
   Uses cross-document View Transitions: the browser keeps elements that share
   a `view-transition-name` on screen and morphs them between pages, so going
   from one page to another never feels like a cut.
   Needs the pages served over http (same origin) — Chrome 126+ / Safari 18.2+.
   Other browsers simply navigate as usual. */

@view-transition { navigation: auto; }

/* Persistent pieces */
.vt-logo { view-transition-name: asa-logo; }       /* scales/moves to its new size and place */
.vt-nav { view-transition-name: asa-nav; }         /* the menu never moves */
.vt-tagline { view-transition-name: asa-tagline; } /* home description: appears once the logo has landed */

:root {
  --vt-ease: cubic-bezier(.65, 0, .35, 1);   /* even in/out: moves from the first frame */
  --vt-dur: .7s;
}

/* Logo morph */
::view-transition-group(asa-logo) {
  animation-duration: var(--vt-dur);
  animation-timing-function: var(--vt-ease);
}
::view-transition-old(asa-logo),
::view-transition-new(asa-logo) {
  /* same SVG on both sides: no crossfade, just the scale */
  animation: none;
  mix-blend-mode: normal;
  height: 100%;
}
::view-transition-old(asa-logo) { opacity: 0; }
/* Shrinking (Home/About → Work/Lore): show the big outgoing logo instead,
   scaled down, so it stays sharp the whole way (types set in transitions.js) */
html:active-view-transition-type(logo-shrink)::view-transition-old(asa-logo) { opacity: 1; }
html:active-view-transition-type(logo-shrink)::view-transition-new(asa-logo) { opacity: 0; }

/* Work image → project page: the box moves to the centre, then expands to
   full screen (keyframes shaped in project.html). Same picture on both sides. */
::view-transition-group(asa-media) {
  animation-duration: 1.1s;
  animation-timing-function: cubic-bezier(.65, 0, .35, 1);
}
::view-transition-old(asa-media), ::view-transition-new(asa-media) {
  height: 100%; object-fit: cover;
}
::view-transition-old(asa-media) { animation: asa-vt-out .5s ease .3s both; }
::view-transition-new(asa-media) { animation: asa-vt-in .5s ease .3s both; }

/* [NEXT PROJECT]: same frame, the new picture wipes in from the bottom over
   the old one (the same wipe as the Work image) */
html:active-view-transition-type(next-project)::view-transition-group(asa-media) { animation-duration: .9s; }
html:active-view-transition-type(next-project)::view-transition-old(asa-media) { animation: none; }
html:active-view-transition-type(next-project)::view-transition-new(asa-media) {
  animation: asa-vt-wipe .9s cubic-bezier(.77, 0, .18, 1) both;
}
@keyframes asa-vt-wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Client feedback round 1 (confirmed): no picture morph Work → project, no
   wipe between projects — the page simply dissolves like the rest of the site.
   Add ?morph=1 to the URL to see the previous version again (transitions.js).
   Delete this rule to bring the transitions back for good. */
html:not(.vt-morph) .frame, html:not(.vt-morph) .media { view-transition-name: none !important; }

/* Menu stays put */
::view-transition-group(asa-nav) { animation-duration: 0s; }
::view-transition-old(asa-nav) { display: none; }
::view-transition-new(asa-nav) { animation: none; }

/* Description (Home, About): stays put between them; elsewhere it leaves
   fast, and on arrival its words reveal themselves (reveal.js) */
::view-transition-old(asa-tagline) { animation: asa-vt-out .25s ease both; }
::view-transition-new(asa-tagline) { animation: none; }

/* Everything else: the old page dissolves, the new one rises in softly */
::view-transition-old(root) { animation: asa-vt-out .2s ease both; }
::view-transition-new(root) { animation: asa-vt-in .6s ease .25s both; }

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

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}