/*─────────────────────────────────────────────────────────────────────────────
  Store → product transition.

  Deliberately one effect and nothing else: the tapped photograph travels from
  the grid card to the hero, and the page cross-fades under it. Fast, standard
  easing, no overshoot.

  Removed, because together they read as a jumbled mess: per-region staggered
  entrances (four separate transition names animating on four different delays
  over a cross-fading root), scroll-driven parallax on the hero, scroll-driven
  fades on every section, and a press-scale on the cards. Each seemed small on
  its own; layered they made the page feel slow and busy.
  ─────────────────────────────────────────────────────────────────────────────*/

@view-transition { navigation: auto; }

/* One shared element. js/pdp-motion.js stamps the tapped card image on the
   store; these are its counterparts on the two product pages. */
.animal-v2 .an-art img,
.animal-v2 .an-art .pdp-hero-preview,
.product-v2 .product-gallery-main img,
.product-v2 .product-gallery-skeleton .pdp-hero-preview {
  view-transition-name: product-hero;
}

/* Show only the destination image while it travels. Cross-fading a
   cover-cropped thumbnail into a contained illustration reads as a smear. */
::view-transition-old(product-hero) { display: none; }
::view-transition-new(product-hero) { animation: none; height: 100%; object-fit: contain; }

::view-transition-group(product-hero) {
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  z-index: 5;
}

/* The page underneath: a plain, quick cross-fade. */
::view-transition-old(root) { animation: pdp-out 160ms ease-in both; }
::view-transition-new(root) { animation: pdp-in 220ms ease-out both; }
@keyframes pdp-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pdp-out { from { opacity: 1; } to { opacity: 0; } }

/* Placeholder painted into the hero frame before first render, so the
   photograph has somewhere to land while the real image loads. */
.pdp-hero-preview { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.animal-v2 .an-hero.is-product .pdp-hero-preview,
.product-v2 .pdp-hero-preview { width: 100%; height: 100%; object-fit: cover; }

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