/* ==========================================================================
   Cross-document page transitions.
   --------------------------------------------------------------------------
   Loaded by home, shop, product and about — NOT by checkout or the payment
   confirmation. Both the outgoing and incoming document have to opt in for a
   cross-document view transition to run, so leaving this file off those two
   pages makes every navigation into or out of checkout instant and still.

   Browsers without cross-document view transitions get a JS exit fade from
   motion.js instead (which stands down when this API is available).
   ========================================================================== */

@view-transition { navigation: auto; }

@keyframes fpr-page-out {
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes fpr-page-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* Exit resolves faster than the entrance so back/forward stays snappy. */
::view-transition-old(root) {
  animation: fpr-page-out 0.18s cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: fpr-page-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}