Add a drag-and-resize animation

A drawn pointer grabs the frame near its top edge, drags it across the
screen, lets go, then takes hold of one corner and pulls the frame to a
new size. Moves ease in and overshoot slightly before settling, and the
paths bow, so the motion reads as a hand rather than a tween.

The resize pins the opposite corner and keeps the aspect ratio locked —
a stretched video would read as broken, not as someone resizing — and
clamps the width to the room left before the corner leaves the screen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Tg15tLAuT6NrCE1ZxKVgDB

public/player/player.css

@@ -94,6 +94,37 @@ body {
   background: #000;
 }
 
+/* Lift the frame while the drag animation is holding it, the way a dragged
+   window separates from the desktop. */
+#frameMover.dragging #frameSkin {
+  box-shadow:
+    0 0 0 4px rgba(255, 79, 195, 0.75),
+    0 40px 100px rgba(0, 0, 0, 0.85);
+}
+
+/* --- the drawn pointer -------------------------------------------------- */
+
+/* Built and removed by the drag animation; nothing else on the page has one. */
+#pointer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  pointer-events: none;
+  will-change: transform;
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
+}
+
+#pointer svg {
+  display: block;
+  transition: transform 90ms ease;
+}
+
+/* The click itself: the arrow dips, so a grab is visible even mid-pause. */
+#pointer.down svg {
+  transform: scale(0.82);
+}
+
 .deck {
   position: absolute;
   inset: 0;