/* "Un tocco. Fatto.": il telefono si avvicina al pezzo e si apre il menu */
.tocco { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.tocco__passi { display: flex; flex-direction: column; gap: 28px; }
.tocco__passi ol { margin: 0; padding: 0; list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: 22px; }
.tocco__passi li { counter-increment: passo; display: grid; grid-template-columns: 44px 1fr; gap: 16px; color: var(--testo-tenue); }
.tocco__passi li::before {
  content: counter(passo);
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--rosso); color: #fff; font-weight: 800;
}
.tocco__passi strong { color: var(--testo); display: block; }

.tocco__scena {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--notte);
}
.tocco__pezzo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }
.tocco__telefono {
  position: absolute; left: 50%; top: 8%;
  width: 34%; aspect-ratio: 9 / 19;
  border-radius: 26px;
  background: #111; border: 3px solid #2b2b2e;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  transform: translate(-10%, -120%) rotate(-8deg);
}
.tocco__schermo {
  position: absolute; inset: 6px; border-radius: 20px;
  background: var(--latte);
  display: flex; flex-direction: column; gap: 8px; padding: 22% 12% 0;
  opacity: 0;
}
.tocco__schermo span { font-weight: 800; font-size: clamp(0.8rem, 1.6vw, 1.1rem); color: var(--rosso); }
.tocco__schermo i { display: block; height: 8px; border-radius: 4px; background: rgba(29, 29, 31, 0.12); }
.tocco__schermo i:nth-of-type(2) { width: 70%; }
.tocco__onde { position: absolute; left: 50%; top: 52%; }
.tocco__onde span {
  position: absolute; width: 60px; height: 60px; margin: -30px;
  border: 3px solid #FF4D63; border-radius: 50%; opacity: 0;
}

/* Parte quando la scena entra nello schermo (classe dal JS) */
.tocco__scena.attiva .tocco__telefono { animation: avvicina 4.5s var(--curva) infinite; }
.tocco__scena.attiva .tocco__schermo { animation: accendi 4.5s ease infinite; }
.tocco__scena.attiva .tocco__onde span { animation: onda 4.5s ease-out infinite; }
.tocco__scena.attiva .tocco__onde span:nth-child(2) { animation-delay: 0.2s; }
.tocco__scena.attiva .tocco__onde span:nth-child(3) { animation-delay: 0.4s; }

@keyframes avvicina {
  0%, 8% { transform: translate(-10%, -120%) rotate(-8deg); }
  30%, 80% { transform: translate(-50%, 0) rotate(0); }
  100% { transform: translate(-10%, -120%) rotate(-8deg); }
}
@keyframes accendi { 0%, 36% { opacity: 0; } 44%, 80% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes onda {
  0%, 30% { opacity: 0; transform: scale(0.4); }
  34% { opacity: 1; }
  50%, 100% { opacity: 0; transform: scale(2.6); }
}

@media (max-width: 800px) { .tocco { grid-template-columns: 1fr; } }