.wml-cosmic-aurora-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  
  /* Applying background directly to the root for better blend-mode accuracy */
  background: radial-gradient(
      ellipse at 20% 30%,
      var(--aurora-color-1) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 80% 50%,
      var(--aurora-color-2) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse at 50% 80%,
      var(--aurora-color-3) 0%,
      transparent 65%
    ),
    linear-gradient(135deg, #000000 0%, var(--aurora-base-bg) 100%);
  background-blend-mode: overlay, screen, hard-light;
  
  /* Explicit animation properties for maximum reliability with variables */
  animation-name: wml-aurora-drift;
  animation-duration: calc(var(--aurora-drift-speed, 25) * 1s);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

/* Grid overlay using ::before */
.wml-cosmic-aurora-container::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, var(--aurora-grid-opacity, 0.03)) 0px,
      rgba(255, 255, 255, var(--aurora-grid-opacity, 0.03)) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, calc(var(--aurora-grid-opacity, 0.03) * 1.5)) 0px,
      rgba(255, 255, 255, calc(var(--aurora-grid-opacity, 0.03) * 1.5)) 1px,
      transparent 1px,
      transparent 60px
    );
  animation: wml-aurora-grid-shift 20s linear infinite;
}

/* Atmosphere pulse overlay using ::after */
.wml-cosmic-aurora-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle at center,
    transparent 70%,
    var(--aurora-base-bg) 100%
  );
  
  animation-name: wml-aurora-pulse;
  animation-duration: calc(var(--aurora-pulse-speed, 8) * 1s);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.aurora-content-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: var(--aurora-justify, center);
  align-items: var(--aurora-align, center);
  padding: 40px;
}

@keyframes wml-aurora-drift {
  0% {
    background-position: 0% 0%, 0% 0%, 0% 0%;
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    background-position: -10% -5%, 5% 10%, 0% 15%;
    filter: hue-rotate(30deg) brightness(1.2);
  }
  100% {
    background-position: 5% 10%, -10% -5%, 15% 0%;
    filter: hue-rotate(60deg) brightness(1);
  }
}

@keyframes wml-aurora-grid-shift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-50%, -50%); }
}

@keyframes wml-aurora-pulse {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
}

/* Bricks Builder Adjustments */
.bricks-is-builder .wml-cosmic-aurora-container {
  min-height: 400px;
}