:root {
  --pf-cover-rigid-duration: 320ms;
  --pf-cover-rigid-ease: cubic-bezier(0.45, 0, 0.55, 1);
  --pf-cover-rigid-perspective: 960px;
}

/*
 * Airbnb and Grab are source composites, not separable phone assemblies.
 * Keep each original cover in its clipped gallery frame and transform that
 * entire plane. No cropped screen or reconstructed background is rendered.
 */
.portfolio__cover-motion {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .portfolio__cover--rigid-composite .portfolio__cover-image-wrap {
    transform: perspective(var(--pf-cover-rigid-perspective))
      translate3d(0, 0, 0)
      rotateX(0deg)
      rotateY(0deg)
      rotateZ(0deg)
      scale(1);
    transform-origin: center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform var(--pf-cover-rigid-duration) var(--pf-cover-rigid-ease);
  }

  .portfolio__cover--rigid-composite:hover .portfolio__cover-image-wrap,
  .portfolio__cover--rigid-composite:focus-visible .portfolio__cover-image-wrap {
    will-change: transform;
  }

  .portfolio__cover[data-slug="airbnb-homepage-2019"].portfolio__cover--rigid-composite:hover
    .portfolio__cover-image-wrap,
  .portfolio__cover[data-slug="airbnb-homepage-2019"].portfolio__cover--rigid-composite:focus-visible
    .portfolio__cover-image-wrap {
    transform: perspective(var(--pf-cover-rigid-perspective))
      translate3d(1px, -2px, 0)
      rotateX(0.35deg)
      rotateY(-0.75deg)
      rotateZ(0.12deg)
      scale(1.014);
  }

  .portfolio__cover[data-slug="grabmap"].portfolio__cover--rigid-composite:hover
    .portfolio__cover-image-wrap,
  .portfolio__cover[data-slug="grabmap"].portfolio__cover--rigid-composite:focus-visible
    .portfolio__cover-image-wrap {
    transform: perspective(var(--pf-cover-rigid-perspective))
      translate3d(-1px, -2px, 0)
      rotateX(0.45deg)
      rotateY(0.65deg)
      rotateZ(-0.12deg)
      scale(1.014);
  }
}