/* ============================================================
   VETRO E LUCE
   La lastra semitrasparente e il riflesso che insegue la mano.
   Da telefono il puntatore non esiste: li' la luce attraversa da
   sola quando l'elemento entra in vista, e risponde al tocco.
   ============================================================ */

/* Le posizioni della luce sono proprieta' dichiarate, non semplici
   variabili: cosi' il browser sa animarle. Dove non e' supportato,
   funziona lo stesso, semplicemente senza il passaggio automatico. */
@property --mx{syntax:'<percentage>'; inherits:false; initial-value:50%}
@property --my{syntax:'<percentage>'; inherits:false; initial-value:0%}

.vetro{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg, rgba(var(--sup-3-rgb),.72), rgba(var(--sup-2-rgb),.62));
  backdrop-filter:blur(16px) saturate(1.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(var(--bianco-rgb),.07);
  box-shadow:0 1px 0 rgba(var(--bianco-rgb),.06) inset,
             0 20px 40px -24px rgba(var(--nero-rgb),.92);
}
/* Il filo di luce sul bordo alto: e' il riflesso del vetro. */
.vetro::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent,
    rgba(var(--teal-rgb),.5) 30%, rgba(var(--violet-rgb),.45) 70%, transparent);
  opacity:.7; pointer-events:none;
}

/* --- il riflesso che segue la mano --------------------------------
   E' l'effetto che piace: resta questo, ovunque. */
.riflesso{position:relative; isolation:isolate}
.riflesso::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),
    rgba(var(--teal-rgb),.16), rgba(var(--violet-rgb),.10) 40%, transparent 66%);
  opacity:0; transition:opacity .4s var(--curva); pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .riflesso:hover::after{opacity:1}
}

/* --- da telefono: la luce attraversa da sola ----------------------
   Una volta sola, quando l'elemento entra in vista. Poi risponde al
   tocco. Cosi' l'effetto esiste anche dove non c'e' un mouse. */
@media (hover:none),(pointer:coarse){
  .riflesso.passa::after{
    opacity:1; animation:attraversa 1.5s var(--curva) both;
  }
  .riflesso.tocca::after{opacity:1; animation:pulsa .7s var(--curva) both}
}
@keyframes attraversa{
  0%  {--mx:-15%; --my:50%; opacity:0}
  18% {opacity:1}
  82% {opacity:1}
  100%{--mx:115%; --my:50%; opacity:0}
}
@keyframes pulsa{
  0%  {opacity:0; transform:scale(.9)}
  35% {opacity:1; transform:none}
  100%{opacity:0; transform:none}
}

/* --- i bottoni ----------------------------------------------------
   Stessa luce, stessa lastra: un solo linguaggio in tutto il sito. */
.bottone,.canale-vai,.azione a,.lettore-avvia{position:relative; overflow:hidden}
.bottone::after,.canale-vai::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, transparent 30%,
    rgba(var(--bianco-rgb),.35) 48%, transparent 62%);
  transform:translateX(-120%); pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
.bottone:hover::after,.canale-vai:hover::after{
    transform:translateX(120%); transition:transform .7s var(--curva);
  }
}

@media (prefers-reduced-motion:reduce){
  .riflesso::after{display:none}
  .bottone::after,.canale-vai::after{display:none}
}

/* ---------- i canali: righe, non carte ----------
   Erano quattro riquadri che occupavano mezza schermata. Ora e' una
   lastra sola con quattro righe sottili: minimo ingombro, e la luce
   passa da una riga all'altra. */
.canali{border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.canale-riga{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:15px 18px; text-decoration:none; color:var(--txt);
  border-top:1px solid rgba(var(--bianco-rgb),.05);
  transition:background .3s var(--curva);
}
.canale-riga:first-child{border-top:0}
.canale-riga:hover,.canale-riga:focus-visible{background:rgba(var(--bianco-rgb),.035)}
.canale-riga .glifo{
  width:17px; height:17px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; color:var(--soft);
  transition:color .3s var(--curva);
}
.canale-riga:hover .glifo{color:var(--teal)}
.canale-chi{display:flex; align-items:baseline; gap:10px; flex:1; min-width:0}
.canale-chi b{
  font-family:var(--m); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--txt); flex:none;
}
.canale-chi i{
  font-style:normal; font-family:var(--m); font-size:12.5px; color:var(--soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.canale-riga .canale-punto{
  width:5px; height:5px; border-radius:50%; background:var(--teal); flex:none;
  box-shadow:0 0 10px rgba(var(--teal-rgb),.8); animation:respiro 3.4s ease-in-out infinite;
}
.canale-riga .canale-vai{
  flex:none; font-family:var(--m); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); background:var(--teal); padding:8px 13px; border-radius:8px;
  box-shadow:0 0 18px -4px rgba(var(--teal-rgb),.7);
}
.canale-riga.primo{padding-top:17px; padding-bottom:17px}
@media(max-width:560px){
  .canale-riga{padding:13px 14px; gap:11px}
  .canale-chi{flex-direction:column; gap:1px; align-items:flex-start}
  .canale-riga .canale-vai{font-size:10px; padding:7px 10px}
}

/* ---------- le icone social: quadrati di vetro al neon ----------
   Accostate, quindi i colori si alternano: turchese, viola, turchese,
   viola. Il bagliore resta acceso piano e si accende al passaggio. */
.icone{display:flex; flex-wrap:wrap; gap:12px}
.icona{
  position:relative; width:60px; height:60px; border-radius:16px;
  display:grid; place-items:center; text-decoration:none;
  background:linear-gradient(180deg, rgba(var(--sup-3-rgb),.74), rgba(var(--sup-2-rgb),.6));
  backdrop-filter:blur(16px) saturate(1.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(var(--bianco-rgb),.08);
  transition:transform .34s var(--curva), border-color .34s var(--curva);
}
.icona svg{
  width:24px; height:24px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round;
  transition:color .34s var(--curva), filter .34s var(--curva);
}
/* il filo di luce sul bordo alto, come sulle altre lastre */
.icona::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:inherit;
  background:linear-gradient(90deg, transparent, currentColor, transparent);
  opacity:.5;
}
.icona:hover,.icona:focus-visible{transform:translateY(-4px)}

/* colori alternati: due turchesi e due viola, mai due uguali vicine */
.icona.i1,.icona.i3{color:var(--teal)}
.icona.i2,.icona.i4{color:var(--violet-lo)}
.icona.i1 svg,.icona.i3 svg{color:var(--teal)}
.icona.i2 svg,.icona.i4 svg{color:var(--violet-lo)}
.icona.i1,.icona.i3{box-shadow:0 0 22px -8px rgba(var(--teal-rgb),.75), 0 14px 26px -18px rgba(var(--nero-rgb),.9)}
.icona.i2,.icona.i4{box-shadow:0 0 22px -8px rgba(var(--violet-su-rgb),.75), 0 14px 26px -18px rgba(var(--nero-rgb),.9)}
.icona.i1:hover,.icona.i3:hover,.icona.i1:focus-visible,.icona.i3:focus-visible{
  border-color:rgba(var(--teal-rgb),.5);
  box-shadow:0 0 34px -6px rgba(var(--teal-rgb),.9), 0 18px 30px -18px rgba(var(--nero-rgb),.9);
}
.icona.i2:hover,.icona.i4:hover,.icona.i2:focus-visible,.icona.i4:focus-visible{
  border-color:rgba(var(--violet-su-rgb),.5);
  box-shadow:0 0 34px -6px rgba(var(--violet-su-rgb),.9), 0 18px 30px -18px rgba(var(--nero-rgb),.9);
}
.icona svg{filter:drop-shadow(0 0 8px currentColor)}

/* I QUATTRO CANALI RESPIRANO, COME NELLA VERSIONE DINAMICA.
   Erano gia' icone e gia' accese: quello che mancava era il battito.
   Un alone fermo si legge come una decorazione stampata; uno che
   respira piano dice che dall'altra parte c'e' qualcuno.
   Sfasati fra loro: quattro led che pulsano all'unisono sembrano una
   cosa sola che lampeggia, non quattro cose accese.
   Il respiro tocca solo la luminosita' - non la posizione, non la
   dimensione - quindi non sposta niente e non fa ballare il piede. */
.icona{ animation:respiroCanale 3.4s ease-in-out infinite }
.icona.i2{ animation-delay:-.85s }
.icona.i3{ animation-delay:-1.7s }
.icona.i4{ animation-delay:-2.55s }
@keyframes respiroCanale{
  0%,100%{ filter:brightness(1) }
  50%    { filter:brightness(1.3) }
}
@media(prefers-reduced-motion:reduce){ .icona{animation:none} }
@media(max-width:430px){
  .icona{width:54px; height:54px; border-radius:14px}
  .icona svg{width:21px; height:21px}
}

/* ---------- l'etichetta sopra il nastro ----------
   Prima stava in un riquadro a sinistra che rubava spazio allo
   scorrimento. Ora e' sopra, al neon, e il nastro va da bordo a bordo. */
.fascia-eti{
  max-width:var(--max); margin:0 auto 12px; padding:0 var(--pad);
  font-family:var(--m); font-size:11px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--teal);
  text-shadow:0 0 12px rgba(var(--teal-rgb),.6), 0 0 30px rgba(var(--teal-rgb),.25);
  animation:respiro 3.4s ease-in-out infinite;
}
.fascia .t-part + *,.fascia-eti + .t-part{margin-top:0}
/* Partnership e' struttura, quindi viola: la stessa regola di
   sempre, turchese per l'interazione e viola per l'impianto. */
.fascia.distanziata .fascia-eti{
  color:var(--violet-lo);
  text-shadow:0 0 12px rgba(var(--violet-su-rgb),.6), 0 0 30px rgba(var(--violet-su-rgb),.25);
}
.tape-lab{display:none}
@media (prefers-reduced-motion:reduce){ .fascia-eti{animation:none} }

/* ---------- il pie: tutto centrato ---------- */
/* IL PIEDE SI LEGGE IN DUE BLOCCHI, NON IN QUATTRO PEZZI.
   Prima gli spazi erano tutti uguali - un solo "gap" per quattro
   elementi di peso diversissimo - e con tutte le distanze identiche
   niente si raggruppa: l'occhio legge quattro cose separate. La riga
   legale in corpo 11 stava lontana dalla frase quanto il logo stava
   dai social.
   Adesso la firma e la frase sono stretti insieme, perche' sono una
   cosa sola; i social e la riga legale stanno piu' staccati, perche'
   sono un'altra.
   E i social sono scesi sotto la frase: in fondo alla pagina l'ultima
   cosa che si guarda deve essere la firma, non quattro pulsanti
   accesi. Per lo stesso motivo qui sono piu' piccoli che altrove -
   restano comunque sopra i 44px, la misura sotto la quale un dito
   sbaglia. */
.pie{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:0;
}
.pie .firma-segno{margin:0}
.pie .pie-righe{justify-content:center; align-items:center; margin:20px 0 0}
/* I social chiudono, e chiudono piano. Stanno per ultimi e sono i piu'
   piccoli di tutto il sito: qui non devono invitare, devono esserci.
   38px e' sotto la misura comoda per un dito, quindi lo spazio
   cliccabile lo allarghiamo con un'area invisibile attorno invece che
   con il pulsante - si tocca giusto senza che si veda grosso. */
.pie .icone{justify-content:center; gap:14px; margin:24px 0 0}
.pie .icona{width:38px; height:38px; border-radius:11px}
.pie .icona svg{width:16px; height:16px}
.pie .icona::after{content:""; position:absolute; inset:-5px}

/* IL PUNTINO DI INSTAGRAM, CHE NON SI VEDEVA DA NESSUNA PARTE.
   Nel disegno il flash e' un cerchietto con fill="currentColor"
   scritto dentro l'SVG. Ma qui sopra si dichiara fill:none per fare le
   icone a contorno, e in CSS una dichiarazione batte sempre un
   attributo di presentazione: quindi il puntino restava senza
   riempimento E senza contorno, cioe' invisibile. Senza di lui il
   quadrato con il cerchio dentro non si legge piu' come Instagram.
   Si prende senza toccare l'SVG: e' l'unico cerchio con stroke="none"
   - i 45 disegni sparsi nel progetto restano intatti, guide pubblicate
   comprese, che non si riscrivono. */
svg circle[stroke="none"]{ fill:currentColor }