shalom

styles.css

@@ -731,6 +731,174 @@ body {
   text-shadow: 0 0 16px var(--red);
 }
 
+/* ===== Effetto SHALOM (vittoria stanze con idromassaggio) ===== */
+.shalom-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: none;
+  overflow: hidden;
+  background: rgba(4, 2, 9, 0.94);
+}
+.shalom-overlay.on {
+  display: block;
+  animation: shalomBang 0.5s ease; /* flashbang bianco iniziale */
+}
+@keyframes shalomBang {
+  0% { background: #fff; }
+  35% { background: #fff; }
+  100% { background: rgba(4, 2, 9, 0.94); }
+}
+.shalom-skip {
+  position: absolute;
+  bottom: 16px;
+  right: 22px;
+  z-index: 3;
+  font-family: "Bebas Neue", sans-serif;
+  letter-spacing: 2px;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.55);
+}
+
+/* fiammate dai due angoli in basso */
+.shalom-flames {
+  position: absolute;
+  bottom: -6%;
+  width: 50vw;
+  height: 92vh;
+  pointer-events: none;
+  opacity: 0;
+  filter: blur(2px);
+  mix-blend-mode: screen;
+  background:
+    radial-gradient(55% 42% at 50% 100%, rgba(255, 235, 140, 0.95), transparent 70%),
+    linear-gradient(0deg, #ff2d00 0%, #ff7a00 26%, #ffd23f 48%, rgba(255, 210, 63, 0) 74%);
+}
+.shalom-flames.left {
+  left: -8%;
+  transform-origin: bottom left;
+}
+.shalom-flames.right {
+  right: -8%;
+  transform-origin: bottom right;
+}
+.shalom-overlay.mode-fire .shalom-flames {
+  opacity: 1;
+  animation: flames 0.26s infinite alternate;
+}
+.shalom-overlay.mode-fire .shalom-flames.right {
+  animation-delay: 0.13s;
+}
+@keyframes flames {
+  0% { transform: scaleY(1) scaleX(1) skewX(0deg); }
+  100% { transform: scaleY(1.14) scaleX(0.92) skewX(4deg); }
+}
+
+/* leone che irrompe */
+.shalom-lion {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: min(46vw, 520px);
+  border-radius: 16px;
+  transform: translate(-50%, -50%) scale(0.2);
+  opacity: 0;
+  filter: drop-shadow(0 0 40px #ff6a00);
+}
+.shalom-overlay.mode-fire .shalom-lion {
+  animation: lionSlam 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) forwards,
+    lionPulse 1.1s 0.6s infinite;
+}
+@keyframes lionSlam {
+  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-7deg); }
+  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); }
+  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
+}
+@keyframes lionPulse {
+  0%, 100% { filter: drop-shadow(0 0 40px #ff6a00); }
+  50% { filter: drop-shadow(0 0 75px #ff2e00); }
+}
+
+/* video a schermo intero */
+.shalom-video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+}
+.shalom-overlay.mode-video .shalom-flames,
+.shalom-overlay.mode-video .shalom-lion {
+  display: none;
+}
+.shalom-overlay.mode-video .shalom-video {
+  opacity: 1;
+}
+
+/* effetto GESÙ: raggi di luce + immagine che scende dall'alto */
+.shalom-rays {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 180vmax;
+  height: 180vmax;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  pointer-events: none;
+  mix-blend-mode: screen;
+  background: repeating-conic-gradient(
+    from 0deg,
+    rgba(255, 240, 200, 0) 0deg,
+    rgba(255, 240, 200, 0.3) 3.5deg,
+    rgba(255, 240, 200, 0) 7deg
+  );
+  -webkit-mask: radial-gradient(closest-side, #000 26%, transparent 72%);
+  mask: radial-gradient(closest-side, #000 26%, transparent 72%);
+}
+.shalom-overlay.mode-gesu .shalom-rays {
+  opacity: 1;
+  animation: shalomRays 26s linear infinite;
+}
+@keyframes shalomRays {
+  to { transform: translate(-50%, -50%) rotate(360deg); }
+}
+.shalom-gesu {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: min(42vw, 460px);
+  border-radius: 14px;
+  transform: translate(-50%, -160%);
+  opacity: 0;
+  filter: drop-shadow(0 0 55px rgba(255, 240, 180, 0.9));
+}
+.shalom-overlay.mode-gesu .shalom-gesu {
+  animation: gesuDescend 1.7s cubic-bezier(0.16, 0.8, 0.3, 1) forwards,
+    gesuFloat 4.5s 1.7s ease-in-out infinite;
+}
+@keyframes gesuDescend {
+  0% { opacity: 0; transform: translate(-50%, -160%) scale(0.9); }
+  55% { opacity: 1; }
+  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+@keyframes gesuFloat {
+  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
+  50% { transform: translate(-50%, -50%) translateY(-14px); }
+}
+/* mostra solo gli elementi giusti per ciascuna modalità */
+.shalom-overlay.mode-fire .shalom-rays,
+.shalom-overlay.mode-fire .shalom-gesu,
+.shalom-overlay.mode-video .shalom-rays,
+.shalom-overlay.mode-video .shalom-gesu {
+  display: none;
+}
+.shalom-overlay.mode-gesu .shalom-flames,
+.shalom-overlay.mode-gesu .shalom-lion,
+.shalom-overlay.mode-gesu .shalom-video {
+  display: none;
+}
+
 @media (max-width: 980px) {
   .stage {
     grid-template-columns: 1fr;