/* Linguetta laterale verso il gruppo Telegram.
 *
 * Sta ferma sul bordo destro mostrando la sola icona, e scorre fuori al
 * passaggio del mouse scoprendo l'etichetta: cosi' e' sempre raggiungibile
 * senza rubare spazio alla lettura.
 *
 * L'animazione d'ingresso usa fill-mode BACKWARDS, non forwards: con forwards
 * lo stato finale resterebbe bloccato dal motore delle animazioni e la
 * transizione dell'hover non avrebbe piu' effetto. Cosi' invece, finita
 * l'entrata, l'elemento torna al proprio stato CSS - identico all'ultimo
 * fotogramma - e l'hover funziona.
 */

.tg-tab{
  position:fixed; right:0; top:52%; z-index:120;
  display:flex; align-items:center; gap:12px;
  padding:13px 22px 13px 15px;
  border-radius:16px 0 0 16px;
  background:linear-gradient(135deg,#2AABEE 0%,#229ED9 100%);
  color:#fff; font-family:var(--ff); font-weight:700; font-size:.92rem;
  letter-spacing:-.01em; white-space:nowrap;
  box-shadow:-10px 16px 36px -14px rgba(34,158,217,.8),
             inset 0 0 0 1px rgba(255,255,255,.20);
  transform:translate3d(calc(100% - 58px),-50%,0);
  transition:transform .42s cubic-bezier(.22,.9,.28,1), box-shadow .42s ease;
  will-change:transform;
  animation:tgEntra .75s cubic-bezier(.22,.9,.28,1) 1.1s backwards;
}
.tg-tab:hover,
.tg-tab:focus-visible{
  transform:translate3d(0,-50%,0);
  box-shadow:-16px 20px 48px -14px rgba(34,158,217,.95),
             inset 0 0 0 1px rgba(255,255,255,.34);
}
.tg-tab:focus-visible{outline:2px solid #fff; outline-offset:3px}
.tg-tab:active{transform:translate3d(2px,-50%,0)}

.tg-icon{
  position:relative; flex:0 0 auto;
  width:28px; height:28px;
  display:grid; place-items:center;
}
.tg-icon svg{
  display:block;
  transition:transform .35s cubic-bezier(.22,.9,.28,1);
}
/* All'apertura l'aeroplanino parte, appena: il gesto del "messaggio inviato" */
.tg-tab:hover .tg-icon svg,
.tg-tab:focus-visible .tg-icon svg{transform:translate(3px,-3px)}

/* Alone che si allarga ogni tanto: richiama l'occhio senza lampeggiare */
.tg-ring{
  position:absolute; inset:-3px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  opacity:0; pointer-events:none;
  animation:tgAlone 5s ease-out 2.4s infinite;
}
/* Va SPENTA, non messa in pausa: un'animazione in pausa congela il proprio
   valore e continua a vincere sull'opacity della regola, lasciando l'alone
   fermo attorno all'icona. */
.tg-tab:hover .tg-ring,
.tg-tab:focus-visible .tg-ring{animation:none; opacity:0}

.tg-label{line-height:1}

@keyframes tgEntra{
  from{transform:translate3d(150%,-50%,0); opacity:0}
  to  {transform:translate3d(calc(100% - 58px),-50%,0); opacity:1}
}
@keyframes tgAlone{
  0%  {transform:scale(.65); opacity:0}
  6%  {opacity:.6}
  26% {transform:scale(2); opacity:0}
  100%{transform:scale(2); opacity:0}
}

/* Su schermo stretto la linguetta non ha spazio per scorrere: diventa un
   pulsante tondo in basso a destra, dove il pollice arriva. */
@media (max-width:720px){
  .tg-tab{
    top:auto; bottom:calc(18px + env(safe-area-inset-bottom,0px)); right:16px;
    width:56px; height:56px; padding:0;
    justify-content:center; gap:0;
    border-radius:50%;
    transform:translate3d(0,0,0);
    animation-name:tgEntraMobile;
  }
  .tg-tab:hover,.tg-tab:focus-visible{transform:translate3d(0,-2px,0)}
  .tg-tab:active{transform:translate3d(0,1px,0)}
  .tg-label{display:none}
}
@keyframes tgEntraMobile{
  from{transform:translate3d(0,26px,0); opacity:0}
  to  {transform:translate3d(0,0,0); opacity:1}
}

/* ── Invito a scomparsa ───────────────────────────────────────────────────
 *
 * Compare accanto alla linguetta poco dopo il caricamento, indica con una
 * freccia e se ne va da solo: dice cosa c'e' dietro l'icona a chi non
 * passerebbe mai il mouse sopra, senza restare li' per sempre.
 *
 * Qui fill-mode BOTH e' quello giusto (al contrario della linguetta): lo
 * stato finale e' "invisibile" ed e' esattamente dove deve restare.
 */
.tg-invito{
  position:fixed; right:78px; top:52%; z-index:119;
  display:flex; align-items:center; gap:10px;
  padding:11px 16px;
  border-radius:12px;
  background:rgba(12,21,48,.94);
  border:1px solid var(--border-2);
  box-shadow:0 16px 40px -16px rgba(0,0,0,.85);
  color:var(--txt); font-family:var(--ff); font-size:.88rem; font-weight:600;
  white-space:nowrap; pointer-events:none;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0;
  animation:tgInvito 6.2s cubic-bezier(.22,.9,.28,1) 2.2s both;
}
.tg-invito .tg-freccia{
  flex:0 0 auto; color:#2AABEE;
  animation:tgFreccia 1.5s ease-in-out infinite;
}

@keyframes tgInvito{
  0%  {opacity:0; transform:translate(16px,-50%) scale(.96)}
  7%  {opacity:1; transform:translate(0,-50%) scale(1)}
  86% {opacity:1; transform:translate(0,-50%) scale(1)}
  100%{opacity:0; transform:translate(12px,-50%) scale(.98)}
}
@keyframes tgFreccia{
  0%,100%{transform:translateX(0)}
  50%    {transform:translateX(5px)}
}

@media (max-width:720px){
  /* Accanto al pulsante tondo, non sopra: sotto c'e' la barra del telefono */
  .tg-invito{
    /* 25px, non 32: cosi' il centro del fumetto cade sul centro del pulsante
       tondo, che e' piu' alto */
    top:auto; bottom:calc(25px + env(safe-area-inset-bottom,0px)); right:84px;
    font-size:.82rem; padding:9px 13px;
    animation-name:tgInvitoMobile;
  }
}
@keyframes tgInvitoMobile{
  0%  {opacity:0; transform:translateX(14px) scale(.96)}
  7%  {opacity:1; transform:translateX(0) scale(1)}
  86% {opacity:1; transform:translateX(0) scale(1)}
  100%{opacity:0; transform:translateX(10px) scale(.98)}
}

@media (prefers-reduced-motion:reduce){
  .tg-tab{animation:none; transition:none}
  .tg-ring{display:none}
  .tg-icon svg{transition:none}
  /* Elemento puramente d'attrazione: senza movimento non ha ragione d'essere,
     e la linguetta resta comunque etichettata. */
  .tg-invito{display:none}
}

@media print{ .tg-tab,.tg-invito{display:none} }