/* =========================================================
   HOME-SCENA.CSS — LA HOME IN UNA SCHERMATA SOLA (02-11), vedi home-scena.js
   ---------------------------------------------------------
   Marco, 02-11 sera: «togli lo scorrimento e fai apparire tutto nella prima parte, facendo scomparire e apparire con
   animazione… va benissimo lo sfondo con il coso che gira». Lo sfondo resta quello dell'intro (l'alone che gira); sopra
   si alternano le scene. Senza JavaScript la pagina scorre come prima (.home-palco non c'è).
   ========================================================= */

/* le quattro sezioni (strumenti/genera-home.js): etichetta, titolo, parole che girano, un tasto */
.home-sezione { min-height: 80vh; min-height: 80svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 72px 16px; text-align: center; }
.home-sezione[hidden] { display: none; }
.home-sezione h2 { margin: 0; font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.1; max-width: 20ch; text-wrap: balance; }
.home-sezione .servizi-hero-ruota { margin: 0 0 8px; }
.home-sezione .btn { padding: 14px 34px; border-radius: 999px; font-size: 1.02rem; }

/* la schermata sola: niente scorrimento, lo sfondo dell'intro fermo dietro */
.home-palco, .home-palco body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.home-palco .intro[data-resta] { position: fixed; inset: 0; z-index: 1; min-height: 0; }
.home-palco main { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

/* le scene: quella che se ne va viene verso chi guarda e sfuma, quella nuova arriva da lontano */
.home-palco .home-sezione { position: absolute; inset: 0; min-height: 0; opacity: 0; visibility: hidden; transform: scale(0.94); pointer-events: none;
  transition: opacity 0.55s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0.8s; }
.home-palco .home-sezione.passata { transform: scale(1.07); }
.home-palco .home-sezione.qui { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0.18s, 0.18s, 0s; }
.home-palco .home-sezione.qui > * { animation: entra-su 0.7s cubic-bezier(.2, .8, .2, 1) both; }
.home-palco .home-sezione.qui > :nth-child(1) { animation-delay: 0.3s; }
.home-palco .home-sezione.qui > :nth-child(2) { animation-delay: 0.4s; }
.home-palco .home-sezione.qui > :nth-child(3) { animation-delay: 0.5s; }
.home-palco .home-sezione.qui > :nth-child(4) { animation-delay: 0.6s; }
@keyframes entra-su { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* l'intro è la prima scena: quando se ne va restano solo lo sfondo e l'alone */
.intro-centro { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.home-palco .intro-centro, .home-palco .intro-campo { transition: opacity 0.55s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1); }
.home-palco[data-scena]:not([data-scena="0"]) .intro-centro { opacity: 0; transform: scale(1.07); pointer-events: none; }
.home-palco[data-scena]:not([data-scena="0"]) .intro-campo { opacity: 0; }
.home-palco[data-scena]:not([data-scena="0"]) .intro-giu { visibility: hidden; }

/* i contatti di fondo pagina compaiono sull'ultima scena */
.home-palco footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
.home-palco[data-ultima] footer { opacity: 1; visibility: visible; transition-delay: 0.4s, 0s; }

@media (max-width: 600px) { .home-palco .home-sezione { padding: 72px 28px; } }

@media (prefers-reduced-motion: reduce) {
  .home-palco .home-sezione, .home-palco .intro-centro, .home-palco .intro-campo, .home-palco footer { transition: none; }
  .home-palco .home-sezione.qui > * { animation: none; }
}
.home-sezione .home-sotto { font-size: 0.9rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.home-sezione .home-sotto:hover { color: var(--text-primary); }
.home-palco .home-sezione.qui > :nth-child(5) { animation-delay: 0.7s; }