/**
 * OFC Button Animations CSS
 * Version: 1.0.1
 * 
 * Add animation effects to buttons by adding these classes:
 * - animate-circle: Circle expand animation
 * - animate-ripple: Ripple effect from click point
 * - animate-pulse: Pulse animation on the right side
 * - animate-spin: Spinning circle animation
 */

/* === CIRCLE EXPAND ANIMATION === */
.animate-circle {
    position: relative;
    overflow: hidden;
}

.animate-circle .circle-indicator {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 0;
    height: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

.animate-circle .circle-indicator.animate {
    width: 16px;
    height: 16px;
    opacity: 1;
}

.animate-circle .circle-indicator.fade-out {
    width: 20px;
    height: 20px;
    opacity: 0;
    border-width: 1px;
}

/* Continuous pulsing circle for loading state */
.animate-circle .circle-indicator.loading {
    width: 16px;
    height: 16px;
    opacity: 1;
    animation: ofc-circle-pulse-loading 1s ease-in-out infinite;
    transition: none;
}

@keyframes ofc-circle-pulse-loading {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-50%) scale(1.3);
        opacity: 0.7;
    }
}

/* === RIPPLE EFFECT ANIMATION === */
.animate-ripple {
    position: relative;
    overflow: hidden;
}

.animate-ripple .ripple-effect {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    animation: ofc-ripple-animation 0.6s ease-out forwards;
    z-index: 1;
}

/* Continuous ripple for loading state */
.animate-ripple .ripple-loading {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: currentColor;
    transform: translateY(-50%);
    animation: ofc-ripple-loading 1s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes ofc-ripple-animation {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 60px;
        height: 60px;
        opacity: 0;
    }
}

@keyframes ofc-ripple-loading {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-50%) scale(1.4);
        opacity: 0.8;
    }
}

/* === PULSE ANIMATION === */
.animate-pulse {
    position: relative;
    overflow: hidden;
}

.animate-pulse .pulse-effect {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    background-color: currentColor;
    border-radius: 50%;
    transform: translate(50%, -50%);
    animation: ofc-pulse-animation 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 1;
}

/* Continuous pulse loading animation */
.animate-pulse .pulse-effect.loading {
    animation: ofc-pulse-loading 1.2s ease-in-out infinite;
}

@keyframes ofc-pulse-animation {
    0% {
        transform: translate(50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        transform: translate(50%, -50%) scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: translate(50%, -50%) scale(2.5);
        opacity: 0;
    }
}

@keyframes ofc-pulse-loading {
    0% {
        transform: translate(50%, -50%) scale(0.8);
        opacity: 1;
    }
    50% {
        transform: translate(50%, -50%) scale(1.5);
        opacity: 0.6;
    }
    100% {
        transform: translate(50%, -50%) scale(0.8);
        opacity: 1;
    }
}

/* === SPINNING CIRCLE ANIMATION === */
.animate-spin {
    position: relative;
    overflow: visible;
}

.animate-spin .spin-effect {
    position: absolute;
    top: 50%;
    right: -25px;
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-top: 2px solid transparent;
    border-radius: 50%;
    transform: translateY(-50%);
    animation: ofc-spin-animation 1s ease-in-out forwards;
    pointer-events: none;
    z-index: 1;
}

/* Continuous spinning animation for loading state */
.animate-spin .spin-effect.loading {
    animation: ofc-spin-loading 0.8s linear infinite;
}

@keyframes ofc-spin-animation {
    0% {
        transform: translateY(-50%) rotate(0deg) scale(0);
        opacity: 0;
    }
    20% {
        transform: translateY(-50%) rotate(72deg) scale(1);
        opacity: 1;
    }
    80% {
        transform: translateY(-50%) rotate(288deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50%) rotate(360deg) scale(0);
        opacity: 0;
    }
}

@keyframes ofc-spin-loading {
    0% {
        transform: translateY(-50%) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50%) rotate(360deg) scale(1);
        opacity: 1;
    }
}

/* === COMPATIBILITY FIXES === */

/* Ensure animations work with common button styles */
.animate-circle,
.animate-ripple,
.animate-pulse,
.animate-spin {
    /* Ensure position relative is set */
    position: relative !important;
}

/* Elementor compatibility */
.elementor-button.animate-circle,
.elementor-button.animate-ripple,
.elementor-button.animate-pulse,
.elementor-button.animate-spin {
    overflow: hidden;
}

/* Gutenberg button compatibility */
.wp-block-button__link.animate-circle,
.wp-block-button__link.animate-ripple,
.wp-block-button__link.animate-pulse,
.wp-block-button__link.animate-spin {
    overflow: hidden;
}

/* Divi compatibility */
.et_pb_button.animate-circle,
.et_pb_button.animate-ripple,
.et_pb_button.animate-pulse,
.et_pb_button.animate-spin {
    overflow: hidden;
}

/* Contact Form 7 compatibility */
.wpcf7-form-control.animate-circle,
.wpcf7-form-control.animate-ripple,
.wpcf7-form-control.animate-pulse,
.wpcf7-form-control.animate-spin {
    overflow: hidden;
}

/* WooCommerce compatibility */
.woocommerce-button.animate-circle,
.woocommerce-button.animate-ripple,
.woocommerce-button.animate-pulse,
.woocommerce-button.animate-spin {
    overflow: hidden;
}

/* Generic button compatibility */
button.animate-circle,
button.animate-ripple,
button.animate-pulse,
button.animate-spin,
input[type="submit"].animate-circle,
input[type="submit"].animate-ripple,
input[type="submit"].animate-pulse,
input[type="submit"].animate-spin {
    overflow: hidden;
}

/* Ensure z-index doesn't interfere with dropdowns */
.animate-circle .circle-indicator,
.animate-ripple .ripple-effect,
.animate-pulse .pulse-effect,
.animate-spin .spin-effect {
    z-index: 1;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Slightly smaller animations on mobile */
    .animate-circle .circle-indicator.animate {
        width: 14px;
        height: 14px;
    }
    
    .animate-pulse .pulse-effect {
        width: 6px;
        height: 6px;
    }
    
    .animate-spin .spin-effect {
        width: 18px;
        height: 18px;
    }
}