/* Matrix Command Center - Hardware Status & Micro-Animation Library */

@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-fan-1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-fan-2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-fan-3 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-fan-turbo {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fan-speed-1 {
    animation: spin-slow 8s linear infinite;
}

.fan-speed-2 {
    animation: spin-slow 4s linear infinite;
}

.fan-speed-3 {
    animation: spin-slow 2s linear infinite;
}

.fan-speed-turbo {
    animation: spin-slow 0.8s linear infinite;
}

/* Breathing Hardware LEDs */
@keyframes breathe-emerald {
    0%, 100% {
        box-shadow: 0 0 6px rgba(16, 185, 129, 0.4), inset 0 0 4px rgba(16, 185, 129, 0.2);
    }
    50% {
        box-shadow: 0 0 18px rgba(16, 185, 129, 0.9), inset 0 0 8px rgba(16, 185, 129, 0.4);
    }
}

@keyframes breathe-amber {
    0%, 100% {
        box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.95);
    }
}

@keyframes breathe-cyan {
    0%, 100% {
        box-shadow: 0 0 6px rgba(6, 182, 212, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(6, 182, 212, 0.9);
    }
}

.led-online {
    animation: breathe-emerald 3s ease-in-out infinite;
}

.led-printing {
    animation: breathe-amber 1.8s ease-in-out infinite;
}

.led-cyber {
    animation: breathe-cyan 2.4s ease-in-out infinite;
}

/* PM2.5 Air Quality Level Glow */
@keyframes pulse-airsight {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}

.airsight-active {
    animation: pulse-airsight 2s ease-in-out infinite;
}

/* Smooth Transition for UI meters */
.progress-meter-smooth {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease;
}

/* ==========================================================================
   High-Contrast Accessible Keyboard Focus (:focus-visible)
   Clear 2px sky/cyan focus ring with offset for keyboard navigation (WCAG 2.4.7 / WCAG 1.4.11)
   Preserves clean aesthetics for pointer/mouse users (:focus:not(:focus-visible))
   ========================================================================== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="switch"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #38bdf8 !important; /* High-contrast Sky/Cyan */
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.25) !important;
}

/* Neutralize outline when focused via pointer/mouse without keyboard intent */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[role="checkbox"]:focus:not(:focus-visible),
[role="switch"]:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Reduced Motion Support (WCAG 2.3.3 / WCAG 2.2.2)
   Completely halts motion, spinners, pulsing LEDs, and transforms when requested
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .fan-speed-1,
    .fan-speed-2,
    .fan-speed-3,
    .fan-speed-turbo,
    .led-online,
    .led-printing,
    .led-cyber,
    .airsight-active,
    .progress-meter-smooth {
        animation: none !important;
        transition: none !important;
    }
}