/* ==========================================================================
   Antiskop — « Sans résolution » : le retrait.
   Un seul mouvement, cyclique : la matière du thème se retire lentement — le
   fond des champs, leur filet, les icônes de marque, le nom des plateformes —
   puis elle revient d'un coup.
   Le cycle tient une seconde entière au point bas, tout au maximum du retrait,
   avant de tout réafficher : la page ne s'éteint jamais vraiment, elle ne se
   résout pas.
   Les mentions en bleu, elles, ne bougent jamais (10,53:1 au point bas) ; le
   statut et son curseur restent affichés.
   Tout est coupé sous prefers-reduced-motion: reduce et la matière reste alors
   en place, à son état plein.
   ========================================================================== */
@keyframes asFade{ from{opacity:0} to{opacity:1} }

/* Le cycle sur 25 s : descente lente de 3 % à 84 % (≈ 20,25 s), tenue de 84 % à
   96 % (3,00 s, tout au maximum du retrait), puis retour sec de 96 % à 96,4 %
   (0,10 s). Le retour est net, ce n'est pas un fondu. */
@keyframes asRetraitFond{
  0%, 3%    { background-color:var(--verre) }
  84%       { background-color:var(--salle) }
  96%       { background-color:var(--salle) }
  96.4%,100%{ background-color:var(--verre) }
}

@keyframes asRetraitFilet{
  0%, 3%    { border-bottom-color:var(--transmission); opacity:.5 }
  84%       { border-bottom-color:var(--salle); opacity:0 }
  96%       { border-bottom-color:var(--salle); opacity:0 }
  96.4%,100%{ border-bottom-color:var(--transmission); opacity:.5 }
}

@keyframes asRetraitNom{
  0%, 3%    { color:var(--os) }
  84%       { color:var(--salle) }
  96%       { color:var(--salle) }
  96.4%,100%{ color:var(--os) }
}

/* le curseur du statut : largeur du trait 0 -> 0,82ch (bascule franche) */
@keyframes asCurseur{
  0%, 49%   { background-size:.82ch 2px }
  50%, 100% { background-size:0 2px }
}

@keyframes asRetraitIcone{
  0%, 3%    { opacity:1 }
  84%       { opacity:0 }
  96%       { opacity:0 }
  96.4%,100%{ opacity:1 }
}

.fadein{ animation:asFade .42s ease-out both }

/* les champs entrent l'un après l'autre, dans l'ordre de la liste
   (--delay est posé par LinkStack : 1s, 2s, 3s…) */
.button-entrance{
  animation:asFade .42s ease-out both;
  animation-delay:calc(var(--delay,0s) * .22 + .08s);
}

/* les deux éléments d'interface n'entrent pas : ils sont là dès le départ. */
.sharediv,.copy-icon{ animation:none }