/* Plasma Background Effect Styles */

.plasma-enabled {
    position: relative;
    overflow: hidden;
}

.plasma-enabled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(220, 38, 38, 0.08) 0%, 
        rgba(0, 0, 0, 0.1) 50%, 
        rgba(220, 38, 38, 0.05) 100%);
    z-index: 1;
    pointer-events: none;
}

.plasma-enabled .container {
    position: relative;
    z-index: 10;
}

.plasma-enabled h1,
.plasma-enabled p {
    position: relative;
    z-index: 10;
    text-shadow: 
        0 0 20px rgba(0, 0, 0, 0.8), 
        0 0 40px rgba(220, 38, 38, 0.3);
}

/* Enhanced glow for better visibility over plasma */
.plasma-enabled h1 {
    text-shadow: 
        0 0 25px rgba(0, 0, 0, 0.9),
        0 0 50px rgba(220, 38, 38, 0.4),
        0 3px 6px rgba(220, 38, 38, 0.25),
        0 6px 12px rgba(220, 38, 38, 0.2);
}

.plasma-enabled p {
    text-shadow: 
        0 0 15px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(220, 38, 38, 0.2);
}

/* Fallback animation for non-WebGL browsers */
@keyframes plasmaFallback {
    0% { 
        background-position: 0% 0%, 0% 0%;
        filter: brightness(1) hue-rotate(0deg); 
    }
    25% {
        background-position: 100% 0%, 25% 25%;
        filter: brightness(1.1) hue-rotate(5deg);
    }
    50% { 
        background-position: 100% 100%, 50% 50%;
        filter: brightness(1.2) hue-rotate(10deg); 
    }
    75% {
        background-position: 0% 100%, 75% 75%;
        filter: brightness(1.1) hue-rotate(5deg);
    }
    100% { 
        background-position: 0% 0%, 100% 100%;
        filter: brightness(1) hue-rotate(0deg); 
    }
}

/* Enhanced fallback for better visual appeal */
.plasma-enabled.webgl-fallback {
    background: 
        radial-gradient(ellipse at 30% 70%, 
            rgba(220, 38, 38, 0.2) 0%, 
            rgba(220, 38, 38, 0.1) 25%,
            rgba(185, 28, 28, 0.08) 50%,
            rgba(0, 0, 0, 0.9) 70%, 
            rgba(0, 0, 0, 1) 100%),
        linear-gradient(45deg, 
            rgba(220, 38, 38, 0.05) 0%,
            rgba(0, 0, 0, 0.8) 25%,
            rgba(220, 38, 38, 0.03) 50%,
            rgba(0, 0, 0, 0.9) 75%,
            rgba(220, 38, 38, 0.08) 100%),
        linear-gradient(135deg, 
            rgba(26, 26, 26, 0.95) 0%, 
            rgba(0, 0, 0, 1) 100%);
    background-size: 200% 200%, 300% 300%, 100% 100%;
    animation: plasmaFallback 12s ease-in-out infinite;
}

/* Performance optimizations */
.plasma-enabled canvas {
    will-change: transform;
    transform: translateZ(0);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .plasma-enabled.webgl-fallback {
        animation-duration: 8s; /* Faster on mobile */
        background-size: 150% 150%, 200% 200%, 100% 100%;
    }
}

@media (max-width: 480px) {
    .plasma-enabled h1 {
        text-shadow: 
            0 0 15px rgba(0, 0, 0, 0.9),
            0 0 30px rgba(220, 38, 38, 0.3),
            0 2px 4px rgba(220, 38, 38, 0.2);
    }
    
    .plasma-enabled p {
        text-shadow: 
            0 0 10px rgba(0, 0, 0, 0.8),
            0 0 20px rgba(220, 38, 38, 0.15);
    }
}

/* Accessibility - Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .plasma-enabled.webgl-fallback {
        animation: none;
        background: 
            radial-gradient(ellipse at 40% 60%, 
                rgba(220, 38, 38, 0.15) 0%, 
                rgba(0, 0, 0, 0.9) 70%, 
                rgba(0, 0, 0, 1) 100%);
    }
}