/* =========================================================
   INTRO.CSS — IL CARICAMENTO INIZIALE DELLA HOME
   ---------------------------------------------------------
   30-10 (Marco: «rendilo più particolare… un po' più lungo, e animato»):
   1. le lettere del nome entrano una alla volta, da sfocate a nitide
   2. sotto, una linea si accende dal centro
   3. i tre mestieri passano uno dopo l'altro, nello stesso posto
   4. lo slogan
   5. la tenda si chiude su una riga orizzontale e scopre la home
   Va da sola anche senza JavaScript; il JavaScript serve solo a
   saltarla con un clic e a non ripeterla nella stessa visita.

   I TEMPI — MODIFICA QUI. */
:root {
  --intro-lettera: 0.06s;   /* fra una lettera e la successiva */
  --intro-attesa: 4.6s;     /* quanto resta la tenda (prima 2.4s) */
  --intro-uscita: 0.9s;     /* quanto ci mette a chiudersi */
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(45, 212, 191, 0.10), transparent 70%),
    var(--bg);
  cursor: pointer;
  clip-path: inset(0 0 0 0);
  animation: intro-via var(--intro-uscita) cubic-bezier(.7, 0, .3, 1) var(--intro-attesa) forwards;
}

.intro-nome {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  line-height: 1.05;
  margin: 0;
  display: flex;
}
.intro-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)) forwards;
  /* il gradiente segue il nome intero, non la singola lettera */
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
}

.intro-linea {
  display: block;
  width: min(320px, 60vw);
  height: 2px;
  border-radius: 2px;
  background: var(--accent-gradient, linear-gradient(90deg, #2dd4bf, #8e88ff));
  transform: scaleX(0);
  animation: intro-linea 0.8s cubic-bezier(.6, 0, .2, 1) 1s forwards;
  box-shadow: 0 0 18px rgba(45, 212, 191, 0.5);
}

.intro-ruoli {
  position: relative;
  height: 1.6em;
  width: 100%;
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.intro-ruoli span {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: intro-ruolo 0.9s ease forwards;
}
.intro-ruoli span:nth-child(1) { animation-delay: 1.5s; }
.intro-ruoli span:nth-child(2) { animation-delay: 2.3s; }
.intro-ruoli span:nth-child(3) { animation: intro-ruolo-resta 0.6s ease 3.1s forwards; color: var(--accent-2); }

.intro-slogan {
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 4px 0 0;
  opacity: 0;
  animation: intro-entra 0.7s ease 3.6s forwards;
}

@keyframes intro-lettera { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes intro-linea { to { transform: scaleX(1); } }
@keyframes intro-ruolo {
  0%   { opacity: 0; transform: translateY(10px); }
  25%  { opacity: 1; transform: none; }
  75%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes intro-ruolo-resta {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* la tenda si chiude su una riga a metà schermo, poi sparisce */
@keyframes intro-via {
  70%  { clip-path: inset(49.5% 0 49.5% 0); opacity: 1; }
  100% { clip-path: inset(50% 0 50% 0); opacity: 0; visibility: hidden; }
}

/* Saltata con un clic, o già vista in questa visita */
.intro.intro-chiusa { animation: intro-via 0.45s cubic-bezier(.7, 0, .3, 1) forwards; }
.intro-vista .intro { display: none; }

/* Chi ha chiesto meno movimento non vede la tenda */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* --- 30-10 sera: la home. Più piena (foto, alone, servizi intorno), resta, e alla fine il tasto «Scopri di più» --- */
.intro[data-resta] { animation: none; cursor: default; }
.intro-vista .intro[data-resta] { display: flex; }
/* 02-11, Marco: «sotto la pagina principale metti il sito, questa fai che la hero». In home l'intro non copre più la
   pagina: è la prima schermata, alta quanto lo schermo, e sotto si scorre il sito (strumenti/genera-home.js) */
.page-home .intro[data-resta] { position: relative; inset: auto; z-index: 1; min-height: 100vh; min-height: 100svh; clip-path: none; }
.intro-giu { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted); text-decoration: none; opacity: 0; animation: intro-entra 0.6s ease 5s forwards; }
.intro-giu span { display: inline-block; animation: intro-giu 1.8s ease-in-out 5.6s infinite; }
.intro-giu:hover { color: var(--text-primary); }
@keyframes intro-giu { 50% { transform: translateY(5px); } }
.intro.subito .intro-giu, .intro-vista .intro[data-resta] .intro-giu { animation: none; opacity: 1; }
.page-home .home-collaborazioni { padding-top: 64px; }

.intro-foto { width: clamp(84px, 13vmin, 120px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 4px;
  border: 2px solid rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 6px rgba(108, 99, 255, 0.10), 0 18px 50px -18px rgba(108, 99, 255, 0.7);
  opacity: 0; transform: scale(0.8); animation: intro-foto 0.8s cubic-bezier(.2, .8, .2, 1) 0.05s forwards; }
.intro-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes intro-foto { to { opacity: 1; transform: none; } }

.intro-alone { position: absolute; width: min(72vmin, 640px); aspect-ratio: 1; border-radius: 50%; z-index: -1; opacity: 0; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(108, 99, 255, 0), rgba(108, 99, 255, 0.35), rgba(45, 212, 191, 0.30), rgba(108, 99, 255, 0) 70%);
  filter: blur(42px); animation: alone-entra 1.2s ease 0.4s forwards, alone-gira 10s linear infinite; }
@keyframes alone-entra { to { opacity: 1; } }
@keyframes alone-gira { to { transform: rotate(360deg); } }

.intro-campo { position: absolute; inset: 0; pointer-events: none; }
.intro-campo a { 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; animation: intro-chip 0.7s ease calc(1.2s + var(--n) * 0.2s) forwards, intro-chip-galleggia 6s ease-in-out calc(2s + var(--n) * 0.2s) infinite alternate; }
@keyframes intro-chip { from { opacity: 0; translate: 0 12px; } to { opacity: 0.6; translate: 0 0; visibility: visible; } }
@keyframes intro-chip-galleggia { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@media (max-width: 700px) { .intro-campo a:nth-child(n+7) { display: none; } }
/* 31-10: i nomi si cliccano (index.html). Finché un nome non è comparso non prende il clic (visibility nell'entrata),
   così chi tocca lo schermo per saltare il caricamento non finisce su un servizio per sbaglio. Al passaggio si accende */
.intro-campo a { pointer-events: auto; visibility: hidden; text-decoration: none; transition: color .2s, border-color .2s, background-color .2s; }
.intro-campo a:hover, .intro-campo a:focus-visible { opacity: 1 !important; color: var(--text-primary); border-color: var(--accent-2); background: rgba(45, 212, 191, 0.10); }

.intro-scopri { margin-top: 18px; padding: 14px 34px; border-radius: 999px; font-size: 1.05rem; opacity: 0; transform: translateY(10px); pointer-events: none;
  animation: intro-entra 0.7s ease 4.3s forwards, intro-pulsa 2.4s ease-in-out 5s infinite; }
.intro-scopri { pointer-events: auto; }
/* 02-11: due strade alla fine dell'intro, Servizi e Collaborazioni, una accanto all'altra (una sotto l'altra al telefono) */
.intro-scelte { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
.intro-scelte .intro-scopri.btn-outline { animation-delay: 4.45s, 5.2s; }
/* 02-11 notte, Marco: «Da telefono fai più piccoli i bottoni servizi, collaborazioni e Clara in home e mettili tutti in
   una barra. Leggibili». Al telefono i tre tasti stanno in una pillola sola, uno accanto all'altro; Servizi resta pieno */
@media (max-width: 600px) {
  .intro-scelte { flex-wrap: nowrap; gap: 4px; margin-top: 18px; padding: 4px; border: 1px solid var(--border-strong, rgba(255,255,255,.16)); border-radius: 999px;
    background: rgba(16, 18, 31, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: calc(100vw - 32px); }
  .intro-scelte .intro-scopri { margin-top: 0; padding: 10px 14px; font-size: 0.92rem; line-height: 1.2; white-space: nowrap; min-height: 40px; }
  .intro-scelte .intro-scopri.btn-outline { border-color: transparent; background: transparent; }
}
@media (max-width: 360px) { .intro-scelte .intro-scopri { padding: 9px 11px; font-size: 0.86rem; } }
@keyframes intro-pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.0); } 50% { box-shadow: 0 0 0 10px rgba(108, 99, 255, 0.12), 0 0 40px rgba(45, 212, 191, 0.25); } }

/* la schermata già finita: dopo un clic, o tornando nella stessa visita */
.intro.subito *, .intro-vista .intro[data-resta] * { animation-delay: 0s !important; }
.intro.subito .intro-nome span, .intro-vista .intro[data-resta] .intro-nome span { animation: none; opacity: 1; filter: none; transform: none; }
.intro.subito .intro-foto, .intro-vista .intro[data-resta] .intro-foto,
.intro.subito .intro-slogan, .intro-vista .intro[data-resta] .intro-slogan { animation: none; opacity: 1; transform: none; }
.intro.subito .intro-linea, .intro-vista .intro[data-resta] .intro-linea { animation: none; transform: scaleX(1); }
.intro.subito .intro-ruoli span, .intro-vista .intro[data-resta] .intro-ruoli span { animation: none; opacity: 0; }
.intro.subito .intro-ruoli span:nth-child(3), .intro-vista .intro[data-resta] .intro-ruoli span:nth-child(3) { opacity: 1; transform: none; }
.intro.subito .intro-campo a, .intro-vista .intro[data-resta] .intro-campo a { animation: intro-chip-galleggia 6s ease-in-out infinite alternate; opacity: 0.6; visibility: visible; }
.intro.subito .intro-alone, .intro-vista .intro[data-resta] .intro-alone { animation: alone-gira 10s linear infinite; opacity: 1; }
.intro.subito .intro-scopri, .intro-vista .intro[data-resta] .intro-scopri { animation: intro-pulsa 2.4s ease-in-out infinite; opacity: 1; transform: none; }

/* il tasto premuto: tutto si raccoglie verso il centro e sparisce, poi si apre Servizi */
.intro.intro-esce > * { transition: opacity .45s ease, transform .5s cubic-bezier(.7, 0, .3, 1); opacity: 0 !important; transform: scale(0.92) !important; }

/* --- la frase del caricamento di Servizi: le parole non si spezzano, va a capo fra una parola e l'altra --- */
.intro-frase { flex-wrap: wrap; justify-content: center; gap: 0 0.28em; font-size: clamp(2rem, 6.4vw, 4.2rem); max-width: 16ch; }
.intro-parola { display: inline-flex; white-space: nowrap; }
.intro-frase .intro-parola { animation: none; opacity: 1; filter: none; transform: none; }

/* 30-10, ultimo giro: sotto «Scopri di più», piccolo, «Vai al sito» (porta a Servizi con tutto visibile) */
.intro-vai { margin-top: 6px; font-size: 0.85rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; opacity: 0; animation: intro-entra 0.6s ease 4.6s forwards; }
.intro-vai:hover { color: var(--text-primary); }
/* 02-11: «Vai diretto» è una riga con due collegamenti, e solo i collegamenti sono sottolineati */
p.intro-vai { text-decoration: none; margin: 10px 0 0; }
p.intro-vai a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* 02-11, Marco: «non devi illuminarsi tutto. Quando passo su servizi si deve illuminare servizi, quando passo su
   collaborazioni deve illuminarsi collaborazioni»: la riga resta ferma, si accende solo la parola sotto il cursore */
p.intro-vai:hover { color: var(--text-muted); }
p.intro-vai a { padding: 2px 3px; border-radius: 6px; transition: color .2s ease, background-color .2s ease; }
p.intro-vai a:hover, p.intro-vai a:focus-visible { color: var(--accent-2); background: rgba(45, 212, 191, 0.12); }
.intro.subito .intro-vai, .intro-vista .intro[data-resta] .intro-vai { animation: none; opacity: 1; }

/* 30-10 notte, guardando il caricamento fotogramma per fotogramma (Marco: «ho visto che c'è qualcosa di sbagliato»):
   il nome aveva il gradiente «sul testo» (background-clip: text) sull'elemento intero, e il genitore dipingeva tutte le
   lettere, anche mentre loro erano ancora a opacità zero. Il nome compariva intero dal primo fotogramma e l'entrata
   lettera per lettera succedeva sotto, senza vedersi. Ora il genitore non dipinge niente: ogni lettera porta la sua
   fetta dello stesso gradiente (--x e --nome-w da main.js, allineaGradienti), così il colore resta continuo sul nome.
   Vale per la home, per Capire/Scegliere/Personalizzare e per i titoli dei palchi. */
.intro-nome.text-gradient { background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.intro-nome span {
  background: var(--accent-gradient) no-repeat;
  background-size: var(--nome-w, 100%) 100%;
  background-position: calc(-1 * var(--x, 0px)) 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.intro-nome .intro-parola { background: none; }
/* 30-10 notte, il caricamento da telefono fotogramma per fotogramma: «Recensioni» e «Meta Ads» stanno a metà altezza e
   da telefono finivano sopra il nome e la sua linea. Sotto i 600 px non ci sono; le altre otto restano ai bordi */
@media (max-width: 600px) { .intro-campo a:nth-child(3), .intro-campo a:nth-child(4) { display: none; } }
@media (max-width: 600px) { .intro-giu { bottom: 78px; } } /* sopra il tasto di Clara */