/* MELOVIQ_HOME_AURORA_FROM_REFERENCE_20261106
 * Actual cyan and violet light artwork cropped from approved concept #2,
 * pixel content sourced from a_wide_design_presentation_image_for_meloviq_dark.png.
 * Soft alpha masks were baked into the WebP to avoid rectangle seams.
 * Content width, typography, layouts, player and route behavior unchanged.
 */
@media (min-width: 1920px) {
  body:has(main .archive-home-hero) {
    background-color: #0b0e16;
    background-image:
      radial-gradient(ellipse 25vw 29vw at 0% 34%, rgba(24, 133, 194, .055), transparent 76%),
      radial-gradient(ellipse 24vw 33vw at 100% 42%, rgba(105, 51, 181, .055), transparent 78%);
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  /* Preserve the exact existing container width as requested. */
  body:has(main .archive-home-hero) #root > .app > main {
    max-width: clamp(1240px, calc(1240px + (100vw - 1920px) * .38), 1480px);
  }
  body:has(main .archive-home-hero)::before,
  body:has(main .archive-home-hero)::after {
    content: "";
    pointer-events: none;
    position: fixed;
    top: 11vh;
    width: min(27vw, 660px);
    height: 66vh;
    max-height: 560px;
    background-image: url("/assets/meloviq-aurora-concept2-sides.webp");
    background-repeat: no-repeat;
    background-size: 200% 100%;
    z-index: 0;
  }
  body:has(main .archive-home-hero)::before {
    left: 0;
    background-position: left center;
  }
  body:has(main .archive-home-hero)::after {
    right: 0;
    background-position: right center;
  }
  body:has(main .archive-home-hero) #root {
    position: relative;
    z-index: 1;
  }
}
@media (prefers-reduced-transparency: reduce) {
  body:has(main .archive-home-hero)::before,
  body:has(main .archive-home-hero)::after {
    opacity: .6;
  }
}