/* Shared image-plane interaction, independent of homepage slideshow geometry. */
.coordinate-popup .mockup-frame {
 transform:translateY(var(--preview-lift,0px)) rotateX(var(--popup-rx,2deg)) rotateY(var(--popup-ry,-3deg)) scale(var(--preview-scale,1));
 transition:border-color .25s ease,box-shadow .25s ease;
 box-shadow:0 1px 0 rgb(255 255 255 / .26) inset,
   var(--preview-shadow-x,0px) var(--preview-shadow-y,34px) 58px -14px rgb(0 0 0 / .78),
   0 0 14px rgb(137 204 246 / .055);
}
.coordinate-popup.is-preview-active .mockup-frame { border-color:rgb(225 244 255 / .74); }
.coordinate-popup .mockup-reflection {
 background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,50%),rgb(235 249 255 / .11),transparent 60%),
   linear-gradient(120deg,transparent 15%,rgb(233 246 255 / .065) var(--shine-x,50%),transparent 82%);
 opacity:.18;transition:opacity .25s;transform:translateZ(1px);
}
.coordinate-popup.is-preview-active .mockup-reflection { opacity:.8; }
.coordinate-popup .preview-port { position:absolute;width:0;height:0;pointer-events:none; }
.coordinate-popup .preview-port-0 { left:-1px;top:-1px; }
.coordinate-popup .preview-port-1 { right:-1px;top:-1px; }
.coordinate-popup .preview-port-2 { right:-1px;bottom:-1px; }
.coordinate-popup .preview-port-3 { left:-1px;bottom:-1px; }
@media(prefers-reduced-motion:reduce){
 .coordinate-popup .mockup-frame{transform:none;transition:none;}
 .coordinate-popup .mockup-reflection{transition:none;}
}