feat(polaroid): springier browse slide (overshoot+settle) and subtle translucent swaying browse arrows to invite the flick

index.html

@@ -153,18 +153,27 @@
     @keyframes sozai-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
     @keyframes sozai-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-5px); opacity: 1; } }
     /* polaroid slide-in when browsing photos (item: moving/reveal effect) */
+    /* springy: overshoot, counter-settle, then rest — gives the browse weight */
     @keyframes sozai-slide-in-right {
-      0%   { transform: translateX(46%) rotate(5deg); opacity: 0; }
-      60%  { transform: translateX(-3%) rotate(-1.5deg); opacity: 1; }
-      100% { transform: translateX(0) rotate(0deg); opacity: 1; }
+      0%   { transform: translateX(54%) rotate(6deg) scale(0.95); opacity: 0; }
+      55%  { transform: translateX(-5%) rotate(-2.2deg) scale(1.025); opacity: 1; }
+      78%  { transform: translateX(2%) rotate(1deg) scale(0.995); }
+      100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
     }
     @keyframes sozai-slide-in-left {
-      0%   { transform: translateX(-46%) rotate(-5deg); opacity: 0; }
-      60%  { transform: translateX(3%) rotate(1.5deg); opacity: 1; }
-      100% { transform: translateX(0) rotate(0deg); opacity: 1; }
+      0%   { transform: translateX(-54%) rotate(-6deg) scale(0.95); opacity: 0; }
+      55%  { transform: translateX(5%) rotate(2.2deg) scale(1.025); opacity: 1; }
+      78%  { transform: translateX(-2%) rotate(-1deg) scale(0.995); }
+      100% { transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }
     }
-    .sozai-slide-right { animation: sozai-slide-in-right 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
-    .sozai-slide-left  { animation: sozai-slide-in-left 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
+    .sozai-slide-right { animation: sozai-slide-in-right 0.55s cubic-bezier(0.34, 1.42, 0.5, 1); }
+    .sozai-slide-left  { animation: sozai-slide-in-left 0.55s cubic-bezier(0.34, 1.42, 0.5, 1); }
+    /* gentle sway on the browse arrows, nudging toward the flick direction */
+    @keyframes sozai-sway-l { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-3px)} }
+    @keyframes sozai-sway-r { 0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)} }
+    .sozai-sway-l { animation: sozai-sway-l 1.9s ease-in-out infinite; }
+    .sozai-sway-r { animation: sozai-sway-r 1.9s ease-in-out infinite; }
+    @media (prefers-reduced-motion: reduce) { .sozai-sway-l, .sozai-sway-r { animation: none; } }
     /* (reduced motion is handled globally by the html.a11y-reduce-motion rule above) */
 
     /* polaroid teardown when the user removes it (presses ×) - it crumples,
@@ -2372,13 +2381,13 @@
               <input ref={addPhotoRef} type="file" accept={ACCEPT_ATTR} multiple className="hidden" onChange={onAddPhotos} />
               {stackPhotos.length >= 1 && (
                 <div className="flex items-start gap-3">
-                  <button type="button" onClick={() => changePhoto(-1)} aria-label="Previous photo" className="flex size-9 items-center justify-center rounded-full border-2 border-primary text-primary transition-colors hover:bg-accent"><ChevronLeft className="size-4" /></button>
+                  <button type="button" onClick={() => changePhoto(-1)} aria-label="Previous photo" className="sozai-sway-l flex size-9 items-center justify-center rounded-full border-2 border-primary/25 text-primary/55 transition-all hover:border-primary hover:bg-accent hover:text-primary"><ChevronLeft className="size-4" /></button>
                   <div className="flex flex-col items-center gap-1">
                     <button type="button" onClick={() => addPhotoRef.current && addPhotoRef.current.click()} aria-label="Add photos" title="Add photos" className="flex size-9 items-center justify-center rounded-full border-2 border-primary bg-primary text-primary-foreground transition-colors hover:opacity-90"><Plus className="size-4" /></button>
                     <span className="font-mono text-[9px] uppercase tracking-wide text-primary">upload</span>
                   </div>
                   <button type="button" onClick={onRemovePhoto} aria-label="Remove this photo" title="Remove this photo" className="flex size-9 items-center justify-center rounded-full border-2 border-[#800020] bg-[#800020] text-white transition-colors hover:opacity-90"><Trash2 className="size-4" /></button>
-                  <button type="button" onClick={() => changePhoto(1)} aria-label="Next photo" className="flex size-9 items-center justify-center rounded-full border-2 border-primary text-primary transition-colors hover:bg-accent"><ChevronRight className="size-4" /></button>
+                  <button type="button" onClick={() => changePhoto(1)} aria-label="Next photo" className="sozai-sway-r flex size-9 items-center justify-center rounded-full border-2 border-primary/25 text-primary/55 transition-all hover:border-primary hover:bg-accent hover:text-primary"><ChevronRight className="size-4" /></button>
                 </div>
               )}
               {/* How this works - fills the left-column negative space */}