/* the warp: a piece teleports from its card to the viewer in slices */
.os-warp { position: fixed; inset: 0; z-index: 140; pointer-events: none; overflow: hidden; }
.os-warp-slice { position: absolute; transform-origin: 0 0; background-repeat: no-repeat; will-change: transform, opacity, filter; }
.os-warp-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 250, 248, .85); box-shadow: 0 0 18px rgba(255, 250, 248, .6), 0 0 2px rgba(255, 250, 248, 1); will-change: transform, opacity; }
.os-warp-px { position: absolute; width: 3px; height: 3px; background: #FFFAF8; box-shadow: 0 0 6px rgba(255, 250, 248, .85); opacity: 0; animation: os-warp-px .72s cubic-bezier(.2, .9, .2, 1) forwards; }
@keyframes os-warp-px { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.5); } }
.os-warp-in { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.os-warp-in .os-warp-slice { transform-origin: 50% 50%; }