/**
 * Oguey Custom — Pulse Ring module
 *
 * Effet de vaguelettes / anneaux pulsants autour d'un élément.
 * Pure CSS, aucun JS requis.
 *
 * Architecture :
 *   - L'élément lui-même n'est pas modifié (pas de scale, ni de filtre)
 *   - 2 pseudo-éléments ::before et ::after créent les anneaux
 *   - 3e anneau via box-shadow animé sur le conteneur
 *   - Décalage des animation-delay pour un effet en cascade
 */

.oguey-pulse-ring {
    /* Variables (surchargeables via :root depuis l'admin) */
    --_color: var(--oguey-pulse-color, #ffffff);
    --_duration: var(--oguey-pulse-duration, 2.5s);
    --_max-scale: var(--oguey-pulse-max-scale, 2.4);
    --_opacity: var(--oguey-pulse-opacity, 0.65);

    /* Le conteneur reste cliquable, les pseudo-éléments sont passifs */
    position: relative;
    isolation: isolate;
}

/* Les anneaux ::before et ::after sont placés DERRIÈRE l'élément (z-index -1)
   pour ne pas masquer le bouton et rester cliquables. */
.oguey-pulse-ring::before,
.oguey-pulse-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* Si le conteneur n'a pas de border-radius, on force un cercle */
    border-radius: 50%;
    background-color: var(--_color);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transform: scale(1);
    animation: oguey-pulse-ring-anim var(--_duration) cubic-bezier(0, 0.55, 0.45, 1) infinite;
    will-change: transform, opacity;
}

/* Le 2e anneau démarre avec un décalage = mi-cycle */
.oguey-pulse-ring::after {
    animation-delay: calc(var(--_duration) * 0.5);
}

@keyframes oguey-pulse-ring-anim {
    0% {
        transform: scale(1);
        opacity: var(--_opacity);
    }
    100% {
        transform: scale(var(--_max-scale));
        opacity: 0;
    }
}

/* 3e anneau optionnel via box-shadow animé sur un wrapper :before invisible.
   On utilise une variante pour ne pas casser les flux quand `--_rings` = 1 ou 2. */

/* Si Elementor a placé un wrapper interne (ex: .elementor-icon-wrapper),
   on s'assure qu'il reste positionné correctement. */
.oguey-pulse-ring .elementor-icon-wrapper,
.oguey-pulse-ring .elementor-icon,
.oguey-pulse-ring .elementor-button {
    position: relative;
    z-index: 1;
}


/* ============================================
   VARIANTES
   ============================================ */

/* Vitesses */
.oguey-pulse-ring--slow {
    --_duration: 4s;
}
.oguey-pulse-ring--fast {
    --_duration: 1.5s;
}

/* Couleurs prédéfinies */
.oguey-pulse-ring--gold {
    --_color: #d4a96a;
}
.oguey-pulse-ring--blue {
    --_color: #143F84;
}

/* Intensité plus marquée */
.oguey-pulse-ring--strong {
    --_opacity: 0.9;
    --_max-scale: 2.8;
}

/* Stoppe au hover (effet "le bouton vous attendait, vous l'avez vu") */
.oguey-pulse-ring:hover::before,
.oguey-pulse-ring:hover::after,
.oguey-pulse-ring:focus-within::before,
.oguey-pulse-ring:focus-within::after {
    animation-play-state: paused;
    opacity: 0;
    transition: opacity 300ms ease-out;
}


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

@media (prefers-reduced-motion: reduce) {
    .oguey-pulse-ring::before,
    .oguey-pulse-ring::after {
        animation: none !important;
        opacity: 0 !important;
    }
}