/* The existing still stays underneath throughout loading, playback and errors. */
[data-case-context="showcase"] .home-case-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, var(--case-drift, 0px), 0) scale(var(--case-zoom, 1.08));
  transition: opacity 220ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-case-context="showcase"] .is-preview-playing .home-case-preview { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-case-context="showcase"] .home-case-preview { transition: none; }
}