/**
 * Bitcoin Sovereign Academy - Animated Icon Styles
 * Provides consistent styling for SVG icons across the platform
 */

/* Base icon styles */
.icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    color: var(--color-brand, #f7931a);
    transition: all 0.3s ease;
}

.icon-inline {
    margin: 0 0.25rem;
}

/* Icon color variants */
.icon-primary {
    color: var(--color-brand, #f7931a);
}

.icon-success {
    color: var(--color-success, #10b981);
}

.icon-warning {
    color: var(--color-warning, #f59e0b);
}

.icon-danger {
    color: var(--color-danger, #ef4444);
}

.icon-info {
    color: var(--color-info, #3b82f6);
}

.icon-muted {
    color: var(--color-text-muted, rgba(255, 255, 255, 0.6));
}

/* Hover effects */
.icon-hover:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}

/* Specific icon animations (matching existing platform style) */

/* Game icon - gentle bounce */
@keyframes iconGameBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-4px) rotate(5deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-2px) rotate(-5deg); }
}

.icon-game.icon-animate {
    animation: iconGameBounce 3s ease-in-out infinite;
}

/* Clock icon - tick rotation */
@keyframes iconClockTick {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.icon-clock.icon-animate {
    animation: iconClockTick 60s linear infinite;
}

/* Money icon - pulse */
@keyframes iconMoneyPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

.icon-money.icon-animate {
    animation: iconMoneyPulse 3s ease-in-out infinite;
}

/* Lock icon - subtle shake */
@keyframes iconLockShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-1px); }
    20%, 40%, 60%, 80% { transform: translateX(1px); }
}

.icon-lock.icon-animate {
    animation: iconLockShake 10s ease-in-out infinite;
}

/* Graduation icon - float */
@keyframes iconGraduationFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.icon-graduation.icon-animate {
    animation: iconGraduationFloat 3s ease-in-out infinite;
}

/* Compass icon - spin */
@keyframes iconCompassSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.icon-compass.icon-animate {
    animation: iconCompassSpin 20s linear infinite;
}

/* Target icon - pulse rings */
@keyframes iconTargetPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.icon-target.icon-animate {
    animation: iconTargetPulse 2s ease-in-out infinite;
}

/* Globe icon - rotate */
@keyframes iconGlobeRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.icon-globe.icon-animate {
    animation: iconGlobeRotate 30s linear infinite;
}

/* Lightning icon - flash */
@keyframes iconLightningFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.icon-lightning.icon-animate {
    animation: iconLightningFlash 2s ease-in-out infinite;
}

/* Brain icon - pulse */
@keyframes iconBrainPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.03); }
}

.icon-brain.icon-animate {
    animation: iconBrainPulse 4s ease-in-out infinite;
}

/* Chart icon - grow */
@keyframes iconChartGrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.icon-chart.icon-animate {
    animation: iconChartGrow 2s ease-in-out infinite;
}

/* Shield icon - glow */
@keyframes iconShieldGlow {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 currentColor); }
    50% { opacity: 0.8; filter: drop-shadow(0 0 8px currentColor); }
}

.icon-shield.icon-animate {
    animation: iconShieldGlow 3s ease-in-out infinite;
}

/* Robot icon - blink */
@keyframes iconRobotBlink {
    0%, 90%, 100% { opacity: 1; }
    95% { opacity: 0.3; }
}

.icon-robot.icon-animate {
    animation: iconRobotBlink 4s ease-in-out infinite;
}

/* Palette icon - rotate colors */
@keyframes iconPaletteRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.icon-palette.icon-animate {
    animation: iconPaletteRotate 20s linear infinite;
}

/* Sparkles icon - twinkle */
@keyframes iconSparklesTwinkle {
    0%, 100% { opacity: 0.5; transform: scale(1) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.1) rotate(10deg); }
}

.icon-sparkles.icon-animate {
    animation: iconSparklesTwinkle 2s ease-in-out infinite;
}

/* Trophy icon - bounce */
@keyframes iconTrophyBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.icon-trophy.icon-animate {
    animation: iconTrophyBounce 3s ease-in-out infinite;
}

/* Refresh icon - spin */
@keyframes iconRefreshSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.icon-refresh.icon-animate {
    animation: iconRefreshSpin 4s linear infinite;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .icon-animate,
    .icon-animate * {
        animation: none !important;
        transition: none !important;
    }
}

/* Icon sizes */
.icon-xs { width: 16px; height: 16px; }
.icon-sm { width: 20px; height: 20px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }
.icon-2xl { width: 64px; height: 64px; }

/* Context-specific adjustments */
h1 .icon { width: 1.2em; height: 1.2em; }
h2 .icon { width: 1.1em; height: 1.1em; }
h3 .icon { width: 1em; height: 1em; }
p .icon, li .icon { width: 1em; height: 1em; }

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .icon {
        filter: brightness(1.1);
    }
}