/*
 * WS Booster - Effets bouton
 * Border Beam, Glow, Shimmer, Rectangle decale
 */

/* Border Beam - lumiere qui tourne sur les bords */
.ws-btn-beam {
    position: relative;
    overflow: hidden;
}

.ws-btn-beam::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--ws-beam-angle, 0deg),
        transparent 0deg,
        var(--ws-btn-color, #ef3340) 60deg,
        transparent 120deg
    );
    animation: ws-beam-rotate 2s linear infinite;
    z-index: 0;
}

.ws-btn-beam::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: inherit;
    border-radius: inherit;
    z-index: 1;
}

.ws-btn-beam > * {
    position: relative;
    z-index: 2;
}

@keyframes ws-beam-rotate {
    to { --ws-beam-angle: 360deg; }
}

/* Fallback pour navigateurs sans @property (Firefox < 128) */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .ws-btn-beam::before {
        background: var(--ws-btn-color, #ef3340);
        opacity: 0.5;
        animation: ws-beam-pulse 2s ease-in-out infinite;
    }
}

@keyframes ws-beam-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Glow pulsant */
.ws-btn-glow {
    animation: ws-glow-pulse 2s ease-in-out infinite;
}

@keyframes ws-glow-pulse {
    0%, 100% { box-shadow: 0 0 10px 0 var(--ws-btn-color, #ef3340); }
    50% { box-shadow: 0 0 30px 8px var(--ws-btn-color, #ef3340); }
}

/* Shimmer - reflet qui passe */
.ws-btn-shimmer {
    position: relative;
    overflow: hidden;
}

.ws-btn-shimmer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 60%
    );
    animation: ws-shimmer 2.5s ease-in-out infinite;
}

@keyframes ws-shimmer {
    0% { left: -150%; }
    100% { left: 150%; }
}

/* Rectangle decale */
.ws-btn-rectangle {
    position: relative;
    z-index: 1;
}

.ws-btn-rectangle-bg {
    position: absolute;
    inset: 0;
    background: var(--ws-btn-color, #ef3340);
    border-radius: inherit;
    transform: rotate(3deg) translateY(4px);
    z-index: -1;
    transition: transform 0.3s ease;
}

.ws-btn-rectangle:hover .ws-btn-rectangle-bg {
    transform: rotate(5deg) translateY(6px);
}

/* Shiny - reflet lumineux persistant + glow au hover (style aliimam 21st.dev) */
.ws-btn-shiny {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.ws-btn-shiny::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        color-mix(in srgb, var(--ws-btn-color, #ef3340) 50%, transparent) 80deg,
        transparent 160deg,
        transparent 360deg
    );
    animation: ws-shiny-spin 4s linear infinite;
    pointer-events: none;
    z-index: -1;
}

.ws-btn-shiny::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 20%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 80%
    );
    pointer-events: none;
    z-index: 2;
    animation: ws-shiny-sweep 3.5s ease-in-out infinite;
}

.ws-btn-shiny:hover {
    box-shadow: 0 0 24px 4px color-mix(in srgb, var(--ws-btn-color, #ef3340) 55%, transparent);
    transform: translateY(-1px);
}

.ws-btn-shiny > * {
    position: relative;
    z-index: 3;
}

@keyframes ws-shiny-spin {
    to { transform: rotate(360deg); }
}

@keyframes ws-shiny-sweep {
    0%   { left: -120%; }
    60%  { left: 120%; }
    100% { left: 120%; }
}

/* Slide In - remplissage de couleur depuis un cote au hover (style Framer icon-slide-in-button) */
.ws-btn-slidein {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.35s ease;
}

.ws-btn-slidein::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ws-btn-color, #ef3340);
    transform: translateX(-101%);
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
    z-index: -1;
}

.ws-btn-slidein:hover::before {
    transform: translateX(0);
}

/* Direction droite : remplit depuis la droite */
.ws-btn-slidein[data-ws-slidein-dir="right"]::before {
    transform: translateX(101%);
}
.ws-btn-slidein[data-ws-slidein-dir="right"]:hover::before {
    transform: translateX(0);
}

/* Direction haut */
.ws-btn-slidein[data-ws-slidein-dir="top"]::before {
    transform: translateY(-101%);
}
.ws-btn-slidein[data-ws-slidein-dir="top"]:hover::before {
    transform: translateY(0);
}

/* Direction bas */
.ws-btn-slidein[data-ws-slidein-dir="bottom"]::before {
    transform: translateY(101%);
}
.ws-btn-slidein[data-ws-slidein-dir="bottom"]:hover::before {
    transform: translateY(0);
}

.ws-btn-slidein > * {
    position: relative;
    z-index: 2;
}

/* Glissement de l'icone au hover (si icone presente dans le bouton) */
.ws-btn-slidein .elementor-button-icon,
.ws-btn-slidein i,
.ws-btn-slidein svg {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.ws-btn-slidein:hover .elementor-button-icon,
.ws-btn-slidein:hover i,
.ws-btn-slidein:hover svg {
    transform: translateX(4px);
}

/* Liquid Reveal - remplissage circulaire anime au hover (clip-path) */
.ws-btn-liquid {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.35s ease;
}

.ws-btn-liquid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ws-btn-color, #ef3340);
    z-index: -1;
    clip-path: circle(0% at var(--ws-liquid-x, 50%) var(--ws-liquid-y, 100%));
    transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}

.ws-btn-liquid:hover::before {
    clip-path: circle(150% at var(--ws-liquid-x, 50%) var(--ws-liquid-y, 100%));
}

.ws-btn-liquid > * {
    position: relative;
    z-index: 2;
}

/* Origine personnalisable : le JS met a jour --ws-liquid-x/y selon la position de la souris */
.ws-btn-liquid[data-liquid-origin="center"] {
    --ws-liquid-x: 50%;
    --ws-liquid-y: 50%;
}

.ws-btn-liquid[data-liquid-origin="top"] {
    --ws-liquid-x: 50%;
    --ws-liquid-y: 0%;
}

.ws-btn-liquid[data-liquid-origin="bottom"] {
    --ws-liquid-x: 50%;
    --ws-liquid-y: 100%;
}

.ws-btn-liquid[data-liquid-origin="mouse"] {
    /* valeurs par defaut, seront override par JS au hover */
    --ws-liquid-x: 50%;
    --ws-liquid-y: 100%;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ws-btn-beam::before,
    .ws-btn-shimmer::after,
    .ws-btn-shiny::before,
    .ws-btn-shiny::after {
        animation: none;
    }
    .ws-btn-glow {
        animation: none;
        box-shadow: 0 0 10px 0 var(--ws-btn-color, #ef3340);
    }
    .ws-btn-slidein::before,
    .ws-btn-slidein .elementor-button-icon,
    .ws-btn-slidein i,
    .ws-btn-slidein svg {
        transition: none;
    }
    .ws-btn-liquid::before {
        transition: none;
    }
}