From 262199e31a6be7534a927b330a37d25d0dc6c736 Mon Sep 17 00:00:00 2001
From: Alberto Moretti <moretti919@gmail.com>
Date: Thu, 2 Jul 2026 13:45:13 +0200
Subject: [PATCH] zoom and shake

---
 app.js     | 11 +++++++++++
 styles.css | 20 ++++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/app.js b/app.js
index c2230c8..8160799 100644
--- a/app.js
+++ b/app.js
@@ -360,6 +360,16 @@
     }
     const stopTicks = () => (ticking = false);
 
+    // ZOOM sulla macchina + shake mentre gira
+    const slot = $(".slot");
+    slot.classList.add("zoom");
+    const shakeTimer = setTimeout(() => slot.classList.add("shake"), 460); // dopo lo zoom-in
+    const endZoom = () => {
+      clearTimeout(shakeTimer);
+      slot.classList.remove("shake"); // torna a scale(1.14) senza tremolio
+      requestAnimationFrame(() => slot.classList.remove("zoom")); // poi zoom-out fluido
+    };
+
     const stopRiser = Audio.riser(wantTease ? 4.6 : 4.2);
     startTicks();
 
@@ -409,6 +419,7 @@
       await sleep(260);
     }
     stopRiser();
+    endZoom(); // fine scroll: la macchina torna allo stato normale
   }
 
   /* ---------- Stato di gioco ---------- */
diff --git a/styles.css b/styles.css
index 43e0221..804a259 100644
--- a/styles.css
+++ b/styles.css
@@ -287,6 +287,26 @@ body {
   border: 3px solid var(--gold);
   box-shadow: 0 0 30px rgba(255, 158, 0, 0.5),
     inset 0 0 40px rgba(0, 0, 0, 0.6);
+  transform-origin: center center;
+  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
+}
+/* zoom in avanti durante lo spin */
+.slot.zoom {
+  transform: scale(1.14);
+  box-shadow: 0 0 70px rgba(255, 158, 0, 0.85), 0 0 120px rgba(255, 46, 136, 0.35),
+    inset 0 0 40px rgba(0, 0, 0, 0.6);
+  z-index: 20;
+}
+/* tremolio mantenendo lo zoom (le keyframe tengono scale(1.14)) */
+.slot.zoom.shake {
+  animation: slotShake 0.22s linear infinite;
+}
+@keyframes slotShake {
+  0%, 100% { transform: scale(1.14) translate(0, 0) rotate(0deg); }
+  20% { transform: scale(1.14) translate(-7px, 4px) rotate(-0.5deg); }
+  40% { transform: scale(1.14) translate(7px, -5px) rotate(0.5deg); }
+  60% { transform: scale(1.14) translate(-5px, 6px) rotate(-0.4deg); }
+  80% { transform: scale(1.14) translate(6px, -4px) rotate(0.4deg); }
 }
 .slot-side {
   width: 46px;