/* Performance Boost - Hardware Acceleration & Optimization */

/* Force hardware acceleration for all animated elements */
.protein-particle {
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

.protein-particle.erupt {
    transform: translateZ(0);
    will-change: transform, opacity, filter;
}

.protein-particle.settled {
    will-change: auto; /* Release GPU memory after settlement */
}

/* Optimize box-shadows - use simpler shadows */
.protein-particle.downregulated {
    background: radial-gradient(circle, 
        rgba(210, 230, 255, 0.8), 
        rgba(200, 220, 255, 0.4));
    /* Simplified shadow for better performance */
    box-shadow: 0 0 4px rgba(210, 230, 255, 0.5);
}

.protein-particle.upregulated {
    background: radial-gradient(circle, 
        rgba(255, 210, 220, 0.8), 
        rgba(255, 200, 210, 0.4));
    /* Simplified shadow */
    box-shadow: 0 0 4px rgba(255, 210, 220, 0.5);
}

.protein-particle.nonsignificant {
    background: rgba(255, 255, 255, 0.3);
    /* Remove shadow for non-significant particles */
    box-shadow: none;
}

/* Optimize meteor animation */
.meteor {
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Optimize impact waves */
.impact-wave {
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Reduce blur effects on mobile */
@media (max-width: 768px) {
    .protein-particle {
        filter: none !important; /* Remove blur on mobile */
    }
    
    .protein-particle.settled {
        animation: simpleTwinkle 4s ease-in-out infinite;
    }
}

/* Simpler twinkle animation for mobile */
@keyframes simpleTwinkle {
    0%, 100% { 
        opacity: var(--final-opacity);
    }
    50% { 
        opacity: calc(var(--final-opacity) * 1.5);
    }
}

/* Optimize scroll animations with containment */
.animated-section {
    contain: layout style paint;
}

/* Optimize cosmic dust particles */
.cosmic-dust {
    transform: translateZ(0);
    will-change: auto; /* Only when animating */
    contain: layout style paint;
}

/* Batch GPU layers for better performance */
.hero-section {
    transform: translateZ(0);
    isolation: isolate; /* Create new stacking context */
}

/* Reduce animation complexity on low-end devices */
@media (prefers-reduced-motion: reduce) {
    .protein-particle,
    .meteor,
    .impact-wave,
    .cosmic-dust {
        animation: none !important;
        transition: none !important;
    }
}