/* Perla: restrained photographic depth, with fixed text and layout. */
.perla-motion-frame { display: block; position: relative; overflow: hidden; isolation: isolate; }
.perla-motion-frame--story { width: 100%; height: 100%; min-height: 320px; }
.product-preview > .perla-motion-frame { padding: 0; }
.perla-motion-background { position: relative; overflow: hidden; isolation: isolate; }
.perla-motion-background > .perla-motion-surface { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.perla-motion-surface { transform: none; transform-origin: center; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .perla-motion-surface { transition: transform 550ms cubic-bezier(.2,.65,.25,1); }
  .perla-motion-active > .perla-motion-surface {
    transform: translate3d(var(--perla-image-x, 0px), var(--perla-image-y, 0px), 0) scale(var(--perla-image-scale, 1.02));
    transition-duration: 380ms;
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .perla-motion-surface { transform: none !important; transition: none !important; will-change: auto !important; }
}