// Animation and transition effects

// Base transition classes - apply smooth transitions to any element
.a-transition {
    transition: all 0.2s ease;
}

.a-transition-fast {
    transition: all 0.1s ease;
}

.a-transition-slow {
    transition: all 0.4s ease;
}

.a-transition-transform {
    transition: transform 0.2s ease;
}

.a-transition-opacity {
    transition: opacity 0.2s ease;
}

.a-transition-colors {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

// Generic animation classes - can be used on any element
.a-hover-grow {
    transition: transform 0.2s ease;
    
    &:hover {
        transform: scale(1.05);
    }
}

.a-hover-shrink {
    transition: transform 0.2s ease;
    
    &:hover {
        transform: scale(0.95);
    }
}

.a-hover-rotate {
    transition: transform 0.2s ease;
    
    &:hover {
        transform: rotate(3deg);
    }
}

.a-hover-float {
    transition: transform 0.2s ease;
    
    &:hover {
        transform: translateY(-3px);
    }
}

.a-hover-fade {
    transition: opacity 0.2s ease;
    
    &:hover {
        opacity: 0.7;
    }
}

.a-hover-brighten {
    transition: filter 0.2s ease;
    
    &:hover {
        filter: brightness(1.1);
    }
}

.a-hover-blur {
    transition: filter 0.2s ease;
    
    &:hover {
        filter: blur(1px);
    }
}

// Legacy button-specific classes (for backward compatibility)
.btn-hover-grow:hover {
    transform: scale(1.05);
}

.btn-hover-shrink:hover {
    transform: scale(0.95);
}

.btn-hover-rotate:hover {
    transform: rotate(3deg);
}

.btn-hover-slide-up {
    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0;
        background-color: rgba(255, 255, 255, 0.2);
        transition: height 0.3s ease;
    }
    
    &:hover::before {
        height: 100%;
    }
}

.btn-hover-slide-right {
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        background-color: rgba(255, 255, 255, 0.2);
        transition: width 0.3s ease;
    }
    
    &:hover::before {
        width: 100%;
    }
}

.btn-hover-shine {
    &::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 20%;
        height: 200%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transform: rotate(30deg);
        transition: left 0.5s;
    }
    
    &:hover::after {
        left: 120%;
    }
}

.btn-hover-shadow:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.btn-hover-glow:hover {
    box-shadow: 0 0 20px rgba(var(--gumi-primary-rgb), 0.5);
}

// Generic click effects
.a-click-shrink:active {
    transform: scale(0.95);
}

.a-click-grow:active {
    transform: scale(1.05);
}

.a-click-pulse:active {
    animation: pulse 0.3s ease;
}

.a-click-bounce:active {
    animation: bounce-click 0.3s ease;
}

.a-click-shake:active {
    animation: shake-quick 0.3s ease;
}

// Animation keyframes
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

@keyframes bounce-click {
    0% { transform: scale(1); }
    40% { transform: scale(0.9); }
    60% { transform: scale(1.05); }
    80% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

@keyframes shake-quick {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

// Legacy button click effects (for backward compatibility)
.btn-click-ripple {
    position: relative;
    overflow: hidden;
    
    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }
    
    &:active::before {
        width: 300px;
        height: 300px;
    }
}

.btn-click-pulse:active {
    animation: pulse 0.3s ease;
}

.btn-click-bounce:active {
    animation: bounce-click 0.3s ease;
}

// 3D button effect
.btn-3d {
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.2);
    transform: translateY(0);
    transition: all 0.1s ease;
    
    &:active {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
        transform: translateY(4px);
    }
}

// Gradient hover effect
.btn-gradient {
    background: linear-gradient(135deg, var(--gumi-primary), var(--gumi-secondary));
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
    
    &:hover {
        animation-duration: 1s;
    }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

// Neon effect
.btn-neon {
    color: var(--gumi-primary);
    border: 2px solid var(--gumi-primary);
    background: transparent;
    text-shadow: 0 0 10px currentColor;
    box-shadow: inset 0 0 10px 0 currentColor, 0 0 10px 0 currentColor;
    
    &:hover {
        background: var(--gumi-primary);
        color: white;
        text-shadow: none;
        box-shadow: inset 0 0 20px 0 rgba(255,255,255,0.5), 0 0 20px 0 var(--gumi-primary);
    }
}

// Morph effect
.btn-morph {
    border-radius: var(--gumi-radius-base);
    transition: all 0.3s ease;
    
    &:hover {
        border-radius: var(--gumi-radius-full);
    }
}

// Jello effect on hover
.btn-jello:hover {
    animation: jello 0.8s;
}

@keyframes jello {
    0%, 100% { transform: scale(1, 1); }
    30% { transform: scale(1.25, 0.75); }
    40% { transform: scale(0.75, 1.25); }
    50% { transform: scale(1.15, 0.85); }
    65% { transform: scale(0.95, 1.05); }
    75% { transform: scale(1.05, 0.95); }
}

// Wobble effect
.btn-wobble:hover {
    animation: wobble 0.8s;
}

@keyframes wobble {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-10px) rotate(-5deg); }
    30% { transform: translateX(10px) rotate(3deg); }
    45% { transform: translateX(-5px) rotate(-3deg); }
    60% { transform: translateX(5px) rotate(2deg); }
    75% { transform: translateX(-2px) rotate(-1deg); }
}

// Loading button variants
.btn-loading-dots {
    &[data-loading="true"] {
        .loading-dots {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

.btn-loading-progress {
    &[data-loading="true"] {
        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: rgba(255, 255, 255, 0.8);
            animation: loading-progress 2s ease-in-out infinite;
        }
    }
}

@keyframes loading-progress {
    0% { width: 0; left: 0; }
    50% { width: 100%; left: 0; }
    100% { width: 0; left: 100%; }
}