/* Metameric Colors Article Specific Styles */

/* Enhanced Color Science Theme */
.scientific-gradient {
    background: linear-gradient(135deg, 
        #8b5cf6 0%, 
        #ff3e8a 25%, 
        #00a9e0 50%, 
        #57cc99 75%, 
        #ff9b42 100%
    );
}

/* Scientific badge enhancements */
.scientific-badge {
    animation: scientificPulse 3s ease-in-out infinite;
}

@keyframes scientificPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.3);
    }
    50% { 
        transform: scale(1.02);
        box-shadow: 0 0 20px 10px rgba(139, 92, 246, 0.1);
    }
}

/* Molecular background animation */
.molecular-background {
    animation: molecularFloat 8s ease-in-out infinite;
}

@keyframes molecularFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(1deg); }
    50% { transform: translateY(-10px) rotate(0deg); }
    75% { transform: translateY(-5px) rotate(-1deg); }
}

/* Enhanced color-specific demo cards */
.demo-card-experiment .experiment-visual {
    position: relative;
}

.demo-card-experiment .experiment-visual::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, 
        rgba(0, 169, 224, 0.3) 0%, 
        transparent 70%);
    border-radius: 50%;
    animation: colorShift 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes colorShift {
    0% { 
        background: radial-gradient(circle, rgba(0, 169, 224, 0.3) 0%, transparent 70%);
        transform: translate(-50%, -50%) scale(1);
    }
    33% { 
        background: radial-gradient(circle, rgba(255, 62, 138, 0.3) 0%, transparent 70%);
        transform: translate(-50%, -50%) scale(1.1);
    }
    66% { 
        background: radial-gradient(circle, rgba(255, 155, 66, 0.3) 0%, transparent 70%);
        transform: translate(-50%, -50%) scale(0.9);
    }
    100% { 
        background: radial-gradient(circle, rgba(0, 169, 224, 0.3) 0%, transparent 70%);
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Spectral analysis theme */
.demo-card-tool .tool-screen {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.15) 0%, 
        rgba(0, 169, 224, 0.15) 100%);
}

.demo-card-tool .output-display {
    font-family: 'Source Code Pro', monospace;
    color: rgba(255, 255, 255, 0.9);
    animation: dataFlicker 2s ease-in-out infinite;
}

@keyframes dataFlicker {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

/* Enhanced vision simulator styling */
.demo-card-standard[data-demo="vision-simulator"] .demo-preview {
    background: linear-gradient(135deg, 
        rgba(255, 62, 138, 0.8) 0%, 
        rgba(139, 92, 246, 0.8) 50%,
        rgba(0, 169, 224, 0.8) 100%);
}

.demo-card-standard[data-demo="vision-simulator"] .demo-icon {
    font-size: 3rem;
    animation: eyeBlink 3s ease-in-out infinite;
}

@keyframes eyeBlink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

/* Field size comparison enhancements */
.demo-card-comparison .comparison-side.before .side-content {
    animation: shrink 2s ease-in-out infinite;
}

.demo-card-comparison .comparison-side.after .side-content {
    animation: expand 2s ease-in-out infinite;
}

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

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

/* Simulation card spectral theme */
.demo-card-simulation .simulation-stats .stat-value {
    font-family: 'Source Code Pro', monospace;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

/* Color science specific callouts */
.callout-science .science-note {
    border-left-color: #8b5cf6;
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.08) 0%, 
        rgba(0, 169, 224, 0.08) 100%);
}

.callout-science .callout-icon {
    background: linear-gradient(135deg, #8b5cf6, #00a9e0);
    color: white;
}

/* Enhanced formula styling for color science */
.formula-container {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.05) 0%, 
        rgba(0, 169, 224, 0.05) 100%);
    border: 2px solid rgba(139, 92, 246, 0.2);
}

.formula {
    background: linear-gradient(90deg, #8b5cf6, #00a9e0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* Article-specific responsive enhancements */
@media (max-width: 768px) {
    .scientific-badge {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
    
    .research-info {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .complexity-indicator {
        justify-content: center;
    }
}

/* Print-specific styles for color article */
@media print {
    .demo-card-experiment::after,
    .demo-card-tool::after,
    .demo-card-simulation::after,
    .demo-card-comparison::after,
    .demo-card-standard::after {
        content: "Interactive Demo: Visit madscientistinresidence.com to experience this demonstration";
        display: block;
        text-align: center;
        padding: 1rem;
        background: #f0f0f0;
        border: 1px solid #ccc;
        font-style: italic;
        color: #666;
    }
    
    .scientific-badge,
    .complexity-indicator,
    .demo-overlay {
        display: none !important;
    }
}

/* Accessibility enhancements for color science content */
@media (prefers-reduced-motion: reduce) {
    .scientific-badge,
    .molecular-background,
    .demo-card-experiment .experiment-visual::after,
    .demo-card-standard .demo-icon {
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .scientific-gradient {
        background: linear-gradient(135deg, #000080 0%, #800080 100%);
    }
    
    .formula {
        background: none;
        background-clip: unset;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
        color: #000080;
    }
}