/* Reusable Button Effects CSS */

/* Disable conflicting Webflow animations for button effects */
.button-advance,
.button-round,
.button-primary,
.button-secondary,
.w-button,
[data-button-effect] {
    /* Disable Webflow animations that might conflict */
    animation: none !important;
    transition: none !important;
}

/* Ensure proper 3D transforms */
.button-advance *,
.button-round *,
.button-primary,
.button-secondary,
.w-button,
[data-button-effect],
[data-button-target] {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}

/* Button Advance specific styles */
.button-advance {
    position: relative;
    overflow: visible;
}

.button-advance-border {
    position: absolute;
    left: 8px;
    top: 8px;
    right: auto;
    bottom: auto;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-style: solid;
    border-width: 2px;
    border-color: #cafb42;
    background-color: transparent;
}

/* Button Round specific styles */
.button-round {
    position: relative;
    overflow: hidden;
}

.button-round-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Primary button styles */
.button-primary,
.w-button {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Secondary button styles */
.button-secondary {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Custom button effect styles */
[data-button-effect] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Hover state improvements */
.button-advance:hover,
.button-round:hover,
.button-primary:hover,
.button-secondary:hover,
.w-button:hover,
[data-button-effect]:hover {
    /* Ensure smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Focus states for accessibility */
.button-advance:focus,
.button-round:focus,
.button-primary:focus,
.button-secondary:focus,
.w-button:focus,
[data-button-effect]:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Active states */
.button-advance:active,
.button-round:active,
.button-primary:active,
.button-secondary:active,
.w-button:active,
[data-button-effect]:active {
    transform: scale(0.98);
}

/* Disabled states */
.button-advance:disabled,
.button-round:disabled,
.button-primary:disabled,
.button-secondary:disabled,
.w-button:disabled,
[data-button-effect]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Custom effect variations */
[data-button-effect="slide-up"]:hover,
[data-button-effect="slide-down"]:hover,
[data-button-effect="slide-left"]:hover,
[data-button-effect="slide-right"]:hover {
    /* Smooth sliding animations */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-button-effect="scale"]:hover {
    /* Smooth scaling animations */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-button-effect="rotate"]:hover {
    /* Smooth rotation animations */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Performance optimizations */
.button-advance *,
.button-round *,
.button-primary,
.button-secondary,
.w-button,
[data-button-effect],
[data-button-target] {
    /* Optimize for GPU acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
}

/* Mobile touch optimizations */
@media (hover: none) and (pointer: coarse) {
    .button-advance:active,
    .button-round:active,
    .button-primary:active,
    .button-secondary:active,
    .w-button:active,
    [data-button-effect]:active {
        /* Enhanced touch feedback */
        transform: scale(0.95);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .button-advance,
    .button-round,
    .button-primary,
    .button-secondary,
    .w-button,
    [data-button-effect] {
        border: 2px solid #007bff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .button-advance *,
    .button-round *,
    .button-primary,
    .button-secondary,
    .w-button,
    [data-button-effect],
    [data-button-target] {
        transition: none !important;
        animation: none !important;
    }
}

/* Image Hover Effects - Service Images Only */
.service-image {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

.service-image:hover {
    transform: translate3d(-60px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}

/* Service section specific image effects */
.service-section .service-image,
.services-section .service-image,
[class*="service"] .service-image {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

.service-section .service-image:hover,
.services-section .service-image:hover,
[class*="service"] .service-image:hover {
    transform: translate3d(-60px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}