/* Hero backdrop — "Λ is the light source". Drifting indigo aurora + the design-canvas dot grid,
   lit up by the visitor's pointer and by the Λ. Fades in as the build's canvas chrome fades out
   (hero.js drives opacity). Everything scoped under .hero__bg. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  /* melt into the flat paper of the next section instead of ending on a hard edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}
.hero__bg-aurora,
.hero__bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero__blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.hero__blob--a {           /* lilac, top-left */
  width: 62vmax; height: 62vmax;
  left: -18vmax; top: -30vmax;
  background: radial-gradient(closest-side, rgba(150, 138, 255, 0.34), rgba(150, 138, 255, 0) 100%);
  animation: hbg-a 19s ease-in-out infinite alternate;
}
.hero__blob--b {           /* brand indigo, upper right — sits behind the Λ */
  width: 58vmax; height: 58vmax;
  right: -16vmax; top: -22vmax;
  background: radial-gradient(closest-side, rgba(69, 47, 253, 0.26), rgba(69, 47, 253, 0) 100%);
  animation: hbg-b 23s ease-in-out infinite alternate;
}
.hero__blob--c {           /* periwinkle, low centre */
  width: 70vmax; height: 46vmax;
  left: 12vmax; bottom: -30vmax;
  background: radial-gradient(closest-side, rgba(110, 118, 255, 0.24), rgba(110, 118, 255, 0) 100%);
  animation: hbg-c 27s ease-in-out infinite alternate;
}
@keyframes hbg-a { to { transform: translate3d(14vmax, 9vmax, 0) scale(1.12); } }
@keyframes hbg-b { to { transform: translate3d(-12vmax, 12vmax, 0) scale(0.92); } }
@keyframes hbg-c { to { transform: translate3d(-16vmax, -7vmax, 0) scale(1.1); } }

.reduced-motion .hero__blob { animation: none; }