.product-transition {
  position: fixed;
  inset: 0;
  z-index: 2500;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.product-transition__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--theme-accent-rgb) / 0.16), transparent 32rem),
    rgba(12, 12, 12, 0.78);
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
}

.product-transition__image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  object-fit: contain;
  transform-origin: 0 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 34px 82px rgba(0, 0, 0, 0.42));
}

body.product-transition-active {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  .product-transition {
    display: none;
  }
}