/* ========================================
   Performance Optimized Styles
   Add this after styles.css to override heavy effects
   ======================================== */

/* Disable heavy background effects on mobile and tablets */
@media (max-width: 1024px) {
    /* Remove these effects entirely on mobile */
    .holographic-stars,
    .geometric-shapes,
    .floating-elements {
        display: none !important;
    }
    
    /* Simplify aurora - keep only one layer with reduced opacity */
    .aurora-container {
        opacity: 0.2;
    }
    
    .aurora:nth-child(2),
    .aurora:nth-child(3) {
        display: none;
    }
    
    .aurora {
        animation: none;
        filter: blur(100px);
        opacity: 0.5;
    }
    
    /* Reduce all backdrop filters for better performance */
    .hero,
    .section,
    .contact,
    .feature-card,
    .project-card {
        backdrop-filter: blur(5px) !important;
    }
    
    /* Disable complex animations */
    .hero {
        animation: none !important;
    }
    
    .hero::before,
    .hero::after {
        display: none;
    }
    
    /* Simplify text effects */
    .hero h1 {
        animation: none !important;
        transform: none !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    }
    
    .hero h1::before {
        display: none;
    }
    
    /* Simplify hover effects - no 3D transforms */
    .section:hover {
        transform: translateY(-5px) !important;
    }
    
    .cta-button:hover {
        transform: translateY(-2px) !important;
    }
    
    .contact-link:hover {
        transform: translateY(-2px) !important;
    }
    
    /* Remove animated pseudo elements */
    .section::after,
    .cta-button::before,
    .cta-button::after,
    .contact-link::before,
    .contact-link::after {
        display: none;
    }
    
    /* Disable pulse and breathing animations */
    .hero .subtitle {
        animation: none !important;
    }
    
    /* Simplify loading overlay */
    .loading-overlay {
        animation: fadeOut 0.5s ease-out forwards !important;
    }
}

/* Further optimizations for low-end mobile devices */
@media (max-width: 480px) {
    /* Remove aurora completely on small screens */
    .aurora-container {
        display: none;
    }
    
    /* Use solid backgrounds instead of gradients */
    .hero {
        background: rgba(20, 20, 40, 0.95) !important;
    }
    
    .section {
        background: rgba(25, 25, 45, 0.95) !important;
    }
    
    .contact {
        background: rgba(20, 20, 40, 0.95) !important;
    }
    
    /* Disable all gradient text effects */
    .hero h1,
    .section h2,
    .contact h2 {
        background: none !important;
        -webkit-text-fill-color: white !important;
        color: white !important;
    }
    
    /* Remove box shadows for performance */
    .section,
    .hero,
    .contact,
    .cta-button {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    }
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: opacity 0.2s ease !important;
    }
    
    .aurora-container,
    .holographic-stars,
    .geometric-shapes,
    .floating-elements {
        display: none !important;
    }
}

/* Fix for SoundCloud widget iframe permissions */
iframe[src*="soundcloud.com"] {
    /* Add sandbox attribute via JavaScript if needed */
    /* This is informational - actual fix needs to be in iframe attributes */
}

/* Optional: Complete minimal mode - activate with body.minimal class */
body.minimal {
    .aurora-container,
    .holographic-stars,
    .geometric-shapes,
    .floating-elements,
    .loading-overlay {
        display: none !important;
    }
    
    .hero,
    .section,
    .contact {
        background: rgba(15, 15, 30, 0.98) !important;
        backdrop-filter: none !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    * {
        animation: none !important;
    }
}