/* =============================================================================
   NEUMORPHIC DESIGN SYSTEM - ANIMATIONS & TRANSITIONS
   Smooth transitions and keyframe animations
   ============================================================================= */

/* ===== SMOOTH TRANSITIONS ===== */

.neo-transition {
    transition: all 0.3s ease;
}

.neo-transition-fast {
    transition: all 0.2s ease;
}

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

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

/* Lift on hover */
@keyframes neo-lift {
    0% {
        transform: translateY(0);
        box-shadow: var(--shadow-flat-sm);
    }
    100% {
        transform: translateY(-2px);
        box-shadow: var(--shadow-hover-sm);
    }
}

/* Press animation */
@keyframes neo-press {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* Scale up slightly */
@keyframes neo-scale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}

/* ===== FADE ANIMATIONS ===== */

@keyframes neo-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes neo-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes neo-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== SLIDE ANIMATIONS ===== */

@keyframes neo-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes neo-slide-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes neo-slide-left {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes neo-slide-right {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== UTILITY ANIMATION CLASSES ===== */

.animate-fade-in {
    animation: neo-fade-in 0.3s ease;
}

.animate-fade-out {
    animation: neo-fade-out 0.3s ease;
}

.animate-fade-in-up {
    animation: neo-fade-in-up 0.3s ease;
}

.animate-slide-down {
    animation: neo-slide-down 0.3s ease;
}

.animate-slide-up {
    animation: neo-slide-up 0.3s ease;
}

.animate-slide-left {
    animation: neo-slide-left 0.3s ease;
}

.animate-slide-right {
    animation: neo-slide-right 0.3s ease;
}

.animate-press {
    animation: neo-press 0.2s ease;
}

.animate-scale {
    animation: neo-scale 0.3s ease;
}

/* ===== LOADING ANIMATIONS ===== */

@keyframes neo-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.95);
    }
}

@keyframes neo-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-pulse {
    animation: neo-pulse 2s ease-in-out infinite;
}

.animate-spin {
    animation: neo-spin 1s linear infinite;
}

/* ===== NEUMORPHIC BUTTON CLICK ANIMATION ===== */

/* Active state for all buttons */
.neo-btn:active,
.neo-btn-primary:active,
.neo-btn-tool:active {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* ===== SMOOTH HEIGHT TRANSITIONS ===== */

.neo-expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.neo-expand.open {
    max-height: 1000px; /* Adjust based on content */
}

/* ===== TRANSFORM TRANSITIONS ===== */

.transform-gpu {
    transform: translateZ(0);
    will-change: transform;
}

/* Optimize for animations */
.will-change-transform {
    will-change: transform;
}

.will-change-shadow {
    will-change: box-shadow;
}

/* ===== MODAL/OVERLAY ANIMATIONS ===== */

@keyframes neo-modal-appear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes neo-overlay-appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-modal {
    animation: neo-modal-appear 0.3s ease;
}

.animate-overlay {
    animation: neo-overlay-appear 0.2s ease;
}

/* ===== TOAST/NOTIFICATION ANIMATIONS ===== */

@keyframes neo-toast-in {
    from {
        opacity: 0;
        transform: translateY(-100%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes neo-toast-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-100%) scale(0.8);
    }
}

.animate-toast-in {
    animation: neo-toast-in 0.3s ease;
}

.animate-toast-out {
    animation: neo-toast-out 0.2s ease;
}

/* ===== SHIMMER/LOADING EFFECT ===== */

@keyframes neo-shimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0;
    }
}

.neo-skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-dark) 0px,
        var(--color-bg-light) 40px,
        var(--color-bg-dark) 80px
    );
    background-size: 468px 100%;
    animation: neo-shimmer 1.5s ease-in-out infinite;
}

/* ===== RIPPLE EFFECT ===== */

@keyframes neo-ripple {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

.neo-ripple {
    position: relative;
    overflow: hidden;
}

.neo-ripple::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    pointer-events: none;
    transform: scale(0);
}

.neo-ripple:active::after {
    animation: neo-ripple 0.6s ease-out;
}