/**
 * Utilization & Calculation Effects Module
 */

.utilization-display { text-align: center; padding: 2rem; border-radius: var(--radius-lg); margin: 1rem 0; font-size: 2.5rem; font-weight: 700; font-family: var(--font-family-mono); position: relative; overflow: hidden; }
.utilization-display::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); animation: shimmer 2s infinite; }
@keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } }
.utilization-safe { background: linear-gradient(135deg, var(--success), #059669); color: white; }
.utilization-warning { background: linear-gradient(135deg, var(--warning), #d97706); color: white; }
.utilization-danger { background: linear-gradient(135deg, var(--error), #dc2626); color: white; }

.utilization-calculating { position: relative; overflow: hidden; filter: blur(1px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: rgba(255, 255, 255, 0.9) !important; }
.utilization-calculating::before { content: ''; position: absolute; top: -50%; left: -200%; width: 400%; height: 200%; background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.8) 45deg, rgba(59, 130, 246, 0.6) 90deg, rgba(139, 92, 246, 0.8) 135deg, rgba(236, 72, 153, 0.6) 180deg, rgba(245, 158, 11, 0.8) 225deg, rgba(34, 197, 94, 0.6) 270deg, rgba(239, 68, 68, 0.8) 315deg, transparent 360deg); animation: modernSweep 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; filter: blur(8px); opacity: 0.7; z-index: 1; }
.utilization-calculating::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 100%); animation: lightSweep 1.8s ease-in-out infinite; z-index: 2; }
@keyframes modernSweep { 0% { transform: rotate(0deg) scale(0.8); opacity: 0.3; } 50% { transform: rotate(180deg) scale(1.2); opacity: 0.8; } 100% { transform: rotate(360deg) scale(0.8); opacity: 0.3; } }
@keyframes lightSweep { 0% { left: -100%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.utilization-blurring { filter: blur(8px) brightness(1.3); transform: scale(1.02); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.utilization-revealing { filter: blur(0px) brightness(1); transform: scale(1); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

.results-panel.calculating { box-shadow: 0 0 30px rgba(59, 130, 246, 0.3), 0 0 60px rgba(139, 92, 246, 0.2), 0 0 90px rgba(236, 72, 153, 0.1); animation: containerGlow 3s ease-in-out infinite alternate; }
@keyframes containerGlow { 0% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.3), 0 0 60px rgba(139, 92, 246, 0.2), 0 0 90px rgba(236, 72, 153, 0.1); } 100% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.4), 0 0 80px rgba(236, 72, 153, 0.3), 0 0 120px rgba(59, 130, 246, 0.2); } }
.calculation-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 3; }
.calculation-particles::before, .calculation-particles::after { content: ''; position: absolute; width: 4px; height: 4px; background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%); border-radius: 50%; animation: floatingParticles 4s linear infinite; }
.calculation-particles::before { top: 20%; left: 10%; animation-delay: 0s; }
.calculation-particles::after { top: 60%; right: 15%; animation-delay: 2s; }
@keyframes floatingParticles { 0% { opacity: 0; transform: translateY(0px) scale(0); } 20% { opacity: 1; transform: translateY(-10px) scale(1); } 80% { opacity: 1; transform: translateY(-20px) scale(1); } 100% { opacity: 0; transform: translateY(-30px) scale(0); } }