/* ============================================================
   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(23,23,27,.72), rgba(17,17,20,.62));
  backdrop-filter:blur(16px) saturate(1.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,
             0 20px 40px -24px rgba(0,0,0,.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(10,214,182,.5) 30%, rgba(107,22,207,.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(10,214,182,.16), rgba(107,22,207,.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(255,255,255,.35) 48%, transparent 62%);
  transform:translateX(-120%); pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .bottone:hover::after,.canale-vai:hover::after,
  .canale.primario:hover .canale-vai::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(255,255,255,.05);
  transition:background .3s var(--curva);
}
.canale-riga:first-child{border-top:0}
.canale-riga:hover,.canale-riga:focus-visible{background:rgba(255,255,255,.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(10,214,182,.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(10,214,182,.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(23,23,27,.74), rgba(17,17,20,.6));
  backdrop-filter:blur(16px) saturate(1.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(255,255,255,.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(10,214,182,.75), 0 14px 26px -18px rgba(0,0,0,.9)}
.icona.i2,.icona.i4{box-shadow:0 0 22px -8px rgba(155,92,240,.75), 0 14px 26px -18px rgba(0,0,0,.9)}
.icona.i1:hover,.icona.i3:hover,.icona.i1:focus-visible,.icona.i3:focus-visible{
  border-color:rgba(10,214,182,.5);
  box-shadow:0 0 34px -6px rgba(10,214,182,.9), 0 18px 30px -18px rgba(0,0,0,.9);
}
.icona.i2:hover,.icona.i4:hover,.icona.i2:focus-visible,.icona.i4:focus-visible{
  border-color:rgba(155,92,240,.5);
  box-shadow:0 0 34px -6px rgba(155,92,240,.9), 0 18px 30px -18px rgba(0,0,0,.9);
}
.icona svg{filter:drop-shadow(0 0 8px currentColor)}
@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(10,214,182,.6), 0 0 30px rgba(10,214,182,.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(155,92,240,.6), 0 0 30px rgba(155,92,240,.25);
}
.tape-lab{display:none}
@media (prefers-reduced-motion:reduce){ .fascia-eti{animation:none} }

/* ---------- il pie: tutto centrato ---------- */
.pie{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:18px;
}
.pie .icone{justify-content:center}
.pie .firma-segno{margin:0}
.pie .firma{margin:0; max-width:40ch}
.pie .pie-righe{justify-content:center; align-items:center}