/* Critical first-paint styles, shared by the HTML shell and the live page.
   Image URLs and breakpoints must match index.html's preloads. */
html, body {
  margin: 0;
  background: #320742;
}

.qrv-forum-variant .qrv-page {
  --qrv-theatre-image: image-set(
    url("images/campaign/theatre-sharp-desktop.avif") type("image/avif"),
    url("images/campaign/theatre-hq-fade.webp") type("image/webp")
  );
  position: relative;
  isolation: isolate;
  background: #320742;
  overflow: hidden;
}

.qrv-forum-variant .qrv-page::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: calc((78px + 690px + 380px) * 1.15);
  background:
    linear-gradient(
      180deg,
      rgba(50, 7, 66, .06) 0%,
      rgba(50, 7, 66, .08) 43%,
      rgba(50, 7, 66, .7) 72%,
      #320742 100%
    ),
    var(--qrv-theatre-image) center top / cover no-repeat;
  background-size: auto, 105% auto;
  transform: translateY(-31%) scaleX(-1);
  pointer-events: none;
}

.qrv-forum-variant .qrv-page::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: calc((78px + 690px + 380px) * 1.15);
  background: linear-gradient(
    180deg,
    rgba(50, 7, 66, 0) 42%,
    rgba(50, 7, 66, .4) 62%,
    #320742 85%
  );
  transform: translateY(-31%);
  pointer-events: none;
}

@media (max-width: 760px) {
  .qrv-forum-variant .qrv-page {
    --qrv-theatre-image: image-set(
      url("images/campaign/theatre-sharp-mobile.avif") type("image/avif"),
      url("images/campaign/theatre-hero-mobile.webp") type("image/webp")
    );
  }

  .qrv-forum-variant .qrv-page::before,
  .qrv-forum-variant .qrv-page::after {
    height: calc((65px + 690px + 380px) * 1.15);
  }

  .qrv-forum-variant .qrv-page::before {
    background-position: 58% top;
    background-size: auto, auto 105%;
  }
}