/* Page transitions (native cross-document View Transitions).
   Browsers without support simply navigate as before. */
@view-transition {
  navigation: auto;
}

/* Default: a short cross-fade (mobile, detail pages). */
::view-transition-group(*) {
  animation-duration: 260ms;
}

@media (min-width: 1024px) {
  /* Book metaphor: the cover and the spine are captured apart and stay still. */
  #leftSide.duo-cover { view-transition-name: cover; }
  .menu-container .duo-spine { view-transition-name: spine; }
}

/* Between two cover pages, the right-hand page turns around the spine
   (the "page-turn" type is set by includes/page-transitions.php). */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html:active-view-transition-type(page-turn)::view-transition-old(root) {
    z-index: 1;
    transform-origin: calc(50% + 2rem) 50%;
    backface-visibility: hidden;
    animation: duo-page-turn 620ms cubic-bezier(.45, .05, .55, .95) both;
  }

  html:active-view-transition-type(page-turn)::view-transition-new(root) {
    animation: duo-page-reveal 620ms ease-out both;
  }

  html:active-view-transition-type(page-turn)::view-transition-old(cover),
  html:active-view-transition-type(page-turn)::view-transition-new(cover) {
    animation: none;
  }
}

@keyframes duo-page-turn {
  from { transform: perspective(2400px) rotateY(0deg); filter: brightness(1); }
  to { transform: perspective(2400px) rotateY(-90deg); filter: brightness(.7); }
}

@keyframes duo-page-reveal {
  from { filter: brightness(.82); }
  to { filter: brightness(1); }
}

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

/* The cover stays on screen during the transition: don't replay its arrival. */
.vt-arrived .duo-cover .duo-cover__news,
.vt-arrived .duo-cover .duo-cover__logo-stage,
.vt-arrived .duo-cover .duo-cover__intro > *,
.vt-arrived .duo-cover .duo-cover__previous,
.vt-arrived .duo-cover .duo-cover__footer {
  animation: none;
}