.hero-shader-left,
.hero-shader-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 400px;
    height: 400px;
    pointer-events: none;
    z-index: 1;
}

.hero-shader-left {
    left: -50px;
}

.hero-shader-right {
    right: -50px;
}

.shader-canvas {
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fadeInShader 2s ease-out forwards;
    filter: blur(0px);
}

@keyframes fadeInShader {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 0.95;
        transform: scale(1);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.1);
    }
}
.hero-shader-left::before,
.hero-shader-right::before {
    display: none;
}
@media (max-width: 1400px) {
    .hero-shader-left,
    .hero-shader-right {
        width: 350px;
        height: 350px;
    }
    
    .hero-shader-left {
        left: -80px;
    }
    
    .hero-shader-right {
        right: -80px;
    }
}

@media (max-width: 1200px) {
    .hero-shader-left,
    .hero-shader-right {
        width: 300px;
        height: 300px;
    }
    
    .hero-shader-left {
        left: -100px;
    }
    
    .hero-shader-right {
        right: -100px;
    }
}

@media (max-width: 992px) {
    .hero-shader-left,
    .hero-shader-right {
        width: 250px;
        height: 250px;
    }
    
    .hero-shader-left {
        left: -120px;
    }
    
    .hero-shader-right {
        right: -120px;
    }
}

@media (max-width: 768px) {
    .hero-shader-left,
    .hero-shader-right {
        width: 200px;
        height: 200px;
        opacity: 0.6;
    }
    
    .hero-shader-left {
        left: -140px;
    }
    
    .hero-shader-right {
        right: -140px;
    }
}

@media (max-width: 576px) {
    .hero-shader-left,
    .hero-shader-right {
        display: none;
    }
}
.shader-canvas {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .shader-canvas {
        animation: none;
    }
    
    .hero-shader-left::before,
    .hero-shader-right::before {
        animation: none;
    }
}