.icon-image {
        cursor: pointer;
    }
    
    /* Image animations */
    .fade-animation {
        animation: enhancedFade 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    
    .flip-animation {
        animation: enhancedFlip 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
        transform-origin: center;
    }
    
    .slide-animation {
        animation: enhancedSlide 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    
    /* Refresh button animation */
    .refresh-spin {
        animation: spinRefresh 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Keyframes */
    @keyframes fadeInOut {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
    }
    
    @keyframes flipPage {
        0% { transform: rotateY(0); }
        50% { transform: rotateY(90deg); opacity: 0.5; }
        100% { transform: rotateY(0); opacity: 1; }
    }
    
    @keyframes slideSwap {
        0% { transform: translateX(0); opacity: 1; }
        49% { transform: translateX(-100%); opacity: 0; }
        51% { transform: translateX(100%); opacity: 0; }
        100% { transform: translateX(0); opacity: 1; }
    }
    
    @keyframes spinRefresh {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

     @keyframes enhancedFade {
        0% { 
            opacity: 1;
            filter: blur(0px);
        }
        40% { 
            opacity: 0;
            filter: blur(4px);
        }
        41% {
            opacity: 0;
            filter: blur(4px);
        }
        100% { 
            opacity: 1;
            filter: blur(0px);
        }
    }
    
    @keyframes enhancedFlip {
        0% { 
            transform: rotateY(0deg);
            opacity: 1;
        }
        49% { 
            transform: rotateY(90deg);
            opacity: 0;
        }
        51% {
            transform: rotateY(-90deg);
            opacity: 0;
        }
        100% { 
            transform: rotateY(0deg);
            opacity: 1;
        }
    }
    
    @keyframes enhancedSlide {
        0% { 
            transform: translateX(0) scale(1);
            opacity: 1;
        }
        45% { 
            transform: translateX(-100%) scale(0.95);
            opacity: 0;
        }
        46% {
            transform: translateX(100%) scale(0.95);
            opacity: 0;
        }
        100% { 
            transform: translateX(0) scale(1);
            opacity: 1;
        }
    }