.music-background {
  position: absolute;
  inset: 0 calc(-1 * var(--gutter));
  z-index: -1;
  width: calc(100% + 2 * var(--gutter));
  height: 100%;
  pointer-events: none;
  opacity: .65;
  mask-image: linear-gradient(transparent, #000 25%, #000 78%, transparent);
}

.about-section .music-background { opacity: .5; }
.agenda .music-background {
  opacity: .95;
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}
.agenda .agenda-event-name, .agenda .agenda-time { text-shadow: 0 2px 12px #000; }
.social-section .music-background {
  opacity: .9;
  mask-image: linear-gradient(transparent, #0000001f 10%, #00000080 22%, #000 40%, #000 65%, #00000080 83%, #0000001f 93%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #0000001f 10%, #00000080 22%, #000 40%, #000 65%, #00000080 83%, #0000001f 93%, transparent);
}
.booking-section .music-background {
  /* Give the orbital scene room to fade outside the content box. */
  top: -100px;
  bottom: -100px;
  height: calc(100% + 200px);
  z-index: 0;
  opacity: .9;
  mask-image: linear-gradient(transparent, #00000030 12%, #000 30%, #000 68%, #00000030 88%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #00000030 12%, #000 30%, #000 68%, #00000030 88%, transparent);
}