/**
 * View Transition defaults plus a progressively enhanced view router.
 * Router host: view-transitions, view-transition, [data-view-transitions], .view-transitions
 * Page host: view-page, [data-view-page], .view-page
 */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--view-transition-duration, 400ms);
  animation-timing-function: var(--view-transition-easing, cubic-bezier(0.45, 0, 0.55, 1));
  animation-fill-mode: both;
}

::view-transition-old(root) {
  animation-name: view-slide-to-left-fade-out;
}

::view-transition-new(root) {
  animation-name: view-slide-from-right-fade-in;
}

::view-transition-group(hero-element) {
  animation-timing-function: var(--view-transition-hero-easing, cubic-bezier(0.76, 0, 0.24, 1));
}

:is(view-transitions, view-transition, [data-view-transitions], .view-transitions) {
  position: relative;
  display: block;
}

:is(view-page, [data-view-page], .view-page) {
  display: none;
}

:is(view-page, [data-view-page], .view-page)[active] {
  display: block;
}

/* Before JavaScript initializes, hash targets provide view switching. */
:is(view-transitions, view-transition, [data-view-transitions], .view-transitions):not(
  [data-view-transitions-initialized="true"]
):has(
  :is(view-page, [data-view-page], .view-page):target
) :is(view-page, [data-view-page], .view-page):target {
  display: block;
}

/* A hash target wins over the server-rendered initial page before enhancement. */
:is(view-transitions, view-transition, [data-view-transitions], .view-transitions):not(
  [data-view-transitions-initialized="true"]
):has(
  :is(view-page, [data-view-page], .view-page):target
) :is(view-page, [data-view-page], .view-page)[active]:not(:target) {
  display: none;
}

@keyframes view-slide-to-left-fade-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-3rem); }
}

@keyframes view-slide-from-right-fade-in {
  from { opacity: 0; transform: translateX(3rem); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(hero-element) {
    animation: none;
  }
}