/**
 * Icon Animations
 * Subtle hover effects and animations for Font Awesome icons
 */

/* ========================================
 * BASE ICON STYLES
 * ======================================== */

/* All icons get smooth transitions */
.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* ========================================
 * BUTTON ICON ANIMATIONS
 * ======================================== */

/* Icons in buttons get hover lift effect */
.button i,
.btn i,
button i,
.glass-button i {
    transition: transform 0.2s ease;
}

.button:hover i,
.btn:hover i,
button:hover i,
.glass-button:hover i {
    transform: scale(1.1);
}

.button:active i,
.btn:active i,
button:active i,
.glass-button:active i {
    transform: scale(0.95);
}

/* ========================================
 * SPECIFIC ICON ANIMATIONS
 * ======================================== */

/* Save icon - pulse on hover */
.fa-save:hover,
.fa-floppy-disk:hover {
    animation: pulse 0.5s ease;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Refresh/Sync icons - rotate on hover */
.fa-sync-alt:hover,
.fa-sync:hover,
.fa-refresh:hover,
.fa-rotate:hover,
.fa-arrows-rotate:hover {
    animation: spin-once 0.5s ease;
}

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

/* Spinner - continuous rotation */
.fa-spinner.fa-spin {
    animation: spin 1s linear infinite;
}

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

/* Plus icon - rotate on hover */
.fa-plus:hover {
    transform: rotate(90deg);
}

/* Trash icon - shake on hover */
.fa-trash:hover,
.fa-trash-alt:hover,
.fa-trash-can:hover {
    animation: shake 0.3s ease;
}

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

/* Edit icon - wiggle on hover */
.fa-edit:hover,
.fa-pen:hover,
.fa-pencil:hover,
.fa-pen-to-square:hover {
    animation: wiggle 0.3s ease;
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

/* Download icon - bounce down on hover */
.fa-download:hover {
    animation: bounce-down 0.4s ease;
}

@keyframes bounce-down {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

/* Upload icon - bounce up on hover */
.fa-upload:hover {
    animation: bounce-up 0.4s ease;
}

@keyframes bounce-up {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Settings/Cog icon - rotate on hover */
.fa-cog:hover,
.fa-gear:hover,
.fa-gears:hover {
    animation: spin-slow 0.8s ease;
}

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

/* Bell icon - ring animation */
.fa-bell:hover {
    animation: ring 0.5s ease;
    transform-origin: top center;
}

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

/* Heart icon - heartbeat on hover */
.fa-heart:hover {
    animation: heartbeat 0.6s ease;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.2); }
}

/* Magic wand - sparkle effect */
.fa-magic:hover,
.fa-wand-magic:hover,
.fa-wand-magic-sparkles:hover {
    animation: sparkle 0.5s ease;
}

@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-10deg); }
    50% { transform: scale(1.2) rotate(0deg); }
    75% { transform: scale(1.1) rotate(10deg); }
}

/* Check/Success icons - pop effect */
.fa-check:hover,
.fa-check-circle:hover,
.fa-circle-check:hover {
    animation: pop 0.3s ease;
}

@keyframes pop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Search/Magnifying glass - zoom effect */
.fa-search:hover,
.fa-magnifying-glass:hover {
    animation: zoom 0.3s ease;
}

@keyframes zoom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Microphone - pulse effect */
.fa-microphone:hover {
    animation: mic-pulse 0.4s ease;
}

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

/* Play/Pause icons */
.fa-play:hover {
    transform: scale(1.15);
}

.fa-pause:hover {
    transform: scale(1.1);
}

/* Folder icons - open effect */
.fa-folder:hover,
.fa-folder-open:hover {
    animation: folder-open 0.3s ease;
}

@keyframes folder-open {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1) translateY(-2px); }
}

/* Copy icon - slide effect */
.fa-copy:hover,
.fa-clone:hover {
    animation: copy-slide 0.3s ease;
}

@keyframes copy-slide {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2px, 2px); }
}

/* External link - fly out effect */
.fa-external-link-alt:hover,
.fa-external-link:hover,
.fa-arrow-up-right-from-square:hover {
    animation: fly-out 0.3s ease;
}

@keyframes fly-out {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2px, -2px); }
}

/* Undo/Redo icons - rotate back */
.fa-undo:hover,
.fa-rotate-left:hover {
    animation: rotate-back 0.4s ease;
}

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

.fa-redo:hover,
.fa-rotate-right:hover {
    animation: rotate-forward 0.4s ease;
}

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

/* ========================================
 * NAV LINK ICON ANIMATIONS
 * ======================================== */

.nav-link i {
    transition: transform 0.2s ease, color 0.2s ease;
}

.nav-link:hover i {
    transform: scale(1.15);
}

.nav-link.active i {
    animation: active-pulse 2s ease infinite;
}

@keyframes active-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ========================================
 * THEME TOGGLE ANIMATION
 * ======================================== */

.theme-toggle .theme-icon-light,
.theme-toggle .theme-icon-dark {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease;
}

/* ========================================
 * LOADING STATES
 * ======================================== */

/* Pulsing loading indicator */
.icon-loading {
    animation: icon-pulse 1.5s ease infinite;
}

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

/* ========================================
 * REDUCED MOTION SUPPORT
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
    .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
    .button i, .btn i, button i, .glass-button i,
    .nav-link i, .theme-toggle i {
        animation: none !important;
        transition: none !important;
    }

    .fa-spinner.fa-spin {
        animation: spin 2s linear infinite !important;
    }
}