/* ==========================================================================
   AURORA BACKGROUND - CREATIVE CAPABILITIES SECTION
   React Bits Aurora WebGL2 Background (Vanilla ES Module Integration)
   https://reactbits.dev/backgrounds/aurora
   ========================================================================== */

/* Ensure Creative Capabilities section acts as positioning anchor */
.capabilities-section {
  position: relative !important;
}

/* Background container placed behind section header and carousel */
.capabilities-aurora {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  z-index: 0;
  overflow: hidden;

  /* Subtle CSS gradient fallback matching exact cyan/blue/purple/pink brand colors if WebGL2 is disabled/unavailable */
  background:
    radial-gradient(ellipse 70% 50% at 18% 0%, rgba(85, 221, 255, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 65% 45% at 52% 0%, rgba(59, 130, 246, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 75% 55% at 86% 0%, rgba(132, 103, 255, 0.12) 0%, rgba(236, 72, 153, 0.08) 50%, transparent 72%);

  /* Soft edge fade: feather top seam, preserve dark space at bottom and soft side boundaries */
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.75) 32px,
      black 72px,
      black 55%,
      rgba(0, 0, 0, 0.5) 80%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0%,
      black 40px,
      black calc(100% - 40px),
      transparent 100%
    );
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.75) 32px,
      black 72px,
      black 55%,
      rgba(0, 0, 0, 0.5) 80%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0%,
      black 40px,
      black calc(100% - 40px),
      transparent 100%
    );
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* When WebGL2 canvas is rendering, suppress the CSS fallback background so opacity is applied only once */
.capabilities-aurora.is-webgl-active {
  background: transparent !important;
}

/* Aurora canvas layer */
.capabilities-aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none !important;
}

/* Ensure text, captions, cards and controls stay safely above the background layer */
.capabilities-header {
  position: relative !important;
  z-index: 2 !important;
}

.capabilities-carousel-container {
  position: relative !important;
  z-index: 2 !important;
}