/* ============================================================
   ECM ambient background — adapted from the supplied animated
   club/event backdrop. Fixed blobs + grid + interactive canvas
   sit BEHIND all content (z-index 0, pointer-events none).
   Window-level mouse/touch listeners still drive the canvas.
   Never copy the source's `overflow: hidden` / `touch-action: none`
   onto the page — scrolling and taps must keep working.
   ============================================================ */

.ambient-glow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-glow .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.65;
  will-change: transform;
  animation: ambient-float 24s infinite ease-in-out alternate;
}

@media (max-width: 768px) {
  .ambient-glow .blob {
    filter: blur(45px);
    opacity: 0.5;
  }
}

.ambient-glow .blob-1 {
  top: -15%;
  left: -15%;
  width: 65vw;
  height: 65vw;
  max-width: 800px;
  max-height: 800px;
  background: radial-gradient(circle, rgba(204, 251, 241, 0.85) 0%, rgba(240, 253, 250, 0) 70%);
  animation-duration: 20s;
}

.ambient-glow .blob-2 {
  bottom: -20%;
  right: -15%;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, rgba(254, 243, 199, 0.85) 0%, rgba(255, 251, 235, 0) 70%);
  animation-duration: 26s;
  animation-delay: -4s;
}

.ambient-glow .blob-3 {
  top: 35%;
  right: 15%;
  width: 45vw;
  height: 45vw;
  max-width: 600px;
  max-height: 600px;
  background: radial-gradient(circle, rgba(204, 251, 241, 0.65) 0%, rgba(240, 253, 244, 0) 70%);
  animation-duration: 22s;
  animation-delay: -8s;
}

@keyframes ambient-float {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate3d(5%, 4%, 0) scale(1.08) rotate(180deg);
  }
  100% {
    transform: translate3d(-3%, -5%, 0) scale(0.95) rotate(360deg);
  }
}

.bg-grid-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
  background-size: 36px 36px;
  background-image:
    linear-gradient(to right, rgba(203, 213, 225, 0.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(203, 213, 225, 0.25) 1px, transparent 1px);
}

@media (max-width: 640px) {
  .bg-grid-layer {
    background-size: 24px 24px;
  }
}

#bgCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* Content shell floats above the ambient layers.
   Scoped to the shell's OWN container classes -- not to `div.flex`, or we
   also match fixed dialogs like #unack-dialog and neutralise their .fixed
   rule (the line below is un-layered, so it used to beat Tailwind's
   .layer utilities .fixed every time). Bug found via reactive audit:
   the unacknowledged-incidents dialog rendered as an in-flow card at the
   document bottom instead of a fixed overlay, and its auto-focus then
   scrolled the whole page to the bottom. */
body > div.nav-scope,
body > div.page-wrap,
body > footer,
body > div.app-shell {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ambient-glow .blob {
    animation: none;
  }
}