/**
 * Particle Background Effect Styles
 * Add this to your WordPress Customizer > Additional CSS
 */

/* Container setup for particle sections */
.particle-section {
  position: relative;
  overflow: hidden;
  /* Contain repaints to prevent affecting header */
  contain: layout paint;
}

/* Canvas positioning - Level 2 (Above Image, Below Overlay) */
.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Above image, below overlay */
  pointer-events: none;
  will-change: contents;
  transform: translateZ(0);
  backface-visibility: hidden;
  mix-blend-mode: screen;
  opacity: 0.5; /* Subtler for background effect */
}

/* Ensure content stays above particles */
.particle-section > *:not(.particle-canvas):not(.wp-block-cover__background):not(.wp-block-cover__image-background):not(.wp-block-cover__video-background) {
  position: relative;
  z-index: 10;
}

/* Background elements - Level 1 (Bottom) */
.particle-section .wp-block-cover__image-background,
.particle-section .wp-block-cover__video-background {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1 !important;
  margin: 0 !important;
  pointer-events: none;
}

/* Overlay - Level 3 (Above Particles) */
.particle-section .wp-block-cover__background,
.particle-section .wp-block-cover__gradient-background {
  position: absolute;
  z-index: 3 !important;
  pointer-events: none; /* Ensure clicks pass through to content */
}

/* Content - Level 10 (Top) */
.particle-section .wp-block-cover__inner-container {
  position: relative !important;
  z-index: 10 !important;
}

/* For generic groups (non-cover) that act as particle sections */
.particle-section:not(.wp-block-cover) > *:not(.particle-canvas) {
  position: relative;
  z-index: 10;
}

/* Optional: Add a subtle dark overlay for better particle visibility */
.particle-section--with-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1; /* Behind canvas but above background */
  pointer-events: none;
}

/* Reduced motion preference support */
@media (prefers-reduced-motion: reduce) {
  .particle-canvas {
    display: none;
  }
}