/* Scroll-triggered films keep the existing card photograph and tap target intact. */
.animal-motion {isolation:isolate}
.animal-visual.animal-motion>img,
.product-tile .tile-photo.animal-motion>img {object-position:center}
/* Frame tall subjects around the face; the poster and film share every crop value. */
.product-tile>a[href="#/animals/giraffe"] .animal-motion {
  --animal-frame-size:220%;
  --animal-frame-left:-73%;
  --animal-frame-position:center top;
}
.product-tile>a[href="#/animals/red-panda"] .animal-motion {
  --animal-frame-size:160%;
  --animal-frame-left:-60%;
  --animal-frame-position:right 14%;
}
.product-tile>a:is([href="#/animals/giraffe"],[href="#/animals/red-panda"]) .animal-motion>:is(img,video) {
  position:absolute;
  inset:0 auto auto var(--animal-frame-left);
  width:var(--animal-frame-size);
  height:var(--animal-frame-size);
  max-width:none;
  object-fit:cover;
  object-position:var(--animal-frame-position);
}
.animal-motion:hover>:is(img,.animal-motion-video) {transform:scale(1.04)}
.animal-motion-video {
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease-out,transform .7s;
}
.animal-motion-video.is-playing {opacity:1}
/* Keep Pip's face and feet visible in the shorter mobile catalog crop. */
.animal-visual.penguin.animal-motion>:is(img,.animal-motion-video),
.product-tile>a[href="#/animals/penguin"] .tile-photo>:is(img,.animal-motion-video) {
  object-position:50% 65%;
}
.animal-motion>:is(.animal-tag,.round-arrow,.pill) {z-index:2}
html[data-motion-paused="true"] .animal-motion-video {opacity:0;transition:none}
@media(prefers-reduced-motion:reduce) {
  .animal-motion-video {opacity:0!important;transition:none}
}