/* Social verticali sul lato destro, fissi per tutta la pagina.
   Valori presi da #qodef-floating-social-networks del tema. Il testo si legge
   dal basso verso l'alto: Facebook sotto, Instagram sopra. */
.social-flottanti{
  position:fixed;
  top:50%;
  right:2%;
  display:flex;
  justify-content:center;
  min-width:300px;
  transform-origin:50% 100%;
  transform:translate(50%,-100%) rotate(-90deg);
  z-index:100;
}
.social-flottanti li{margin-right:15px}
.social-flottanti li:last-child{margin-right:0}
.social-flottanti a{
  position:relative;
  display:inline-block;
  font-family:var(--display);
  font-size:23px;
  font-weight:400;
  line-height:1.4em;
  color:var(--nero);
}
/* filo sotto la parola: al passaggio esce da destra e rientra da sinistra */
.social-flottanti a::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:5px;
  height:1px;
  background-color:currentColor;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.social-flottanti a:hover::after{
  transform-origin:100% 50%;
  transform:scaleX(0);
  animation:social-filo .5s .2s forwards;
}
@keyframes social-filo{
  from{transform-origin:0 50%;transform:scaleX(0)}
  to{transform-origin:0 50%;transform:scaleX(1)}
}

@media (max-width:1024px){
  .social-flottanti{right:3%}
}
@media (max-width:768px){
  /* sul vivo la soglia era 680px, qui si allinea al taglio del progetto */
  .social-flottanti{display:none}
}