/**
 * Bordure dégradée bleu/violet animée, réutilisable sur n'importe quel élément
 * avec `border-radius` (boutons `.sy-btn`, cartes, etc.).
 *
 * Usage : ajouter la classe `sy-btn--gradient-border-anim` en plus des classes
 * habituelles de l'élément. Technique : anneau via pseudo-élément `::before`
 * masqué en XOR (visible uniquement entre `content-box` et le bord), dégradé
 * qui défile via `background-position` (même principe que le fond animé du
 * loader/écran de connexion, cf. modules/loadingScreenBackground.css et
 * modules/authBackgroundAurora.css).
 */

.sy-btn--gradient-border-anim {
    position: relative;
    z-index: 0;
}

.sy-btn--gradient-border-anim::before {
    content: '';
    position: absolute;
    inset: -5px;
    z-index: -1;
    border-radius: inherit;
    padding: 5px;
    background: linear-gradient(90deg, #60a5fa, #c084fc, #818cf8, #60a5fa);
    background-size: 300% 100%;
    animation: sy-gradient-border-flow 3s linear infinite;
    box-shadow: 0 0 10px rgba(147, 51, 234, 0.55);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes sy-gradient-border-flow {
    to {
        background-position: 300% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sy-btn--gradient-border-anim::before {
        animation: none;
        background-position: 0 0;
    }
}