/* AID20 shared motion layer.
   Keep layout in styles.css; this file owns only transitions/motion behavior. */

@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: aid20-header;
}

.brand {
  view-transition-name: aid20-brand;
}

.primary-nav {
  view-transition-name: aid20-nav;
}

main {
  view-transition-name: aid20-main;
}

::view-transition-group(aid20-header),
::view-transition-group(aid20-brand),
::view-transition-group(aid20-nav) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-old(aid20-main) {
  animation: aid20-page-out 160ms ease both;
}

::view-transition-new(aid20-main) {
  animation: aid20-page-in 320ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes aid20-page-out {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}