/**
 * Advanced Animations CSS - Sophisticated Engineering Dashboard Effects
 * Extracted from original index-old.html for professional visual feedback
 */

/* Performance optimization */
@media (prefers-reduced-motion: no-preference) {
  
/* Calculation Animation System */
.calculation-animation-active {
    position: relative;
    overflow: hidden;
}

.calculation-animation-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(37, 99, 235, 0.3) 45deg,
        rgba(37, 99, 235, 0.8) 90deg,
        rgba(37, 99, 235, 1) 135deg,
        rgba(37, 99, 235, 0.8) 180deg,
        rgba(37, 99, 235, 0.3) 225deg,
        transparent 270deg,
        transparent 360deg
    );
    animation: modernSweep 2s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

@keyframes modernSweep {
    0% {
        left: -100%;
        opacity: 0;
    }
    20% {
        left: -50%;
        opacity: 0.5;
    }
    50% {
        left: 0%;
        opacity: 1;
    }
    80% {
        left: 50%;
        opacity: 0.5;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* Particle Effects */
.calculation-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    z-index: 2;
}

.calculation-particles::before,
.calculation-particles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(37, 99, 235, 0.8);
    border-radius: 50%;
    animation: floatingParticles 3s ease-in-out infinite;
    box-shadow: 
        0 0 8px rgba(37, 99, 235, 0.6),
        0 0 16px rgba(37, 99, 235, 0.3);
}

.calculation-particles::before {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
    animation-duration: 2.5s;
}

.calculation-particles::after {
    top: 60%;
    right: 25%;
    animation-delay: 1.2s;
    animation-duration: 3.2s;
}

@keyframes floatingParticles {
    0%, 100% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    10% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    25% {
        transform: translate(20px, -10px) scale(1.2);
        opacity: 0.8;
    }
    50% {
        transform: translate(-15px, -25px) scale(0.9);
        opacity: 0.6;
    }
    75% {
        transform: translate(10px, -35px) scale(1.1);
        opacity: 0.4;
    }
    90% {
        transform: translate(0, -40px) scale(0.8);
        opacity: 0.2;
    }
}

/* Container Glow Effects */
.results-calculating {
    box-shadow: 
        0 0 0 1px rgba(37, 99, 235, 0.3),
        0 0 20px rgba(37, 99, 235, 0.2),
        0 10px 30px rgba(37, 99, 235, 0.1);
    animation: calculatingGlow 2s ease-in-out infinite alternate;
}

@keyframes calculatingGlow {
    0% {
        box-shadow: 
            0 0 0 1px rgba(37, 99, 235, 0.3),
            0 0 20px rgba(37, 99, 235, 0.2),
            0 10px 30px rgba(37, 99, 235, 0.1);
    }
    100% {
        box-shadow: 
            0 0 0 2px rgba(37, 99, 235, 0.5),
            0 0 40px rgba(37, 99, 235, 0.3),
            0 15px 50px rgba(37, 99, 235, 0.15);
    }
}

/* Light Pulse System */
.light-pulse {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    animation: lightPulse 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.light-pulse.success {
    background: radial-gradient(
        circle,
        rgba(16, 185, 129, 0.4) 0%,
        rgba(16, 185, 129, 0.2) 40%,
        transparent 70%
    );
}

.light-pulse.warning {
    background: radial-gradient(
        circle,
        rgba(245, 158, 11, 0.4) 0%,
        rgba(245, 158, 11, 0.2) 40%,
        transparent 70%
    );
}

.light-pulse.error {
    background: radial-gradient(
        circle,
        rgba(239, 68, 68, 0.4) 0%,
        rgba(239, 68, 68, 0.2) 40%,
        transparent 70%
    );
}

@keyframes lightPulse {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}

/* Blur Transition Effects */
.blur-transition {
    transition: filter 0.3s ease-out;
}

.blur-transition.blurred {
    filter: blur(2px);
    opacity: 0.7;
}

.blur-transition.calculating {
    filter: blur(1px);
    opacity: 0.8;
    animation: calculatingBlur 1.5s ease-in-out infinite;
}

@keyframes calculatingBlur {
    0%, 100% {
        filter: blur(1px);
        opacity: 0.8;
    }
    50% {
        filter: blur(0.5px);
        opacity: 0.9;
    }
}

/* Mathematical Formula Loading States */
.math-loading {
    position: relative;
    background: linear-gradient(
        90deg,
        var(--surface-2) 0%,
        var(--surface-3) 50%,
        var(--surface-2) 100%
    );
    background-size: 200% 100%;
    animation: mathShimmer 2s ease-in-out infinite;
    border-radius: var(--radius-md);
    min-height: 1.5rem;
}

@keyframes mathShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.math-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    position: relative;
}

.math-error::before {
    content: '⚠';
    color: var(--error);
    font-size: 1.2em;
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Success Animation States */
.calculation-success {
    animation: successPulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes successPulse {
    0% {
        transform: scale(1);
        box-shadow: var(--shadow-md);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 
            0 0 0 4px rgba(16, 185, 129, 0.2),
            var(--shadow-lg);
    }
    100% {
        transform: scale(1);
        box-shadow: var(--shadow-md);
    }
}

/* Input Field Animation States */
.input-calculating {
    position: relative;
    overflow: hidden;
}

.input-calculating::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(37, 99, 235, 0.1) 20%,
        rgba(37, 99, 235, 0.2) 50%,
        rgba(37, 99, 235, 0.1) 80%,
        transparent 100%
    );
    animation: inputSweep 1.5s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}

@keyframes inputSweep {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Chart Loading Animation */
.chart-loading {
    position: relative;
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.chart-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(37, 99, 235, 0.1) 50%,
        transparent 70%
    );
    background-size: 200% 200%;
    animation: chartShimmer 2s ease-in-out infinite;
}

@keyframes chartShimmer {
    0% {
        background-position: -200% -200%;
    }
    100% {
        background-position: 200% 200%;
    }
}

/* Button Press Effects */
.btn-pressed {
    animation: buttonPress 0.15s ease-out;
}

@keyframes buttonPress {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

/* Ripple Effect */
.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Value Change Animations */
.value-changing {
    animation: valueChange 0.8s ease-out;
}

@keyframes valueChange {
    0% {
        background: rgba(37, 99, 235, 0.2);
        transform: scale(1);
    }
    50% {
        background: rgba(37, 99, 235, 0.3);
        transform: scale(1.05);
    }
    100% {
        background: transparent;
        transform: scale(1);
    }
}

/* Performance Optimizations */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

.will-change-filter {
    will-change: filter;
}

/* Error State Animations */
.calculation-error {
    animation: errorShake 0.5s ease-in-out;
}

@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

} /* End of prefers-reduced-motion: no-preference */

/* Fallback animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .calculation-animation-active::before,
    .calculation-particles::before,
    .calculation-particles::after,
    .light-pulse,
    .blur-transition.calculating {
        animation: none;
    }
    
    .results-calculating {
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5);
    }
    
    .math-loading {
        background: var(--surface-3);
    }
    
    .input-calculating::after {
        display: none;
    }
}