/* =========================================================
   PRESENTAZIONE.CSS — LE TRE SCHERMATE A TUTTO SCHERMO DI SERVIZI (30-10, ultimo giro)
   Stessi tempi del caricamento della home (intro.css): lettere, linea, frase, le tre cose, i tasti.
   ========================================================= */
html.pres-aperta, html.pres-aperta body { overflow: hidden; }
.presentazione { position: fixed; inset: 0; z-index: 1000; background: radial-gradient(60% 50% at 50% 45%, rgba(45, 212, 191, 0.10), transparent 70%), var(--bg); }
.presentazione[hidden] { display: none; }
.presentazione.esce { animation: pres-esce 0.6s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes pres-esce { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
.pres-schermo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; overflow-y: auto; }
.pres-schermo[hidden] { display: none; }
.pres-schermo.via > * { transition: opacity .35s ease, transform .38s cubic-bezier(.7, 0, .3, 1); opacity: 0 !important; transform: translateY(-12px) !important; }

.pres-passo { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); opacity: 0; }
.pres-nome { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.6rem, 9vw, 5.6rem); line-height: 1.05; margin: 0; display: flex; }
.pres-frase { margin: 0; font-family: var(--font-mono); font-size: clamp(0.9rem, 2.4vw, 1.1rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); opacity: 0; }
.pres-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 14px; margin-top: 8px; }
.pres-cosa { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary); text-decoration: none; opacity: 0; position: relative; }
.pres-cosa strong { color: var(--text-primary); font-family: var(--font-display); font-size: 1.05rem; }
.pres-cosa .pack-bonus-etichetta { position: absolute; top: -11px; }
a.pres-cosa:hover { border-color: var(--border-strong); }
.pres-cosa-1 { border-top: 2px solid #2bbac1; } .pres-cosa-2 { border-top: 2px solid #30aff8; } .pres-cosa-3 { border-top: 2px solid #8e7cf6; }
.pres-azioni { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; opacity: 0; }
.pres-avanti { padding: 14px 34px; border-radius: 999px; font-size: 1.05rem; }
.pres-vai, .pres-indietro { background: none; border: none; font: inherit; font-size: 0.85rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pres-vai:hover, .pres-indietro:hover { color: var(--text-primary); }
.pres-indietro { position: absolute; left: 24px; top: 24px; text-decoration: none; opacity: 0; }
@media (max-width: 700px) { .pres-tre { grid-template-columns: 1fr; width: min(320px, 90vw); } }

/* i tempi, gli stessi della home: le lettere da 0,2 s, la linea a 1 s, la frase, le tre cose, i tasti */
.pres-schermo.in-scena .pres-passo { animation: intro-entra 0.6s ease 0.05s forwards; }
.pres-schermo.in-scena .pres-nome span { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(18px) scale(1.1);
  animation: intro-lettera 0.6s cubic-bezier(.2, .7, .2, 1) calc(0.2s + var(--i) * var(--intro-lettera, 0.06s)) forwards; }
.pres-schermo.in-scena .intro-linea { animation: intro-linea 0.8s cubic-bezier(.6, 0, .2, 1) 1s forwards; }
.pres-schermo.in-scena .pres-frase { animation: intro-entra 0.7s ease 1.6s forwards; }
.pres-schermo.in-scena .pres-cosa { animation: intro-chip 0.7s ease calc(2.3s + var(--k) * 0.3s) forwards; }
.pres-schermo.in-scena .pres-azioni { animation: intro-entra 0.7s ease 3.6s forwards; }
.pres-schermo.in-scena .pres-avanti { animation: intro-pulsa 2.4s ease-in-out 4.4s infinite; }
.pres-schermo.in-scena .pres-indietro { animation: intro-entra 0.6s ease 3.6s forwards; }
.pres-schermo.in-scena .pres-cosa { --chip-op: 1; }
@keyframes pres-cosa { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
.pres-schermo.in-scena .pres-cosa { animation-name: pres-cosa; }

/* --- 30-10, ultimo giro (rifatta): il contorno di ogni schermata, le schede vere, «Vai al sito» sempre in alto --- */
.pres-schermo { justify-content: flex-start; padding: 64px 24px 40px; }
.pres-dentro { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(1180px, 100%); margin: auto 0; }
.pres-riga { margin: 0; color: var(--text-secondary); max-width: 60ch; opacity: 0; }
.pres-carte { width: 100%; text-align: left; opacity: 1; }
.pres-carte .audit-versioni, .pres-carte .pack-grid { margin: 0; }
.pres-carte .scorrimento { margin: 6px 0 0; }
.pres-azioni { flex-direction: row; justify-content: center; flex-wrap: wrap; }
.pres-vai-sempre { position: fixed; top: 18px; right: 22px; z-index: 5; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; color: var(--text-secondary); font: inherit; font-size: 0.85rem; cursor: pointer; }
.pres-vai-sempre:hover { color: var(--text-primary); border-color: var(--border-strong); }
.pres-indietro { position: fixed; z-index: 5; }
/* 30-10: «Indietro» e «Vai al sito» restano fermi mentre la schermata scorre, quindi hanno un fondo
   che copre il testo che ci passa sotto */
.pres-indietro, .pres-vai-sempre { background: rgba(12, 13, 22, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pres-indietro { top: 18px; left: 16px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; }
.scorrimento a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.025); color: var(--text-secondary); font-size: 0.88rem; white-space: nowrap; text-decoration: none; }
.scorrimento a:hover { border-color: var(--accent-2); color: var(--text-primary); }
.scorrimento:hover .scorre-nastro { animation-play-state: paused; }

/* i contorni */
.pres-sfondo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
/* Capire: la lente che passa, e intorno le cose che guardiamo */
.pres-lente { position: absolute; width: 150px; left: 8%; top: 22%; fill: none; stroke: rgba(45, 212, 191, 0.35); stroke-width: 3; stroke-linecap: round; animation: lente-giro 9s ease-in-out infinite; }
@keyframes lente-giro { 0% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(62vw, 8vh) rotate(8deg); } 66% { transform: translate(30vw, 46vh) rotate(-6deg); } 100% { transform: translate(0, 0) rotate(0); } }
.pres-chip { position: absolute; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, 0.02); opacity: 0.55; animation: intro-chip-galleggia 6s ease-in-out calc(var(--n) * -0.7s) infinite alternate; }
/* Scegliere: le luci dei tre pacchetti e due anelli che girano */
.pres-luce { position: absolute; width: 46vmin; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: 0.35; animation: luce-respira 7s ease-in-out infinite alternate; }
.pres-luce-1 { background: #2bbac1; left: 4%; top: 40%; } .pres-luce-2 { background: #30aff8; left: 38%; top: 8%; animation-delay: -2s; } .pres-luce-3 { background: #8e7cf6; right: 4%; top: 46%; animation-delay: -4s; }
@keyframes luce-respira { to { transform: scale(1.2); opacity: 0.5; } }
.pres-anello { position: absolute; left: 50%; top: 50%; width: 120vmin; aspect-ratio: 1; margin: -60vmin 0 0 -60vmin; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.06); animation: alone-gira 60s linear infinite; }
.pres-anello-2 { width: 86vmin; margin: -43vmin 0 0 -43vmin; animation-duration: 40s; animation-direction: reverse; }
/* Personalizzare: i pezzi che cadono piano verso il carrello */
.pres-carrello { position: absolute; right: 6%; bottom: 8%; width: 110px; fill: none; stroke: rgba(45, 212, 191, 0.4); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: carrello-dondola 3s ease-in-out infinite; }
@keyframes carrello-dondola { 50% { transform: translateY(-6px) rotate(-3deg); } }
.pres-pezzo { position: absolute; top: -40px; font-size: 0.78rem; color: var(--text-muted); padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, 0.025);
  animation: pezzo-cade 11s linear calc(var(--n) * -1.3s) infinite; }
@keyframes pezzo-cade { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.6; } 85% { opacity: 0.6; } 100% { transform: translateY(110vh); opacity: 0; } }

/* i tempi: una schermata nuova si anima, una già vista torna pronta */
.pres-schermo.in-scena .pres-riga { animation: intro-entra 0.6s ease 2s forwards; }
.pres-schermo.in-scena .pres-carte .card, .pres-schermo.in-scena .pres-carte .scorrimento { opacity: 0; transform: translateY(24px); animation: palco-scheda 0.8s cubic-bezier(.2, .8, .2, 1) forwards; }
.pres-schermo.in-scena .pres-carte .card:nth-child(1), .pres-schermo.in-scena .pres-carte .scorrimento { animation-delay: 2.3s; }
.pres-schermo.in-scena .pres-carte .card:nth-child(2) { animation-delay: 2.55s; }
.pres-schermo.in-scena .pres-carte .card:nth-child(3) { animation-delay: 2.8s; }
.pres-schermo.gia-vista .pres-passo, .pres-schermo.gia-vista .pres-frase, .pres-schermo.gia-vista .pres-riga, .pres-schermo.gia-vista .pres-azioni, .pres-schermo.gia-vista .pres-indietro { opacity: 1; }
.pres-schermo.gia-vista .intro-linea { animation: none; transform: scaleX(1); }

/* sulle altre pagine, finché il percorso è aperto */
.percorso-barra { position: fixed; left: 18px; bottom: 18px; z-index: 60; display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 999px;
  background: var(--bg-card-hover, #1c1f30); border: 1px solid var(--border-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.percorso-barra a, .percorso-barra button { font: inherit; font-size: 0.85rem; padding: 8px 14px; border-radius: 999px; text-decoration: none; cursor: pointer; }
.percorso-torna { color: var(--bg); background: var(--accent-gradient); font-weight: 600; }
.percorso-sito { color: var(--text-secondary); background: none; border: none; }
.percorso-sito:hover { color: var(--text-primary); }
.pres-schermo { overflow-x: hidden; }

/* 30-10, il giro da telefono: su uno schermo stretto le etichette che galleggiano e i pezzi che cadono
   passavano sopra il testo. Sotto i 700px le etichette si tolgono e i pezzi restano, più tenui */
@media (max-width: 700px) {
  .pres-chip { display: none; }
  .pres-pezzo { animation-name: pezzo-cade-tenue; }
  @keyframes pezzo-cade-tenue { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.22; } 85% { opacity: 0.22; } 100% { transform: translateY(110vh); opacity: 0; } }
}

/* 30-10, gli scatti nell'arrivo a «Capire»: la pagina completa sta sotto la presentazione e il browser la calcolava
   tutta (anche quando arrivano i caratteri) mentre entravano le lettere. Finché la presentazione la copre, non si disegna.
   02-11: tranne Clara, che resta sempre disponibile (Marco: «Rendi Clara sempre disponibile») */
html.pres-copre body > :not(.presentazione):not(script):not(.chat-apri):not(.chat-pannello) { content-visibility: hidden; }
html.pres-copre .presentazione[hidden] { display: block; }

/* 30-10 notte: le carte della presentazione entrano solo con la loro animazione: nessuna dissolvenza ereditata */
.presentazione .pres-carte .card { transition: none; }