/**
 * Hiraya Digital - Animated Background Styles
 * CSS for animated noise and particle backgrounds
 */

/* Container with animated background */
.hiraya-animated-container[data-hiraya-bg="enabled"] {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* Create stacking context */
    contain: layout style paint; /* CSS containment to prevent leaks */
}

/* Animated noise background - ONLY within hiraya containers */
.hiraya-animated-container[data-hiraya-bg="enabled"] .hiraya-noise-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    background-image: url(https://static.tumblr.com/rxfwyqf/20Zlzzth8/noise.png);
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
    background-repeat: repeat;
}

/* Particle canvas - ONLY within hiraya containers */
.hiraya-animated-container[data-hiraya-bg="enabled"] .hiraya-particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    display: block;
}

/* Ensure content is above background */
.hiraya-animated-container > .elementor-container {
    position: relative;
    z-index: 3;
}

.hiraya-animated-container > .elementor-widget-wrap {
    position: relative;
    z-index: 3;
}

/* Editor specific styles */
.elementor-editor .hiraya-animated-container {
    min-height: 200px;
}

.elementor-editor .hiraya-noise-bg {
    opacity: 0.05;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hiraya-animated-container .hiraya-particle-canvas {
        opacity: 0.7;
    }
    
    .hiraya-noise-bg {
        opacity: 0.05;
    }
}

@media (max-width: 480px) {
    .hiraya-animated-container .hiraya-particle-canvas {
        opacity: 0.5;
    }
    
    .hiraya-noise-bg {
        opacity: 0.03;
    }
}

/* Performance optimizations */
.hiraya-animated-container {
    will-change: transform;
    backface-visibility: hidden;
}

.hiraya-noise-bg {
    will-change: background-position;
    transform: translateZ(0);
}

.hiraya-particle-canvas {
    will-change: transform;
    transform: translateZ(0);
}