/* ============================================
   ALTERNATIVE BUTTON ANIMATIONS - MIX & MATCH
   ============================================ */

/* Alternative Animation Set 1: Cyberpunk Style */
.cyber-button {
    background: linear-gradient(45deg, #0a0a0a, #1a1a1a);
    border: 1px solid #bc493c;
    color: #bc493c !important;
    position: relative;
    overflow: hidden;
    padding: 12px 24px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.cyber-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #bc493c, transparent);
    transition: left 0.5s ease;
}

.cyber-button:hover::before {
    left: 100%;
}

.cyber-button:hover {
    background: #bc493c;
    color: #000 !important;
    text-shadow: 0 0 10px #fff;
    box-shadow: 0 0 20px #bc493c;
}

/* Alternative Animation Set 2: Bounce & Squeeze */
.bounce-button {
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    padding: 12px 24px;
    font-size: 14px;
}

.bounce-button:hover {
    animation: squeeze-bounce 0.6s ease;
}

@keyframes squeeze-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(0.85, 1.1); }
    50% { transform: scale(1.1, 0.9); }
    70% { transform: scale(0.95, 1.05); }
    100% { transform: scale(1); }
}

/* Alternative Animation Set 3: Slide & Reveal */
.slide-button {
    position: relative;
    overflow: hidden;
    padding: 12px 24px;
    font-size: 14px;
    background: #bc493c;
    color: white !important;
    transition: all 0.3s ease;
}

.slide-button::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f7d991;
    color: #bc493c !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.slide-button:hover::before {
    transform: translateY(0);
}

/* Alternative Animation Set 4: Pulse & Glow */
.pulse-button {
    padding: 12px 24px;
    font-size: 14px;
    background: linear-gradient(45deg, #bc493c, #e05747);
    animation: gentle-pulse 2s infinite;
    transition: all 0.3s ease;
}

@keyframes gentle-pulse {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(188, 73, 60, 0.5);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 20px rgba(188, 73, 60, 0.8);
        transform: scale(1.02);
    }
}

.pulse-button:hover {
    animation: intense-pulse 0.3s infinite;
}

@keyframes intense-pulse {
    0%, 100% { transform: scale(1.05); }
    50% { transform: scale(1.1); }
}

/* Alternative Animation Set 5: Flip & Twist */
.flip-button {
    padding: 12px 24px;
    font-size: 14px;
    transition: all 0.5s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.flip-button:hover {
    animation: flip-twist 0.8s ease;
}

@keyframes flip-twist {
    0% { transform: rotateY(0) rotateZ(0); }
    25% { transform: rotateY(90deg) rotateZ(5deg); }
    50% { transform: rotateY(180deg) rotateZ(0); }
    75% { transform: rotateY(270deg) rotateZ(-5deg); }
    100% { transform: rotateY(360deg) rotateZ(0); }
}

/* Alternative Animation Set 6: Jello Effect */
.jello-button {
    padding: 12px 24px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.jello-button:hover {
    animation: jello 0.8s ease;
}

@keyframes jello {
    11.1% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    22.2% { transform: skewX(6.25deg) skewY(6.25deg); }
    33.3% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    44.4% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    55.5% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    66.6% { transform: skewX(0.390625deg) skewY(0.390625deg); }
    77.7% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
    88.8% { transform: skewX(0.09765625deg) skewY(0.09765625deg); }
    100% { transform: skewX(0) skewY(0); }
}

/* Alternative Animation Set 7: Heartbeat */
.heartbeat-button {
    padding: 12px 24px;
    font-size: 14px;
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

/* Alternative Animation Set 8: Shake & Rattle */
.shake-button {
    padding: 12px 24px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.shake-button:hover {
    animation: shake-horizontal 0.6s ease;
}

@keyframes shake-horizontal {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* Alternative Animation Set 9: Rubber Band */
.rubber-button {
    padding: 12px 24px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.rubber-button:hover {
    animation: rubber-band 0.8s ease;
}

@keyframes rubber-band {
    0% { transform: scale(1); }
    30% { transform: scaleX(1.25) scaleY(0.75); }
    40% { transform: scaleX(0.75) scaleY(1.25); }
    60% { transform: scaleX(1.15) scaleY(0.85); }
    100% { transform: scale(1); }
}

/* Alternative Animation Set 10: Swing */
.swing-button {
    padding: 12px 24px;
    font-size: 14px;
    transform-origin: top center;
    transition: all 0.3s ease;
}

.swing-button:hover {
    animation: swing 0.8s ease;
}

@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* ============================================
   QUICK SWITCH UTILITY CLASSES
   ============================================ */

/* Easy class switching for download button */
.download-cyber { 
    @extend .cyber-button; 
    /* Apply cyber style to download button */
}

.download-bounce { 
    @extend .bounce-button; 
    /* Apply bounce style to download button */
}

.download-slide { 
    @extend .slide-button; 
    /* Apply slide style to download button */
}

.download-pulse { 
    @extend .pulse-button; 
    /* Apply pulse style to download button */
}

.download-flip { 
    @extend .flip-button; 
    /* Apply flip style to download button */
}

.download-jello { 
    @extend .jello-button; 
    /* Apply jello style to download button */
}

.download-heartbeat { 
    @extend .heartbeat-button; 
    /* Apply heartbeat style to download button */
}

.download-shake { 
    @extend .shake-button; 
    /* Apply shake style to download button */
}

.download-rubber { 
    @extend .rubber-button; 
    /* Apply rubber band style to download button */
}

.download-swing { 
    @extend .swing-button; 
    /* Apply swing style to download button */
}

/* ============================================
   COMBINATION EFFECTS
   ============================================ */

/* Combo: Wobble + Glow */
.combo-wobble-glow:hover {
    animation: wobble 0.8s ease-in-out, glow-pulse 0.8s ease-in-out;
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(188, 73, 60, 0.5); }
    50% { box-shadow: 0 0 25px rgba(188, 73, 60, 0.9); }
}

/* Combo: Flip + Color Change */
.combo-flip-color:hover {
    animation: flip-color-change 1s ease;
}

@keyframes flip-color-change {
    0% { 
        transform: rotateY(0); 
        background: #bc493c; 
    }
    50% { 
        transform: rotateY(180deg); 
        background: #f7d991; 
    }
    100% { 
        transform: rotateY(360deg); 
        background: #e05747; 
    }
}

/* ============================================
   MODERN MICRO-ANIMATIONS
   ============================================ */

/* Button press feedback */
.modern-press:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Button focus ring */
.modern-focus:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(188, 73, 60, 0.5);
}

/* Button loading state with dot animation */
.dot-loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: dot-bounce 1.4s infinite ease-in-out;
}

@keyframes dot-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}