.parallax-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.burst {
  position: absolute;
  will-change: transform;
  user-select: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.burst.visible { opacity: 1; }

/* Image-based bursts */
.burst img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* depth layers — size and opacity */
.burst[data-depth="1"] { width: 400px; height: 400px; }
.burst[data-depth="2"] { width: 260px; height: 260px; }
.burst[data-depth="3"] { width: 160px; height: 160px; }
.burst[data-depth="4"] { width: 90px;  height: 90px;  }
.burst[data-depth="5"] { width: 50px;  height: 50px;  }

.burst.visible[data-depth="1"] { opacity: 0.12; }
.burst.visible[data-depth="2"] { opacity: 0.16; }
.burst.visible[data-depth="3"] { opacity: 0.22; }
.burst.visible[data-depth="4"] { opacity: 0.28; }
.burst.visible[data-depth="5"] { opacity: 0.35; }

/* subtle opacity pulse for liveliness — does NOT touch transform */
@keyframes burst-breathe {
  0%, 100% { opacity: var(--burst-o); }
  50% { opacity: calc(var(--burst-o) * 1.3); }
}

.burst.visible[data-depth="1"] { --burst-o: 0.12; animation: burst-breathe 8s ease-in-out infinite; }
.burst.visible[data-depth="2"] { --burst-o: 0.16; animation: burst-breathe 10s ease-in-out infinite; }
.burst.visible[data-depth="3"] { --burst-o: 0.22; animation: burst-breathe 7s ease-in-out infinite; }
.burst.visible[data-depth="4"] { --burst-o: 0.28; animation: burst-breathe 9s ease-in-out infinite; }
.burst.visible[data-depth="5"] { --burst-o: 0.35; animation: burst-breathe 6s ease-in-out infinite; }