/* Brillance — une bordure qui brille.

   Un reflet de lumière qui parcourt sans fin le cadre d'un élément : une
   vignette, une carte, un bouton. Port en CSS natif du composant « Shine
   Border » de Magic UI (MIT, https://magicui.design/docs/components/shine-border),
   sans React. Il n'y a pas de JavaScript : tout est dans ce fichier.

   Deux éléments, deux rôles :

     .brillance-zone  l'élément à encadrer. Il porte les variables et devient
                      position: relative.
     .brillance       le calque du reflet, posé par-dessus le cadre. Vous
                      l'écrivez dans le HTML, vide, en premier ou dernier
                      enfant. Il ne capte jamais le pointeur.

   ── Le point à ne pas défaire ─────────────────────────────────────────────
   Le reflet est un dégradé radial peint sur tout le calque, puis MASQUÉ pour
   ne laisser qu'un anneau : deux masques pleins, l'un limité à la boîte de
   contenu, l'autre à la boîte entière, composés en « exclude ». Ce qui reste
   est la différence entre les deux, c'est-à-dire exactement le padding — et
   le padding vaut la largeur de la bordure. Le dégradé glisse ensuite en
   fond, en 300 % de la taille du calque, et l'anneau le laisse voir par
   morceaux : c'est le reflet qui tourne. Sans le masque, on aurait un halo
   plein par-dessus le contenu ; avec un border-image, on n'aurait pas
   l'animation.

   Tout ce qui se règle passe par les variables ci-dessous : posez-les sur
   .brillance-zone, sur :root, ou sur une classe modificatrice — et liez
   cette feuille AVANT la vôtre, pour que vos réglages l'emportent. */

.brillance-zone {
  --brillance-largeur: 1px;             /* l'épaisseur du reflet, sur le bord */
  --brillance-duree: 14s;               /* un tour complet */
  --brillance-couleurs: #000000;        /* une couleur, ou plusieurs séparées par des virgules */
  --brillance-debord: 0px;              /* > 0 pour recouvrir une bordure existante de l'élément */

  position: relative;
}

.brillance {
  position: absolute;
  inset: calc(var(--brillance-debord) * -1);
  z-index: 1;
  border-radius: inherit;
  padding: var(--brillance-largeur);
  pointer-events: none;
  background-image: radial-gradient(transparent, transparent, var(--brillance-couleurs), transparent, transparent);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: brillance-tourne var(--brillance-duree) linear infinite;
  will-change: background-position;
}

@keyframes brillance-tourne {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* Sous « moins d'animations », le reflet reste posé, immobile. */
@media (prefers-reduced-motion: reduce) {
  .brillance { animation: none; }
}