/* ============================
   STAR BORDER EFFECT
   Bordure fine avec point lumineux qui parcourt le contour
   Couleurs: Bleu -> Mauve (comme le titre hero)
   Pas d'ombrage/glow externe
   ============================ */

/* Container pour l'effet star border */
.star-border-btn {
    display: inline-block;
    position: relative;
    padding: 2px;
    background: transparent;
    transition: transform 0.3s ease;
    border-radius: 14px;
}

.star-border-btn::before {
    border-radius: 14px;
}

/* Bouton Connexion : reste arrondi (50px) */
.star-border-btn:has(.floating-nav-auth) {
    border-radius: 50px;
}

.star-border-btn:has(.floating-nav-auth)::before {
    border-radius: 50px;
}

/* Bouton Connexion - style arrondi pour le btn-inner aussi */
.star-border-btn .floating-nav-auth.btn-inner {
    border-radius: 48px;
}

/* Boutons carrés (Hero, Envoyer, etc.) */
.star-border-btn:has(.btn-hero-primary) {
    border-radius: 14px;
}

.star-border-btn:has(.btn-hero-primary)::before {
    border-radius: 14px;
}

.star-border-btn:has(.contact-btn-dark) {
    border-radius: 14px;
}

.star-border-btn:has(.contact-btn-dark)::before {
    border-radius: 14px;
}

.star-border-btn:hover {
    transform: translateY(-2px);
}

/* Bordure animée avec conic-gradient - BLEU -> MAUVE */
.star-border-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: conic-gradient(from var(--star-angle, 0deg),
            transparent 0%,
            transparent 55%,
            #3b82f6 65%,
            #6366f1 72%,
            #8b5cf6 79%,
            #a855f7 86%,
            #c084fc 93%,
            transparent 100%);
    -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: star-rotate 3s linear infinite;
    z-index: 0;
}

/* Animation de rotation */
@keyframes star-rotate {
    from {
        --star-angle: 0deg;
    }

    to {
        --star-angle: 360deg;
    }
}

/* Support pour la propriété CSS custom animée */
@property --star-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Contenu intérieur du bouton */
.star-border-btn .btn-inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    text-decoration: none;
    z-index: 1;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 12px;
}

/* Spécifique pour le bouton Envoyer */
.star-border-btn .contact-btn-dark.btn-inner {
    border-radius: 12px;
    margin-top: 0;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .star-border-btn::before {
        animation-duration: 2.5s;
    }

    .star-border-card::before {
        animation-duration: 2.5s;
    }
}

/* ===== MODE REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
    .star-border-btn::before {
        animation: none;
    }

    .star-border-card::before {
        animation: none;
    }
}

/* ============================
   STAR BORDER CARDS (Features)
   Effet star border pour les cartes about-feature
   ============================ */

.star-border-card {
    position: relative;
    overflow: visible;
}

/* Bordure animée pour les cartes */
.star-border-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    padding: 2px;
    background: conic-gradient(from var(--star-angle, 0deg),
            transparent 0%,
            transparent 55%,
            #3b82f6 65%,
            #6366f1 72%,
            #8b5cf6 79%,
            #a855f7 86%,
            #c084fc 93%,
            transparent 100%);
    -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: star-rotate 4s linear infinite;
    z-index: 0;
    pointer-events: none;
}

/* Success modal avec star border */
.success-modal-content.star-border-card {
    overflow: visible !important;
    position: relative !important;
}

.success-modal-content.star-border-card::before {
    content: '' !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: 24px !important;
    padding: 2px !important;
    background: conic-gradient(from var(--star-angle, 0deg),
            transparent 0%,
            transparent 55%,
            #3b82f6 65%,
            #6366f1 72%,
            #8b5cf6 79%,
            #a855f7 86%,
            #c084fc 93%,
            transparent 100%) !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    animation: star-rotate 4s linear infinite !important;
    z-index: 0 !important;
    pointer-events: none !important;
}