@view-transition {
  navigation: auto;
}

.kds-header {
  view-transition-name: kion-header;
}

.page-content {
  view-transition-name: page-content;
}

.hero-wrap {
  view-transition-name: page-hero;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(page-content),
::view-transition-new(page-content),
::view-transition-old(page-hero),
::view-transition-new(page-hero) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .kds-header,
  .page-content,
  .hero-wrap {
    view-transition-name: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(page-content),
  ::view-transition-new(page-content),
  ::view-transition-old(page-hero),
  ::view-transition-new(page-hero) {
    animation: none;
  }
}