/*
 * VAE shared hero background.
 *
 * The background treatment approved for the homepage hero, packaged as one
 * reusable class so the About, Support and Contact top sections share a single
 * definition rather than carrying three copies.
 *
 * Every value here is lifted verbatim from the live homepage implementation in
 * styles.css: the same asset, the same overlay alphas, the same stops, the same
 * cover/position strategy. Nothing is reinterpreted, and the homepage keeps its
 * own copy untouched.
 *
 * The overlay is left-weighted - solid to 46% of the element's width, ramped out
 * by 74% - so the right-hand side of the artwork, where the gold lives, stays as
 * supplied. Apply .wave-bg to a FULL-BLEED element; on a width-constrained one
 * the artwork would render as a narrow panel instead of a band.
 */

.wave-bg {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.62) 46%,
      rgba(0, 0, 0, 0) 74%
    ),
    url("/assets/hero/hero-wave-background.png") center center / cover no-repeat,
    #040404;
}

@media (max-width: 1024px) {
  .wave-bg {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.50) 0%,
        rgba(0, 0, 0, 0.50) 46%,
        rgba(0, 0, 0, 0) 76%
      ),
      url("/assets/hero/hero-wave-background.png") center center / cover no-repeat,
      #040404;
  }
}

@media (max-width: 520px) {
  .wave-bg {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.36) 0%,
        rgba(0, 0, 0, 0.36) 50%,
        rgba(0, 0, 0, 0) 82%
      ),
      url("/assets/hero/hero-wave-background.png") 58% center / cover no-repeat,
      #040404;
  }
}