/**
 * Jscriptz SocialLogin - Designer Button Effects
 *
 * 10 visually stunning CSS-driven animation effects for social login buttons.
 * Each effect uses advanced CSS (animations, pseudo-elements, clip-path, gradients).
 * All animations respect prefers-reduced-motion for accessibility.
 */

/* ===== 1. HOLOGRAPHIC ===== */
@keyframes holographicShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes holographicSheen {
    0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(200%) skewX(-15deg); }
}

.jscriptz-social-login-customer .social-login-btn.holographic-animation,
.jscriptz-social-login-container .social-login-btn.holographic-animation,
.holographic-animation {
    background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd, #ff6b6b);
    background-size: 400% 400%;
    animation: holographicShift 6s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
.holographic-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-15deg);
    animation: holographicSheen 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
.holographic-animation:hover {
    animation-duration: 2s;
}
.holographic-animation:hover::before {
    animation-duration: 1.5s;
}

/* ===== 2. NEON PULSE ===== */
@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 5px var(--provider-color, #00d9ff),
                    0 0 10px var(--provider-color, #00d9ff),
                    0 0 20px var(--provider-color, #00d9ff),
                    0 0 40px var(--provider-color, #00d9ff);
    }
    50% {
        box-shadow: 0 0 10px var(--provider-color, #00d9ff),
                    0 0 20px var(--provider-color, #00d9ff),
                    0 0 40px var(--provider-color, #00d9ff),
                    0 0 80px var(--provider-color, #00d9ff);
    }
}
@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 24%, 55% { opacity: 0.85; }
}

.jscriptz-social-login-customer .social-login-btn.neon-pulse-animation,
.jscriptz-social-login-container .social-login-btn.neon-pulse-animation,
.neon-pulse-animation {
    background: #0a0a1a;
    border: 2px solid var(--provider-color, #00d9ff);
    animation: neonPulse 2.5s ease-in-out infinite, neonFlicker 4s linear infinite;
}
.neon-pulse-animation:hover {
    animation: neonPulse 1s ease-in-out infinite;
}

/* ===== 3. GRADIENT BORDER SPIN ===== */
@keyframes gradientBorderSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.jscriptz-social-login-customer .social-login-btn.gradient-border-animation,
.jscriptz-social-login-container .social-login-btn.gradient-border-animation,
.gradient-border-animation {
    position: relative;
    z-index: 0;
    overflow: visible;
}
.gradient-border-animation::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0000);
    animation: gradientBorderSpin 3s linear infinite;
    z-index: -2;
}
.gradient-border-animation::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: inherit;
    background: inherit;
    z-index: -1;
}
.gradient-border-animation:hover::before {
    animation-duration: 1s;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
}

/* ===== 4. GLITCH ===== */
@keyframes glitchMain {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
    20% { clip-path: inset(10% 0 60% 0); transform: translate(-2px, 2px); }
    40% { clip-path: inset(40% 0 30% 0); transform: translate(2px, -1px); }
    60% { clip-path: inset(70% 0 5% 0); transform: translate(-1px, 1px); }
    80% { clip-path: inset(20% 0 50% 0); transform: translate(1px, -2px); }
}
@keyframes glitchRed {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
    25% { clip-path: inset(5% 0 70% 0); transform: translate(3px, 0); }
    50% { clip-path: inset(50% 0 20% 0); transform: translate(-3px, 0); }
    75% { clip-path: inset(30% 0 40% 0); transform: translate(2px, 0); }
}
@keyframes glitchCyan {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
    25% { clip-path: inset(60% 0 10% 0); transform: translate(-3px, 0); }
    50% { clip-path: inset(10% 0 60% 0); transform: translate(3px, 0); }
    75% { clip-path: inset(45% 0 25% 0); transform: translate(-2px, 0); }
}

.jscriptz-social-login-customer .social-login-btn.glitch-animation,
.jscriptz-social-login-container .social-login-btn.glitch-animation,
.glitch-animation {
    position: relative;
    animation: glitchMain 5s steps(1) infinite;
}
.glitch-animation::before,
.glitch-animation::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
}
.glitch-animation::before {
    background: rgba(255, 0, 0, 0.15);
    animation: glitchRed 3s steps(1) infinite;
}
.glitch-animation::after {
    background: rgba(0, 255, 255, 0.15);
    animation: glitchCyan 3.5s steps(1) infinite;
}
.glitch-animation:hover {
    animation-duration: 1s;
}
.glitch-animation:hover::before {
    animation-duration: 0.5s;
    background: rgba(255, 0, 0, 0.25);
}
.glitch-animation:hover::after {
    animation-duration: 0.6s;
    background: rgba(0, 255, 255, 0.25);
}

/* ===== 5. LIQUID BLOB ===== */
@keyframes liquidBlob {
    0%, 100% { border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%; }
    14% { border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; }
    28% { border-radius: 50% 50% 40% 60% / 40% 50% 60% 50%; }
    42% { border-radius: 55% 45% 60% 40% / 50% 55% 45% 55%; }
    57% { border-radius: 40% 60% 45% 55% / 60% 40% 55% 45%; }
    71% { border-radius: 50% 50% 55% 45% / 45% 55% 50% 50%; }
    85% { border-radius: 55% 45% 40% 60% / 55% 45% 60% 40%; }
}

.jscriptz-social-login-customer .social-login-btn.liquid-blob-animation,
.jscriptz-social-login-container .social-login-btn.liquid-blob-animation,
.liquid-blob-animation {
    animation: liquidBlob 8s ease-in-out infinite;
    transition: transform 0.3s ease;
}
.liquid-blob-animation:hover {
    animation-duration: 3s;
    transform: scale(1.08);
}

/* ===== 6. PARTICLE ORBIT ===== */
@keyframes particleOrbit {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes particleOrbitReverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

.jscriptz-social-login-customer .social-login-btn.particle-orbit-animation,
.jscriptz-social-login-container .social-login-btn.particle-orbit-animation,
.particle-orbit-animation {
    position: relative;
    overflow: visible;
}
.particle-orbit-animation::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        28px 0 0 2px #ff6b6b,
        -28px 0 0 2px #48dbfb,
        0 28px 0 2px #feca57,
        0 -28px 0 2px #ff9ff3,
        20px 20px 0 2px #54a0ff,
        -20px -20px 0 2px #5f27cd,
        20px -20px 0 2px #00d2d3,
        -20px 20px 0 2px #ff9f43;
    animation: particleOrbit 4s linear infinite;
    pointer-events: none;
    z-index: -1;
}
.particle-orbit-animation::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        35px 0 0 1.5px #ff6b6b,
        -35px 0 0 1.5px #48dbfb,
        0 35px 0 1.5px #feca57,
        -25px 25px 0 1.5px #54a0ff,
        25px -25px 0 1.5px #5f27cd;
    animation: particleOrbitReverse 6s linear infinite;
    pointer-events: none;
    z-index: -1;
}
.particle-orbit-animation:hover::before {
    animation-duration: 1.5s;
}
.particle-orbit-animation:hover::after {
    animation-duration: 2s;
}

/* ===== 7. ELECTRIC ===== */
@keyframes electricGlow {
    0%, 100% { box-shadow: 0 0 5px #00e5ff, 0 0 10px #00e5ff; }
    25% { box-shadow: 0 0 15px #00e5ff, 0 0 30px #00e5ff, 0 0 50px #0077ff; }
    50% { box-shadow: 0 0 5px #00e5ff, 0 0 8px #00e5ff; }
    75% { box-shadow: 0 0 20px #00e5ff, 0 0 40px #00e5ff, 0 0 60px #0077ff; }
}
@keyframes electricArc1 {
    0%, 100% { clip-path: polygon(45% 0%, 48% 30%, 52% 30%, 55% 0%); opacity: 0; }
    10% { clip-path: polygon(42% 0%, 46% 35%, 54% 25%, 58% 0%); opacity: 1; }
    20% { clip-path: polygon(45% 0%, 48% 30%, 52% 30%, 55% 0%); opacity: 0; }
    50% { opacity: 0; }
    60% { clip-path: polygon(0% 45%, 30% 48%, 30% 52%, 0% 55%); opacity: 1; }
    70% { clip-path: polygon(0% 45%, 30% 48%, 30% 52%, 0% 55%); opacity: 0; }
}
@keyframes electricArc2 {
    0%, 40% { opacity: 0; }
    45% { clip-path: polygon(100% 40%, 70% 46%, 70% 54%, 100% 60%); opacity: 1; }
    55% { opacity: 0; }
    80% { clip-path: polygon(45% 100%, 48% 70%, 52% 70%, 55% 100%); opacity: 1; }
    90% { opacity: 0; }
    100% { opacity: 0; }
}

.jscriptz-social-login-customer .social-login-btn.electric-animation,
.jscriptz-social-login-container .social-login-btn.electric-animation,
.electric-animation {
    background: #0a1628;
    border: 1px solid #00e5ff;
    animation: electricGlow 2s steps(2) infinite;
    position: relative;
    overflow: hidden;
}
.electric-animation::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: #00e5ff;
    animation: electricArc1 1.5s steps(2) infinite;
    pointer-events: none;
    z-index: 1;
}
.electric-animation::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: #0077ff;
    animation: electricArc2 2s steps(2) infinite;
    pointer-events: none;
    z-index: 1;
}
.electric-animation:hover {
    animation-duration: 0.8s;
}
.electric-animation:hover::before {
    animation-duration: 0.6s;
}
.electric-animation:hover::after {
    animation-duration: 0.8s;
}

/* ===== 8. AURORA BOREALIS ===== */
@keyframes auroraFlow {
    0% { background-position: 0% 50%; filter: blur(8px); transform: scale(1.1) rotate(0deg); }
    25% { background-position: 50% 100%; filter: blur(12px); transform: scale(1.15) rotate(1deg); }
    50% { background-position: 100% 50%; filter: blur(10px); transform: scale(1.12) rotate(-1deg); }
    75% { background-position: 50% 0%; filter: blur(14px); transform: scale(1.18) rotate(0.5deg); }
    100% { background-position: 0% 50%; filter: blur(8px); transform: scale(1.1) rotate(0deg); }
}

.jscriptz-social-login-customer .social-login-btn.aurora-animation,
.jscriptz-social-login-container .social-login-btn.aurora-animation,
.aurora-animation {
    position: relative;
    overflow: hidden;
    background: #0a1628;
    border: 1px solid rgba(100, 200, 255, 0.3);
}
.aurora-animation::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg,
        rgba(0, 255, 128, 0.3),
        rgba(0, 128, 255, 0.3),
        rgba(128, 0, 255, 0.3),
        rgba(0, 255, 200, 0.3),
        rgba(0, 100, 255, 0.3));
    background-size: 300% 300%;
    animation: auroraFlow 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
.aurora-animation > * {
    position: relative;
    z-index: 1;
}
.aurora-animation:hover::before {
    animation-duration: 4s;
    opacity: 1.3;
}

/* ===== 9. RIPPLE WAVE ===== */
@keyframes rippleExpand {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(2.2); opacity: 0; }
}

.jscriptz-social-login-customer .social-login-btn.ripple-wave-animation,
.jscriptz-social-login-container .social-login-btn.ripple-wave-animation,
.ripple-wave-animation {
    position: relative;
    overflow: visible;
}
.ripple-wave-animation::before,
.ripple-wave-animation::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--provider-color, #3b82f6);
    border-radius: inherit;
    animation: rippleExpand 3s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}
.ripple-wave-animation::after {
    animation-delay: 1.5s;
}
.ripple-wave-animation:hover::before,
.ripple-wave-animation:hover::after {
    animation-duration: 1.5s;
}
.ripple-wave-animation:hover::after {
    animation-delay: 0.75s;
}

/* ===== 10. SPOTLIGHT SWEEP ===== */
@keyframes spotlightSweep {
    0% { background-position: -50% 50%; }
    100% { background-position: 150% 50%; }
}

.jscriptz-social-login-customer .social-login-btn.spotlight-animation,
.jscriptz-social-login-container .social-login-btn.spotlight-animation,
.spotlight-animation {
    position: relative;
    overflow: hidden;
}
.spotlight-animation::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 30px at var(--spot-x, -50%) 50%, rgba(255,255,255,0.4), transparent 70%);
    background-size: 100% 100%;
    background-position: -50% 50%;
    animation: spotlightSweep 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}
.spotlight-animation:hover::after {
    animation-duration: 2s;
}

/* ===== ACCESSIBILITY: Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .holographic-animation,
    .holographic-animation::before,
    .neon-pulse-animation,
    .gradient-border-animation::before,
    .glitch-animation,
    .glitch-animation::before,
    .glitch-animation::after,
    .liquid-blob-animation,
    .particle-orbit-animation::before,
    .particle-orbit-animation::after,
    .electric-animation,
    .electric-animation::before,
    .electric-animation::after,
    .aurora-animation::before,
    .ripple-wave-animation::before,
    .ripple-wave-animation::after,
    .spotlight-animation::after {
        animation: none;
    }
}