/* KAGT page transitions for kagt.co.uk (a multi-page site).
   Cross-document view transitions: Chrome and Edge 126+, Safari 18.2+. Other browsers change page
   without animation, which is fine. Both pages must include this file.

   - The logo in the site header keeps still while the page changes: give it class="kagt-site-logo".
   - The page content fades out quickly and rises in.
   - Opening a project: give the project's card tile and the project page's header tile the same
     style="view-transition-name: project-<slug>" (unique per page), and the tile grows into the header. */

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

  .kagt-site-logo { view-transition-name: kagt-logo; }

  ::view-transition-old(root) { animation: kagt-page-out 140ms cubic-bezier(.2, .7, .2, 1) both; }
  ::view-transition-new(root) { animation: kagt-page-in 260ms cubic-bezier(.2, .7, .2, 1) 60ms both; }
  ::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
}

@keyframes kagt-page-out { to { opacity: 0; } }
@keyframes kagt-page-in { from { opacity: 0; transform: translateY(8px); } }