/* The inline head rule opts in before any network resource can block parsing. */

@keyframes product-page-in { from { opacity: 0; } }

html[data-product-transition]::view-transition-group(faaar-product-photo) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
  z-index: 2;
}
html[data-product-transition]::view-transition-image-pair(faaar-product-photo) { isolation: isolate; overflow: clip; }
html[data-product-transition]::view-transition-old(faaar-product-photo),
html[data-product-transition]::view-transition-new(faaar-product-photo) {
  width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal;
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
}
/* Keep the source opaque under the arriving page; never fade both to paper. */
html[data-product-transition]::view-transition-old(root) { animation: none; opacity: 1; }
html[data-product-transition]::view-transition-new(root) { animation: product-page-in 220ms ease-out both; mix-blend-mode: normal; }
html[data-product-transition]::view-transition-old(faaar-product-photo) { animation: none; opacity: 1; }
html[data-product-transition]::view-transition-new(faaar-product-photo) { animation: product-page-in 280ms ease-out both; }

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