/* Page-to-page transitions. Chrome, Edge and Safari 18.2+ use cross-document View Transitions:
   the header and the WhatsApp button stay in place while the page content fades and rises.
   Other browsers get the same fade from transitions.js (class .pt-fb on <html>). */
@view-transition { navigation: auto; }
.top { view-transition-name: site-header; }
.fab { view-transition-name: wa-fab; }
::view-transition-old(root) { animation: pt-out .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: pt-in .6s cubic-bezier(.2, .7, .15, 1) .08s both; }
::view-transition-group(site-header), ::view-transition-group(wa-fab) { animation-duration: .45s; }
@keyframes pt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes pt-in { from { opacity: 0; transform: translateY(18px); } }

.pt-fb main, .pt-fb footer, .pt-fb .order-band { animation: pt-in .6s cubic-bezier(.2, .7, .15, 1) backwards; }
.pt-fb.pt-leave main, .pt-fb.pt-leave footer, .pt-fb.pt-leave .order-band { animation: none; opacity: 0; transform: translateY(-12px); transition: opacity .24s, transform .24s; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .pt-fb main, .pt-fb footer, .pt-fb .order-band { animation: none !important; }
}