@view-transition {
  navigation: auto;
}

:root {
  --okra-product-transition-ease: cubic-bezier(.16, 1, .3, 1);
}

.product-card-transition-image,
.product-hero-transition-image {
  view-transition-name: none;
  transform-origin: center;
  backface-visibility: hidden;
}

.product-card-transition-image.is-product-transition-source,
.product-hero-transition-image.is-product-transition-target {
  contain: paint;
}

::view-transition-group(*) {
  animation-duration: 820ms;
  animation-timing-function: var(--okra-product-transition-ease);
}

::view-transition-image-pair(*) {
  isolation: isolate;
}

::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: inherit;
  animation-timing-function: inherit;
  backface-visibility: hidden;
  mix-blend-mode: normal;
  object-fit: contain;
}

::view-transition-group(root) {
  animation-duration: 320ms;
}

body.okra-dynamic-product-pdp .product-detail-reveal {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  will-change: opacity, transform;
}

body.okra-dynamic-product-pdp.is-product-ready .product-title-reveal {
  animation: okraProductDetailReveal 420ms var(--okra-product-transition-ease) 140ms both;
}

body.okra-dynamic-product-pdp.is-product-ready .product-price-reveal {
  animation: okraProductDetailReveal 420ms var(--okra-product-transition-ease) 230ms both;
}

body.okra-dynamic-product-pdp.is-product-ready .product-actions-reveal {
  animation: okraProductDetailReveal 460ms var(--okra-product-transition-ease) 330ms both;
}

html.okra-product-transition-arrival body.okra-dynamic-product-pdp.is-product-ready .product-title-reveal {
  animation-delay: 620ms;
}

html.okra-product-transition-arrival body.okra-dynamic-product-pdp.is-product-ready .product-price-reveal {
  animation-delay: 760ms;
}

html.okra-product-transition-arrival body.okra-dynamic-product-pdp.is-product-ready .product-actions-reveal {
  animation-delay: 900ms;
}

@keyframes okraProductDetailReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card-transition-image,
  .product-hero-transition-image {
    view-transition-name: none !important;
  }

  body.okra-dynamic-product-pdp .product-detail-reveal,
  body.okra-dynamic-product-pdp.is-product-ready .product-detail-reveal {
    opacity: 1;
    transform: none;
    animation: none !important;
    will-change: auto;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}