/* Base Variables */
.creta-button-wrapper {
    --cb-anim-duration: 0.3s;
    --cb-anim-ease: ease;
    --cb-transform-dist: 5px;
    --cb-scale-amt: 1.05;
    --cb-rotate-amt: 5deg;
    --cb-glow-color: rgba(36, 108, 180, 0.6);
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    font-weight: bold;
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform var(--cb-anim-duration) var(--cb-anim-ease), box-shadow var(--cb-anim-duration) var(--cb-anim-ease);
    box-sizing: border-box; /* Ensure padding does not bleed out */
}

.creta-button-wrapper:focus-visible {
    outline: 2px solid var(--e-global-color-accent, #000);
    outline-offset: 4px;
}

/* Shape & Background */
.creta-button-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #246cb4; /* Default fallback */
    transition: all var(--cb-anim-duration) var(--cb-anim-ease);
    overflow: hidden;
    pointer-events: none; /* Let wrapper handle clicks */
    box-sizing: border-box;
}

/* Hover Background Layer */
.creta-button-shape::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--cb-anim-duration) var(--cb-anim-ease);
    z-index: -1;
}

.creta-button-wrapper:hover .creta-button-shape::before {
    opacity: 1;
}

/* Content Wrapper */
.creta-button-content-wrapper {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none; /* Let the wrapper handle interactions */
}

/* Content Elements */
.creta-button-content,
.creta-button-icon {
    transition: color var(--cb-anim-duration) var(--cb-anim-ease), fill var(--cb-anim-duration) var(--cb-anim-ease);
}

.creta-button-icon svg {
    transition: fill var(--cb-anim-duration) var(--cb-anim-ease);
    height: 1em;
    width: 1em;
}

/* =========================================
   HOVER ANIMATIONS
   ========================================= */

@media (hover: hover) and (pointer: fine) {
    /* Scale */
    .creta-hover-scale-up .creta-button-wrapper:hover { transform: scale(var(--cb-scale-amt)); }
    .creta-hover-scale-down .creta-button-wrapper:hover { transform: scale(calc(2 - var(--cb-scale-amt))); }
    
    /* Lift */
    .creta-hover-lift-up .creta-button-wrapper:hover { transform: translateY(calc(var(--cb-transform-dist) * -1)); }
    .creta-hover-lift-down .creta-button-wrapper:hover { transform: translateY(var(--cb-transform-dist)); }
    
    /* Slide */
    .creta-hover-slide-up .creta-button-wrapper:hover { transform: translateY(calc(var(--cb-transform-dist) * -1)); }
    .creta-hover-slide-down .creta-button-wrapper:hover { transform: translateY(var(--cb-transform-dist)); }
    .creta-hover-slide-left .creta-button-wrapper:hover { transform: translateX(calc(var(--cb-transform-dist) * -1)); }
    .creta-hover-slide-right .creta-button-wrapper:hover { transform: translateX(var(--cb-transform-dist)); }
    
    /* Rotate */
    .creta-hover-rotate .creta-button-wrapper:hover { transform: rotate(var(--cb-rotate-amt)); }
    .creta-hover-rotate-reverse .creta-button-wrapper:hover { transform: rotate(calc(var(--cb-rotate-amt) * -1)); }
    
    /* Complex Animations (Keyframes) */
    .creta-hover-pulse .creta-button-wrapper:hover { animation: cb-pulse 1s infinite alternate; }
    .creta-hover-bounce .creta-button-wrapper:hover { animation: cb-bounce 0.5s ease; }
    .creta-hover-shake .creta-button-wrapper:hover { animation: cb-shake 0.82s cubic-bezier(.36,.07,.19,.97) both; }
    .creta-hover-swing .creta-button-wrapper:hover { animation: cb-swing 1s ease; transform-origin: top center; }
    .creta-hover-wobble .creta-button-wrapper:hover { animation: cb-wobble 1s ease; }
    
    /* Glow & Shadows (Applied to wrapper or an outer pseudo-element to not break clip-path) */
    .creta-hover-glow .creta-button-wrapper:hover .creta-button-shape { 
        filter: drop-shadow(0 0 10px var(--cb-glow-color)); 
    }
    
    .creta-hover-shadow-expand .creta-button-wrapper:hover .creta-button-shape {
        filter: drop-shadow(0 10px 20px var(--cb-glow-color));
        transform: translateY(-2px);
    }
    
    .creta-hover-shadow-glow .creta-button-wrapper:hover .creta-button-shape {
         filter: drop-shadow(0 5px 15px var(--cb-glow-color));
    }
    
    .creta-hover-neon-glow .creta-button-wrapper:hover .creta-button-shape {
        filter: drop-shadow(0 0 5px var(--cb-glow-color)) drop-shadow(0 0 15px var(--cb-glow-color)) drop-shadow(0 0 30px var(--cb-glow-color));
    }

    /* Sweep Shine Effect */
    .creta-sweep-yes .creta-button-shape::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-25deg);
        z-index: 1;
        transition: left 0s; /* Reset instantly */
    }
    
    .creta-sweep-yes.creta-button-wrapper:hover .creta-button-shape::after {
        left: 200%;
        transition: left 0.7s ease-in-out;
    }

    /* 3D Tilt Effect */
    .creta-3d-tilt-yes.creta-button-wrapper:hover {
        transform: rotateX(10deg) rotateY(10deg);
        box-shadow: -5px 10px 15px rgba(0,0,0,0.2);
    }
}

/* =========================================
   MOBILE/TOUCH HANDLING
   ========================================= */
@media (hover: none), (pointer: coarse) {
    .creta-no-hover-touch-yes .creta-button-wrapper:hover,
    .creta-no-hover-touch-yes .creta-button-wrapper:active {
        transform: none !important;
        animation: none !important;
        filter: none !important;
    }
    
    .creta-no-hover-touch-yes .creta-button-wrapper:hover .creta-button-shape::after {
        display: none !important;
    }
}

/* =========================================
   ACCESSIBILITY: PREFERS REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .creta-button-wrapper,
    .creta-button-wrapper:hover,
    .creta-button-shape,
    .creta-button-shape::after,
    .creta-button-content,
    .creta-button-icon {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================
   KEYFRAMES
   ========================================= */
@keyframes cb-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(var(--cb-scale-amt)); }
}

@keyframes cb-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(calc(var(--cb-transform-dist) * -2)); }
    60% { transform: translateY(calc(var(--cb-transform-dist) * -1)); }
}

@keyframes cb-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

@keyframes cb-swing {
    20% { transform: rotate3d(0, 0, 1, 15deg); }
    40% { transform: rotate3d(0, 0, 1, -10deg); }
    60% { transform: rotate3d(0, 0, 1, 5deg); }
    80% { transform: rotate3d(0, 0, 1, -5deg); }
    to { transform: rotate3d(0, 0, 1, 0deg); }
}

@keyframes cb-wobble {
    from { transform: none; }
    15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
    30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
    45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
    60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
    75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
    to { transform: none; }
}