/* =====================================================
   FEELING COACH — Pagina Collaborazioni
   Fumo in movimento dietro la pagina + pulsanti al neon.
   Caricato SOLO da collaborazioni.php (vedi $stili_pagina in
   includes/header.php): il resto del sito non lo scarica.
   Colori: gli stessi del marchio (petrolio, turchese, smeraldo).
   ===================================================== */

/* ---------- Lo sfondo ---------- */
#fumo,
#nebbia {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;   /* i tocchi passano alla pagina */
}
/* La nebbia di riserva: si accende solo se il fumo vero non puo' girare
   (js/fumo.js le mette la classe). Tre aloni del marchio che si spostano
   appena: niente blur, costa zero anche su un telefono vecchio. */
#nebbia {
    display: none;
    inset: -20%;
    width: auto;
    height: auto;
    background:
        radial-gradient(45vmax 35vmax at 25% 30%, rgba(46, 197, 211, .20), transparent 65%),
        radial-gradient(50vmax 40vmax at 75% 60%, rgba(14, 138, 153, .24), transparent 65%),
        radial-gradient(40vmax 32vmax at 50% 88%, rgba(79, 181, 115, .14), transparent 65%);
    animation: nebbia-deriva 18s ease-in-out infinite alternate;
}
#nebbia.accesa { display: block; }
@keyframes nebbia-deriva {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

/* Tutto il contenuto sta SOPRA il fumo. La testata e' gia' fixed con il suo
   z-index; main e piede no, e senza questo il canvas li coprirebbe. */
body.pagina-collab main,
body.pagina-collab .piede {
    position: relative;
    z-index: 1;
}
/* Il piede del sito e' quasi trasparente: sopra il fumo le scritte piccole
   non si leggerebbero. */
body.pagina-collab .piede {
    background: rgba(5, 9, 10, .86);
}

/* In cima alla pagina la testata del sito e' trasparente: sopra uno sbuffo
   chiaro le voci grigie del menu si perdevano. Una velatura che sfuma, solo
   finche' non diventa .compatta (li' ha gia' il suo fondo pieno). */
body.pagina-collab .testata:not(.compatta) {
    background: linear-gradient(180deg, rgba(5, 9, 10, .88), rgba(5, 9, 10, 0));
}

/* ---------- Testata della pagina ---------- */
.collab-testa { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.collab-testa h1 {
    text-shadow: 0 2px 30px rgba(5, 9, 10, .9);
}
/* La parola colorata del titolo si accende come un'insegna */
.collab-testa h1 .testo-accento {
    filter: drop-shadow(0 0 18px rgba(46, 197, 211, .55));
    animation: insegna-accensione 1.6s .35s both;
}
.collab-testa .testo-grande {
    color: var(--bianco);
    opacity: .86;
    text-shadow: 0 1px 18px rgba(5, 9, 10, .95);
}
.collab-suggerimento {
    margin-top: 1.6rem;
    font-size: .78rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--turchese);
    text-shadow: 0 0 12px rgba(46, 197, 211, .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; }
}

.collab-sezione { padding-block: clamp(1.8rem, 4vw, 3.2rem); }
.collab-titolo {
    margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
    text-shadow: 0 2px 26px rgba(5, 9, 10, .9);
}

/* ---------- Riquadri di vetro (invito e «cosa cerco») ---------- */
.collab-invito,
.collab-cerco {
    border-radius: calc(var(--raggio) + 6px);
    background: rgba(7, 13, 15, .66);
    border: 1px solid rgba(46, 197, 211, .16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: clamp(1.6rem, 4vw, 2.8rem);
}
.collab-invito {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    box-shadow: 0 0 60px rgba(14, 138, 153, .12);
}
.collab-invito > div { flex: 1 1 320px; }
.collab-invito h2 { margin-bottom: .6rem; }
.collab-invito p,
.collab-cerco p { color: var(--grigio); max-width: 62ch; }
.collab-cerco { margin-top: 1.4rem; }
.collab-cerco h2 { margin-bottom: .7rem; }

/* =====================================================
   I PULSANTI AL NEON
   Il colore e' una terna RGB in --neon, cosi' una regola sola
   serve tutte le trasparenze: rgba(var(--neon), .5).
   ===================================================== */
.neon {
    --neon: 46, 197, 211;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.5rem;
    border-radius: 16px;
    border: 1.5px solid rgba(var(--neon), .95);
    background: rgba(5, 9, 10, .78);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    /* il tubo: alone fuori, riflesso dentro */
    box-shadow:
        0 0 6px rgba(var(--neon), .9),
        0 0 22px rgba(var(--neon), .45),
        0 0 60px rgba(var(--neon), .18),
        inset 0 0 14px rgba(var(--neon), .22);
    transition: transform var(--transizione), box-shadow var(--transizione), background var(--transizione);
    -webkit-tap-highlight-color: transparent;
}
.neon-turchese { --neon: 46, 197, 211; }
.neon-smeraldo { --neon: 79, 181, 115; }
.neon-viola    { --neon: 190, 80, 255; }
.neon-wa       { --neon: 37, 211, 102; }

/* 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), .28) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
a.neon:hover::before,
a.neon:focus-visible::before { transform: translateX(120%); }

a.neon:hover,
a.neon:focus-visible {
    transform: translateY(-3px) scale(1.015);
    background: rgba(var(--neon), .10);
    box-shadow:
        0 0 10px rgba(var(--neon), 1),
        0 0 36px rgba(var(--neon), .7),
        0 0 90px rgba(var(--neon), .35),
        inset 0 0 22px rgba(var(--neon), .35);
    outline: none;
}
a.neon:active { transform: scale(.98); }

.neon-testo { display: flex; flex-direction: column; gap: .2rem; min-width: 0; text-align: left; }
.neon-nome {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* la scritta e' il gas: bianca al centro, colorata intorno */
    text-shadow:
        0 0 4px rgba(255, 255, 255, .7),
        0 0 12px rgba(var(--neon), 1),
        0 0 28px rgba(var(--neon), .8);
}
.neon-sotto {
    font-size: .86rem;
    color: rgba(238, 244, 244, .78);
    letter-spacing: .02em;
}
.neon-freccia {
    margin-left: auto;
    font-size: 1.3rem;
    color: rgb(var(--neon));
    text-shadow: 0 0 10px rgba(var(--neon), .9);
    transition: transform var(--transizione);
}
a.neon:hover .neon-freccia { transform: translate(3px, -3px); }

/* Accensione: quando il tasto entra in pagina (.visibile lo mette js/main.js)
   sfarfalla come un tubo appena acceso, poi resta fermo. */
.neon.rivela.visibile { animation: neon-accensione 1.5s .15s both; }
@keyframes neon-accensione {
    0%   { opacity: 0;   filter: brightness(.3); }
    8%   { opacity: 1;   filter: brightness(1.3); }
    12%  { opacity: .35; filter: brightness(.4); }
    20%  { opacity: 1;   filter: brightness(1.2); }
    26%  { opacity: .55; filter: brightness(.6); }
    34%  { opacity: 1;   filter: brightness(1.15); }
    100% { opacity: 1;   filter: none; }
}
@keyframes insegna-accensione {
    0%, 10% { opacity: .15; }
    14%     { opacity: 1; }
    18%     { opacity: .3; }
    26%     { opacity: 1; }
    30%     { opacity: .6; }
    38%, 100% { opacity: 1; }
}

/* ---------- Pulsanti dei partner ----------
   Flex e non grid: con un pulsante solo una griglia lo stirerebbe per tutta
   la pagina (una barra, non un tasto). Cosi' ognuno sta fra 340 e 560px e
   la fila resta centrata, che siano uno o dieci. */
.neon-griglia {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.8rem;
}
.neon-partner {
    display: flex;
    flex: 1 1 340px;
    max-width: 560px;
    padding: 1.5rem 1.7rem;
    min-height: 118px;
    border-radius: 20px;
}
/* Il secondo tubo, piu' sottile, dentro il primo: e' quello che fa «insegna» */
.neon-partner::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 14px;
    border: 1px solid rgba(var(--neon), .38);
    box-shadow: inset 0 0 18px rgba(var(--neon), .12);
    pointer-events: none;
    transition: border-color var(--transizione);
}
a.neon-partner:hover::after { border-color: rgba(var(--neon), .8); }
.neon-partner .neon-nome { font-size: 1.7rem; letter-spacing: .2em; }
.neon-partner .neon-sotto { font-size: .92rem; }
.neon-logo {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(var(--neon), .8);
    box-shadow: 0 0 16px rgba(var(--neon), .6);
}
.neon-logo-lettere {
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: rgb(var(--neon));
    text-shadow: 0 0 12px rgba(var(--neon), .9);
    background: rgba(var(--neon), .08);
}
/* Il logo respira piano: e' 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), .55); }
    50%      { box-shadow: 0 0 28px rgba(var(--neon), .95); }
}

/* Senza indirizzo: tubo spento, «in arrivo» */
.neon-spento {
    border-style: dashed;
    border-color: rgba(var(--neon), .35);
    box-shadow: none;
    color: var(--grigio);
}
.neon-spento .neon-nome { text-shadow: none; color: var(--grigio); }
.neon-spento .neon-logo { box-shadow: none; filter: grayscale(1) opacity(.6); }
.neon-presto {
    margin-left: auto;
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(var(--neon), .8);
    white-space: nowrap;
}

/* ---------- WhatsApp ---------- */
.neon-wa-icona {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    color: rgb(var(--neon));
    filter: drop-shadow(0 0 8px rgba(var(--neon), .9));
}
.neon-piccolo { padding: .75rem 1.1rem; gap: .7rem; border-radius: 13px; }
.neon-piccolo .neon-nome { font-size: .8rem; letter-spacing: .1em; }
.neon-piccolo .neon-wa-icona { width: 22px; height: 22px; }
.neon-piccolo .neon-freccia { font-size: 1rem; }

/* ---------- Le schede delle persone ---------- */
.persone-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 360px));
    gap: 1.8rem;
    justify-content: center;
}
.persona {
    display: flex;
    flex-direction: column;
    border-radius: calc(var(--raggio) + 4px);
    overflow: hidden;
    background: rgba(7, 13, 15, .74);
    border: 1px solid rgba(46, 197, 211, .35);
    box-shadow:
        0 0 0 1px rgba(5, 9, 10, .6),
        0 0 26px rgba(46, 197, 211, .16),
        0 24px 60px rgba(0, 0, 0, .45);
    transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione), opacity .55s cubic-bezier(.22,.61,.36,1);
}
.persona:hover {
    transform: translateY(-5px);
    border-color: rgba(46, 197, 211, .8);
    box-shadow:
        0 0 0 1px rgba(5, 9, 10, .6),
        0 0 44px rgba(46, 197, 211, .34),
        0 30px 70px rgba(0, 0, 0, .5);
}
.persona-foto {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 0;
    background: var(--carbone);
    overflow: hidden;
    cursor: zoom-in;
    position: relative;
}
.persona-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* il ritaglio tiene il terzo alto della foto: in un ritratto e' li' che sta il viso */
    object-position: center 30%;
    display: block;
    transition: transform .8s cubic-bezier(.22, .61, .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(7, 13, 15, .92));
    pointer-events: none;
}
/* Segnaposto di chi non ha ancora la foto: le iniziali al neon */
.persona-foto-vuota {
    cursor: default;
    display: grid;
    place-items: center;
    background:
        radial-gradient(70% 60% at 50% 40%, rgba(14, 138, 153, .38), transparent 70%),
        linear-gradient(160deg, #0d1b1f, #05090a);
}
.persona-foto-vuota span {
    display: grid;
    place-items: center;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(46, 197, 211, .95);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 9vw, 3.8rem);
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, .7), 0 0 20px rgba(46, 197, 211, 1), 0 0 44px rgba(46, 197, 211, .8);
    box-shadow:
        0 0 10px rgba(46, 197, 211, .9),
        0 0 40px rgba(46, 197, 211, .45),
        inset 0 0 22px rgba(46, 197, 211, .3);
}
.persona-testo {
    padding: 1.3rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1;
}
.persona-testo h3 {
    font-size: 1.5rem;
    letter-spacing: .04em;
    text-shadow: 0 0 18px rgba(46, 197, 211, .55);
}
.persona-testo p { color: var(--grigio); font-size: .96rem; }
/* La parola VIBEST nelle descrizioni: viola, come nel credito in fondo al
   sito (.creato-da a in style.css). E' il colore del LORO marchio. */
.vibest-viola {
    color: #d45bff;
    font-weight: 700;
    letter-spacing: .06em;
    text-shadow: 0 0 10px rgba(200, 0, 255, .75), 0 0 22px rgba(200, 0, 255, .45);
    transition: color var(--transizione), text-shadow var(--transizione);
}
.vibest-viola:hover {
    color: #ff8cff;
    text-shadow: 0 0 14px rgba(255, 102, 255, .95), 0 0 30px rgba(200, 0, 255, .6);
}
.persona-azioni {
    margin-top: auto;
    padding-top: .8rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.persona-azioni .neon { width: 100%; justify-content: center; }
.persona-azioni .neon-freccia { margin-left: 0; }
.persona-azioni .neon-testo { text-align: center; }
/* Tasto a due righe («Vuoi un sito anche tu?» + «Scrivi a … su WhatsApp»):
   l'invito e' la riga che si legge, l'altra le sta sotto piu' piccola */
.persona-azioni .neon-nome { font-size: .92rem; }
.persona-azioni .neon-sotto { font-size: .8rem; }

/* ---------- Il tasto del suono ----------
   Il fumo fa «whoosh» mentre lo muovi. Un sito che suona senza un modo per
   farlo tacere e' una scortesia: il tasto sta sempre in basso a destra.
   Compare solo se il fumo gira (lo mostra js/fumo.js). */
.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(46, 197, 211, .9);
    background: rgba(5, 9, 10, .82);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(46, 197, 211, .8), 0 0 24px rgba(46, 197, 211, .35), inset 0 0 10px rgba(46, 197, 211, .2);
    transition: transform var(--transizione), box-shadow var(--transizione), opacity var(--transizione);
    -webkit-tap-highlight-color: transparent;
}
.fumo-audio:hover { transform: scale(1.08); box-shadow: 0 0 12px rgba(46, 197, 211, 1), 0 0 36px rgba(46, 197, 211, .55), inset 0 0 14px rgba(46, 197, 211, .3); }
.fumo-audio.muto { opacity: .6; border-color: rgba(159, 176, 181, .6); box-shadow: none; }

/* ---------- Foto ingrandita ---------- */
.collab-lente {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 94vw;
    max-height: 92vh;
    margin: auto;
    cursor: zoom-out;
    overflow: visible;
}
.collab-lente::backdrop { background: rgba(3, 6, 7, .9); }
.collab-lente img {
    display: block;
    max-width: 94vw;
    max-height: 88vh;
    border-radius: var(--raggio-sm);
    border: 1.5px solid rgba(46, 197, 211, .8);
    box-shadow: 0 0 40px rgba(46, 197, 211, .4);
}
.collab-lente-chiudi {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(46, 197, 211, .9);
    background: var(--nero);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(46, 197, 211, .6);
}

/* ---------- Telefono ---------- */
@media (max-width: 760px) {
    /* Stessa scelta del resto del sito: sotto i 760px la sfocatura costa
       troppo in scorrimento, si compensa con un vetro piu' scuro. Qui conta
       doppio: dietro c'e' gia' il fumo che lavora. */
    .collab-invito,
    .collab-cerco {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(7, 13, 15, .86);
    }
    .collab-invito .neon { width: 100%; justify-content: center; }
    /* la scritta del tasto WhatsApp deve stare su una riga a 360px:
       meno aria intorno, icona e lettere un filo piu' piccole */
    .neon-wa { padding: .95rem 1rem; gap: .65rem; }
    .neon-wa .neon-wa-icona { width: 24px; height: 24px; }
    .neon-wa .neon-nome { font-size: .84rem; letter-spacing: .05em; }
    .neon-piccolo .neon-nome { font-size: .74rem; }
    .neon-partner { flex-basis: 100%; padding: 1.2rem 1.2rem; gap: .9rem; min-height: 100px; }
    .neon-partner .neon-nome { font-size: 1.3rem; letter-spacing: .14em; }
    .neon-logo { flex-basis: 58px; width: 58px; height: 58px; }
    .collab-lente-chiudi { top: 8px; right: 8px; }
}

/* ---------- Animazioni ridotte ----------
   style.css accorcia gia' tutte le animazioni a zero; qui si tolgono quelle
   infinite, che a durata zero lampeggerebbero. Il fumo lo spegne js/fumo.js. */
@media (prefers-reduced-motion: reduce) {
    #nebbia,
    a.neon-partner .neon-logo { animation: none !important; }
}