/**
 * Elementor Background Noise CSS
 * Version: 1.0.0
 */

/* Base noise styles */
.elementor-background-noise {
    position: relative;
    isolation: isolate;
}

/* Noise pseudo-element */
.elementor-background-noise::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    pointer-events: none;
    opacity: 0.4;
    z-index: 0;
    mix-blend-mode: multiply;
    transition: opacity 0.3s ease;
}

/* Ensure the noise layer respects border radius */
.elementor-background-noise::after {
    border-radius: inherit;
    overflow: hidden;
}

/* Animation for noise */
@keyframes noiseAnimation {
    0%, 100% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-5%, -5%);
    }
    20% {
        transform: translate(-10%, 5%);
    }
    30% {
        transform: translate(5%, -10%);
    }
    40% {
        transform: translate(-5%, 15%);
    }
    50% {
        transform: translate(-10%, 5%);
    }
    60% {
        transform: translate(15%, 0);
    }
    70% {
        transform: translate(0, 10%);
    }
    80% {
        transform: translate(-15%, 0);
    }
    90% {
        transform: translate(10%, 5%);
    }
}

.elementor-background-noise.noise-animated::after {
    animation: noiseAnimation 10s infinite linear;
    background-size: 150% 150%;
}

/* Preset Styles */

/* Subtle */
.elementor-background-noise.preset-subtle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.5' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
    opacity: 0.2;
    mix-blend-mode: soft-light;
}

/* Medium */
.elementor-background-noise.preset-medium::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    opacity: 0.4;
    mix-blend-mode: multiply;
}

/* Strong */
.elementor-background-noise.preset-strong::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='1.2' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E");
    opacity: 0.6;
    mix-blend-mode: overlay;
}

/* Fine Grain */
.elementor-background-noise.preset-fine::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='1.5' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.3;
    mix-blend-mode: multiply;
}

/* Coarse Grain */
.elementor-background-noise.preset-coarse::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.3' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
    opacity: 0.5;
    mix-blend-mode: screen;
}

/* Ensure proper stacking context - background noise stays behind content */
/* Instead of forcing all children to have z-index, we use a better approach */

/* Fix for Elementor containers - maintain natural stacking */
.elementor-background-noise.elementor-element {
    z-index: auto;
}

.elementor-background-noise.elementor-widget-wrap {
    z-index: auto;
}

/* Ensure compatibility with Elementor's background overlays */
/* Background overlay should be behind the noise effect */
.elementor-background-noise > .elementor-background-overlay {
    z-index: -1;
}

/* The noise layer sits at z-index 0, content will naturally be above it */
.elementor-background-noise::after {
    z-index: 0;
}

/* Ensure content stays above noise - only specific containers need explicit stacking */
.elementor-background-noise > .elementor-widget-container,
.elementor-background-noise > .elementor-container,
.elementor-background-noise > .elementor-column-wrap,
.elementor-background-noise > .elementor-inner-section,
.elementor-background-noise > .e-con-inner,
.elementor-background-noise > .e-container {
    position: relative;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .elementor-background-noise::after {
        background-size: 100% 100%;
    }
}

/* Performance optimization */
.elementor-background-noise::after {
    will-change: opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.elementor-background-noise.noise-animated::after {
    will-change: transform, opacity;
}

/* Print styles - disable noise for printing */
@media print {
    .elementor-background-noise::after {
        display: none !important;
    }
}