/* ==========================================================================
   Antiskop — « Sans résolution » : chaque lien est une émission.
   Le champ porte le nom de la plateforme (qui reste toujours lisible) et, en
   dessous, un fragment de la transmission — « transmitting », « no response »,
   « empty space »… (Winter, « ASH / SKIN »).
   La signature du thème, ici : la matière du champ (son fond, son filet, son
   icône de marque) se retire lentement, puis revient d'un coup. Le nom, lui,
   ne bouge jamais : la page perd son corps, pas sa voix.
   ========================================================================== */
.button-entrance{ position:relative; margin:0 0 10px; display:block }

.button{
  position:relative; display:flex; align-items:center; gap:11px;
  min-height:var(--cible);
  padding:10px 14px 22px 14px;          /* le bas porte le fragment       */
  background:var(--verre); border:0; border-radius:0;
  color:var(--os);
  font-family:'PlexMono', ui-monospace, monospace;
  font-size:14.5px; font-weight:500; letter-spacing:.01em;
  text-decoration:none; box-shadow:none;
  animation:asRetraitFond var(--retrait) linear infinite,
             asRetraitNom var(--retrait) linear infinite;
  transition:color .12s linear;
}

/* l'icône de la plateforme : recolorée, jamais rognée. Elle fait partie de la
   matière du thème : elle se retire avec le fond et revient avec lui. */
.button .icon{
  width:20px; height:20px; flex:0 0 auto; object-fit:contain; filter:none;
  animation:asRetraitIcone var(--retrait) linear infinite;
}

/* --- la couleur de chaque marque ---------------------------------------
   Les icônes du jeu LinkStack sont monochromes pour la plupart : elles sont
   recolorées ici, en CSS, sans toucher aux fichiers. */
.button-spotify .icon{ filter:none }
.button-apple-music .icon{
  filter:brightness(0) saturate(100%) invert(33%) sepia(70%) saturate(4000%) hue-rotate(-25deg) brightness(93%) contrast(115%);
}   /* #FC243C rendu, cible #FA243C */
.button-deezer .icon{
  filter:brightness(0) saturate(100%) invert(36%) sepia(80%) saturate(5500%) hue-rotate(-100deg) brightness(100%) contrast(100%);
}   /* #A23AFF rendu, cible #A238FF */
.button-bandcamp .icon{
  filter:brightness(0) saturate(100%) invert(46%) sepia(100%) saturate(6250%) hue-rotate(175deg) brightness(100%) contrast(49%);
}   /* #418394 rendu, cible #408294 */
.button-youtube .icon{
  filter:brightness(0) saturate(100%) invert(21%) sepia(100%) saturate(5500%) hue-rotate(0deg) brightness(100%) contrast(130%);
}   /* #FF0000 rendu, cible #FF0000 */

/* le filet du champ : la trace de l'émission. Il fait partie de la matière. */
.button::before{
  content:''; position:absolute; left:var(--champ-gauche); right:14px; bottom:20px;
  height:0; border-bottom:1px solid var(--transmission); opacity:.5;
  animation:asRetraitFilet var(--retrait) linear infinite;
}

/* le fragment de transmission, sous le champ (Winter, « ASH / SKIN ») */
.button::after{
  content:'no response';
  position:absolute; left:var(--champ-gauche); right:14px; bottom:5px;
  font-size:10.5px; letter-spacing:.1em;
  color:var(--transmission); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}
.button-spotify::after     { content:'transmitting' }
.button-apple-music::after { content:'no response' }
.button-deezer::after      { content:'empty space' }
.button-bandcamp::after    { content:'nothing receives' }
.button-youtube::after     { content:'still running' }
.button-instagram::after   { content:'last commands' }
.button-soundcloud::after  { content:'all that might have been' }
.button-patreon::after     { content:'nothing left to unlearn' }
/* Qobuz et Tidal arrivent tous les deux en « button-custom_website » : en CSS
   pur ils partagent donc le même fragment. */
.button-custom_website::after{ content:'no resolution' }

/* --- le geste : sous le doigt ou au clavier, la matière revient ---------
   !important repasse au-dessus de l'animation en cours : la matière revient
   tout de suite et reste là tant que le doigt est dessus. C'est le seul
   endroit où la page « répond ». */
.button:hover, .button:focus-visible{
  background-color:var(--verre2) !important; color:#ffffff !important;
}
.button:hover .icon, .button:focus-visible .icon{ opacity:1 !important }
.button:hover::before, .button:focus-visible::before{ opacity:.9 !important }

@media (max-width:400px){
  :root{ --champ-gauche:41px }
  .button{ font-size:13.5px; padding-right:12px }
  .button::after{ font-size:10px }
}