/* Both snapshots travel together; the header stays in place. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  :root { view-transition-name: none; }
  main { view-transition-name: folha-page; }
  ::view-transition { pointer-events: none; }
  ::view-transition-group(folha-page) { animation-duration: 1100ms; animation-timing-function: cubic-bezier(.4,0,.2,1); overflow: clip; }
  ::view-transition-image-pair(folha-page) { isolation: isolate; }
  ::view-transition-old(folha-page), ::view-transition-new(folha-page) {
    animation-duration: 1100ms;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
    animation-fill-mode: both;
    mix-blend-mode: normal;
    height: 100%;
    object-fit: none;
    object-position: top left;
  }
  ::view-transition-old(folha-page) { animation-name: folha-page-out-left; }
  ::view-transition-new(folha-page) { animation-name: folha-page-in-right; }
  :root:active-view-transition-type(folha-backwards)::view-transition-old(folha-page) { animation-name: folha-page-out-right; }
  :root:active-view-transition-type(folha-backwards)::view-transition-new(folha-page) { animation-name: folha-page-in-left; }
}
@keyframes folha-page-out-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes folha-page-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes folha-page-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes folha-page-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}