/* ============================================================
   VIBEST — pagina Collaborazioni (22/09/2026)
   Base, header, menu e piede vengono da /theme-fumo.css; kicker, titolo,
   sottotitolo e la card "Scarica VIBEST" da /strumenti/strumento.css.
   Qui solo i pulsanti al neon, le schede delle persone e l'invito.
   Il colore di un neon è una terna RGB in --neon: una regola sola
   serve tutte le trasparenze, rgba(var(--neon), .5).
   ============================================================ */

.pagina-collab main { max-width: 860px; }

/* ---------- Il fumo (23/09/2026) ----------
   Il canvas WebGL sta sopra la nebbia ferma di theme-fumo.css (body::before, z 0) e sotto
   header/main/footer (z 1). #nebbia e' la riserva: si accende solo se il fumo vero non gira. */
#fumo, #nebbia { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#nebbia {
  display: none; inset: -20%; width: auto; height: auto;
  background:
    radial-gradient(45vmax 35vmax at 25% 30%, rgba(255,61,168,0.20), transparent 65%),
    radial-gradient(50vmax 40vmax at 75% 60%, rgba(122,0,255,0.24), transparent 65%),
    radial-gradient(40vmax 32vmax at 50% 88%, rgba(0,240,255,0.12), transparent 65%);
  animation: fogDrift 18s ease-in-out infinite alternate;
}
#nebbia.accesa { display: block; }
/* Sopra uno sbuffo chiaro la testata quasi trasparente perdeva le voci del menu */
.pagina-collab header { background: rgba(5,2,15,0.9); }
.collab-suggerimento {
  margin: -12px 0 28px; text-align: center; font-family: 'Orbitron', sans-serif;
  font-size: 0.7em; letter-spacing: 3px; text-transform: uppercase;
  color: var(--ciano); text-shadow: 0 0 12px rgba(0,240,255,0.6);
}
/* Il suggerimento parla di fumo: se il fumo non gira, non si mostra */
html:not(.fumo-acceso) .collab-suggerimento { display: none; }
.solo-dito { display: none; }
@media (pointer: coarse) { .solo-mouse { display: none; } .solo-dito { display: inline; } }
/* Il tasto del suono: sempre in basso a destra, compare solo se il fumo gira */
.fumo-audio {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 90; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(192,132,252,0.9); background: rgba(5,2,15,0.85); color: #fff;
  font-size: 1.15em; line-height: 1; cursor: pointer;
  box-shadow: 0 0 8px rgba(122,0,255,0.8), 0 0 24px rgba(122,0,255,0.35), inset 0 0 10px rgba(122,0,255,0.25);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s; -webkit-tap-highlight-color: transparent;
}
.fumo-audio:hover { transform: scale(1.08); }
.fumo-audio.muto { opacity: 0.6; border-color: rgba(154,154,176,0.6); box-shadow: none; }

/* ---------- L'invito (la cosa più importante della pagina) ---------- */
.collab-invito {
  margin: 8px 0 40px; padding: 26px 22px;
  border-radius: 20px;
  background: rgba(10,5,35,0.72);
  border: 1.5px solid rgba(255,61,168,0.4);
  box-shadow: 0 0 34px rgba(255,61,168,0.14);
  text-align: center;
}
.collab-invito h2 { margin: 0 0 10px; font-size: 1.45em; color: #fff; letter-spacing: 1px;
  text-shadow: 0 0 14px rgba(255,61,168,0.5); }
.collab-invito p { margin: 0 auto 20px; max-width: 520px; color: #d5d5e0; font-size: 0.98em; line-height: 1.55; }
.collab-invito .neon { width: 100%; max-width: 440px; justify-content: center; }

/* Se il mailto non apre niente (PC senza programma di posta): indirizzo, Copia e Gmail */
.mail-ripiego { margin: 14px auto 0; max-width: 440px; padding: 12px 14px; border-radius: 12px;
  background: rgba(10,5,35,0.85); border: 1px solid rgba(0,240,255,0.35);
  font-size: 0.88em; color: #d5d5e0; line-height: 1.5; text-align: center; }
.mail-ripiego strong { display: block; margin: 4px 0 2px; color: #fff; overflow-wrap: anywhere; }
.mail-ripiego-btn { display: inline-block; margin: 8px 4px 0; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.78em; letter-spacing: 1px; text-transform: uppercase;
  color: #fff; text-decoration: none; background: rgba(0,240,255,0.10); border: 1px solid rgba(0,240,255,0.6); }
.mail-ripiego-btn:hover { background: rgba(0,240,255,0.2); text-decoration: none; }

/* ---------- Titoli dei blocchi ---------- */
.collab-blocco { margin: 0 0 44px; }
.collab-titolo { text-align: center; font-size: 1.35em; letter-spacing: 2px; text-transform: uppercase;
  font-family: 'Orbitron', sans-serif; color: #fff; margin: 0 0 22px;
  text-shadow: 0 0 14px rgba(192,132,252,0.55); }
.collab-vuoto { text-align: center; color: #9a9ab0; margin: 0 0 40px; }
/* «Vuoi un sito anche tu?»: nel riquadro dell'invito, sotto «Proponi una collaborazione» */
.collab-invito .collab-cta, .collab-cta { margin: 20px auto 0; text-align: center; }
.collab-cta .neon { width: 100%; max-width: 440px; justify-content: center; }

/* ============================================================
   I PULSANTI AL NEON
   ============================================================ */
.neon {
  --neon: 0, 240, 255;
  position: relative; display: inline-flex; align-items: center; gap: 16px;
  padding: 16px 22px; border-radius: 16px;
  border: 1.5px solid rgba(var(--neon), 0.95);
  background: rgba(5,2,15,0.78);
  color: #fff; text-decoration: none;
  overflow: hidden; isolation: isolate;
  box-shadow:
    0 0 6px rgba(var(--neon), 0.9),
    0 0 22px rgba(var(--neon), 0.45),
    0 0 60px rgba(var(--neon), 0.18),
    inset 0 0 14px rgba(var(--neon), 0.22);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.neon-ciano  { --neon: 0, 240, 255; }
.neon-viola  { --neon: 192, 132, 252; }
.neon-fucsia { --neon: 255, 61, 168; }
.neon-oro    { --neon: 255, 210, 74; }
.neon-ig     { --neon: 255, 61, 168; }
.neon-vibest { --neon: 192, 132, 252; }

/* Il lampo di luce che attraversa il tasto al passaggio del mouse */
.neon::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(var(--neon), 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
a.neon:hover::before, a.neon:focus-visible::before { transform: translateX(120%); }
a.neon:hover, a.neon:focus-visible {
  text-decoration: none;
  transform: translateY(-3px) scale(1.015);
  background: rgba(var(--neon), 0.10);
  box-shadow:
    0 0 10px rgba(var(--neon), 1),
    0 0 36px rgba(var(--neon), 0.7),
    0 0 90px rgba(var(--neon), 0.35),
    inset 0 0 22px rgba(var(--neon), 0.35);
  outline: none;
}
a.neon:active { transform: scale(0.98); }

.neon-testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.neon-nome {
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.02em;
  letter-spacing: 2px; text-transform: uppercase; line-height: 1.25;
  /* la scritta è il gas: bianca al centro, colorata intorno */
  text-shadow: 0 0 4px rgba(255,255,255,0.7), 0 0 12px rgba(var(--neon), 1), 0 0 28px rgba(var(--neon), 0.8);
}
.neon-sotto { font-size: 0.86em; color: rgba(238,238,244,0.8); letter-spacing: 0.2px; line-height: 1.35; }
.neon-freccia { margin-left: auto; font-size: 1.3em; color: rgb(var(--neon));
  text-shadow: 0 0 10px rgba(var(--neon), 0.9); transition: transform 0.2s; }
a.neon:hover .neon-freccia { transform: translate(3px, -3px); }
.neon-icona { flex: 0 0 auto; width: 30px; height: 30px; color: rgb(var(--neon));
  filter: drop-shadow(0 0 8px rgba(var(--neon), 0.9)); }

/* Accensione: quando il tasto entra in pagina sfarfalla come un tubo appena acceso, poi resta fermo */
.neon.acceso { animation: neon-accensione 1.5s 0.15s both; }
@keyframes neon-accensione {
  0%   { opacity: 0;    filter: brightness(0.3); }
  8%   { opacity: 1;    filter: brightness(1.3); }
  12%  { opacity: 0.35; filter: brightness(0.4); }
  20%  { opacity: 1;    filter: brightness(1.2); }
  26%  { opacity: 0.55; filter: brightness(0.6); }
  34%  { opacity: 1;    filter: brightness(1.15); }
  100% { opacity: 1;    filter: none; }
}

/* ---------- Pulsanti delle piattaforme ----------
   Flex e non grid: con un pulsante solo una griglia lo stirerebbe per tutta la pagina.
   Così ognuno sta fra 320 e 560px e la fila resta centrata, che siano uno o dieci. */
.neon-griglia { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.neon-partner { display: flex; flex: 1 1 320px; max-width: 560px; padding: 22px 24px; min-height: 118px; border-radius: 20px; }
/* Il secondo tubo, più sottile, dentro il primo: è quello che fa «insegna» */
.neon-partner::after {
  content: ''; position: absolute; inset: 6px; border-radius: 14px;
  border: 1px solid rgba(var(--neon), 0.38);
  box-shadow: inset 0 0 18px rgba(var(--neon), 0.12);
  pointer-events: none; transition: border-color 0.2s;
}
a.neon-partner:hover::after { border-color: rgba(var(--neon), 0.8); }
.neon-partner .neon-nome { font-size: 1.25em; letter-spacing: 3px; }
.neon-partner .neon-sotto { font-size: 0.9em; }
.neon-logo {
  flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%;
  object-fit: contain; padding: 6px; background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(var(--neon), 0.8);
  box-shadow: 0 0 16px rgba(var(--neon), 0.6);
}
.neon-logo.tondo { object-fit: cover; padding: 0; }
.neon-logo-lettere {
  display: grid; place-items: center; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.3em;
  color: rgb(var(--neon)); text-shadow: 0 0 12px rgba(var(--neon), 0.9); background: rgba(var(--neon), 0.08);
}
/* Il logo respira piano: è l'unica cosa che si muove a tasto fermo */
a.neon-partner .neon-logo { animation: neon-respiro 3.6s ease-in-out infinite; }
@keyframes neon-respiro {
  0%, 100% { box-shadow: 0 0 14px rgba(var(--neon), 0.55); }
  50%      { box-shadow: 0 0 28px rgba(var(--neon), 0.95); }
}
/* Senza indirizzo: tubo spento, «in arrivo» */
.neon-spento { border-style: dashed; border-color: rgba(var(--neon), 0.35); box-shadow: none; color: #9a9ab0; }
.neon-spento .neon-nome { text-shadow: none; color: #9a9ab0; }
.neon-spento .neon-logo { box-shadow: none; filter: grayscale(1) opacity(0.6); animation: none; }
.neon-presto { margin-left: auto; font-size: 0.68em; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(var(--neon), 0.8); white-space: nowrap; }

/* ---------- Le schede delle persone ---------- */
.persone-griglia {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 340px));
  gap: 22px; justify-content: center;
}
.persona {
  --neon: 192, 132, 252;
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: rgba(10,5,35,0.74);
  border: 1px solid rgba(var(--neon), 0.4);
  box-shadow: 0 0 26px rgba(var(--neon), 0.16), 0 24px 60px rgba(0,0,0,0.45);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.persona:hover { transform: translateY(-5px); border-color: rgba(var(--neon), 0.85);
  box-shadow: 0 0 44px rgba(var(--neon), 0.34), 0 30px 70px rgba(0,0,0,0.5); }
.persona-foto { position: relative; width: 100%; aspect-ratio: 4 / 5; background: #0a0523; overflow: hidden; }
.persona-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.persona:hover .persona-foto img { transform: scale(1.05); }
/* sfumatura in basso: la foto si scioglie nella scheda */
.persona-foto::after { content: ''; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(180deg, transparent, rgba(10,5,35,0.92)); pointer-events: none; }
/* Segnaposto di chi non ha ancora la foto: le iniziali al neon */
.persona-foto-vuota { display: grid; place-items: center; aspect-ratio: 4 / 3;
  background: radial-gradient(70% 60% at 50% 40%, rgba(var(--neon), 0.28), transparent 70%), linear-gradient(160deg, #130a3a, #05020f); }
.persona-foto-vuota span {
  display: grid; place-items: center; width: 40%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(var(--neon), 0.95);
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(2.2em, 8vw, 3.2em); color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.7), 0 0 20px rgba(var(--neon), 1), 0 0 44px rgba(var(--neon), 0.8);
  box-shadow: 0 0 10px rgba(var(--neon), 0.9), 0 0 40px rgba(var(--neon), 0.45), inset 0 0 22px rgba(var(--neon), 0.3);
}
.persona-testo { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.persona-testo h3 { margin: 0; font-size: 1.35em; color: #fff; letter-spacing: 1px;
  text-shadow: 0 0 18px rgba(var(--neon), 0.55); }
.persona-testo p { margin: 0; color: #cfcfd8; font-size: 0.95em; line-height: 1.5; }
.persona-azioni { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.persona-azioni .neon { width: 100%; justify-content: center; padding: 12px 16px; gap: 10px; border-radius: 13px; }
.persona-azioni .neon-nome { font-size: 0.8em; letter-spacing: 1.5px; }
.persona-azioni .neon-freccia { margin-left: 0; font-size: 1em; }
.persona-azioni .neon-icona { width: 22px; height: 22px; }

/* ---------- Telefono ---------- */
@media (max-width: 640px) {
  .collab-invito { padding: 22px 16px; }
  .collab-invito .neon { padding: 14px 14px; gap: 12px; }
  .collab-invito .neon-nome { font-size: 0.86em; letter-spacing: 1px; }
  .collab-invito .neon-icona { width: 24px; height: 24px; }
  .neon-partner { flex-basis: 100%; padding: 18px 16px; gap: 14px; min-height: 100px; }
  .neon-partner .neon-nome { font-size: 1.02em; letter-spacing: 2px; }
  .neon-logo { flex-basis: 58px; width: 58px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .neon.acceso, a.neon-partner .neon-logo { animation: none !important; }
  .neon::before { display: none; }
}