/*
 * Custom Animated Icons
 * Replacement for lord-icon library to eliminate 'unsafe-eval' CSP requirement
 * Uses Material Design Icons with CSS animations
 */

/* Base animated icon container */
.animated-icon {
    display: inline-block;
    font-size: 130px;
    line-height: 1;
    vertical-align: middle;
}

.animated-icon i {
    display: block;
}

/* Pulse animation for warning/alert icons */
@keyframes icon-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.animated-icon.pulse i {
    animation: icon-pulse 2s ease-in-out infinite;
}

/* Bounce animation for success icons */
@keyframes icon-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.animated-icon.bounce i {
    animation: icon-bounce 2s ease-in-out infinite;
}

/* Shake animation for error icons */
@keyframes icon-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.animated-icon.shake i {
    animation: icon-shake 0.5s ease-in-out;
    animation-iteration-count: 1;
}

/* Continuous rotation for loading states */
@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animated-icon.spin i {
    animation: icon-spin 2s linear infinite;
}

/* Color schemes matching lord-icon originals */
.animated-icon.warning i {
    color: #a6a6a6;
}

.animated-icon.danger i {
    color: #f06548;
}

.animated-icon.success i {
    color: #0ab39c;
}

.animated-icon.info i {
    color: #299cdb;
}

/* Hover effect for interactive icons */
.animated-icon.interactive {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.animated-icon.interactive:hover {
    transform: scale(1.1);
}

/* Loop trigger - always animating */
.animated-icon[data-trigger="loop"] i {
    animation-iteration-count: infinite !important;
}

/* Hover trigger - animate on hover only */
.animated-icon[data-trigger="hover"]:not(:hover) i {
    animation: none;
}