/* Turn one complete viewport like a leaf hinged to the left edge.
   Native navigation keeps history, forms and focus behavior intact. */
@view-transition { navigation: auto; }

/* A single sheet prevents tall pages and separately animated chrome from
   stretching or drifting in different directions during navigation. */
::view-transition { background: #f6f3ec; }
::view-transition-group(root) { animation: none; perspective: 2200px; }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  backface-visibility: hidden;
}
::view-transition-old(root) {
  z-index: 2;
  transform-origin: 0% 50%;
  animation: ecw-leaf-open 950ms cubic-bezier(.38,.08,.18,1) both;
  box-shadow: 20px 0 60px #14212735;
}
::view-transition-new(root) {
  z-index: 1;
  animation: ecw-page-light 950ms ease-out both;
}
@keyframes ecw-leaf-open {
  0% { transform: perspective(2200px) rotateY(0deg); filter: brightness(1); opacity: 1; }
  45% { filter: brightness(.86); opacity: 1; }
  88% { opacity: 1; }
  100% { transform: perspective(2200px) rotateY(-100deg); filter: brightness(.72); opacity: 0; }
}
@keyframes ecw-page-light {
  from { filter: brightness(.78); }
  to { filter: brightness(1); }
}
/* Accessibility and unsupported browsers retain normal page navigation. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}