/* High-resolution photography rendered as alternating upper-corner accents. */
.section-scene,
.workflow-item::before,
.landing-hero::before,
.conversion-zone-scene {
  --scene-origin: left top;
  --scene-image: none;
  --scene-vertical-blend: linear-gradient(
    180deg,
    rgba(2, 13, 22, 0) 0%,
    rgba(2, 13, 22, 0) 28%,
    rgba(2, 13, 22, .035) 36%,
    rgba(2, 13, 22, .12) 43%,
    rgba(2, 13, 22, .28) 50%,
    rgba(2, 13, 22, .5) 57%,
    rgba(2, 13, 22, .72) 63%,
    rgba(2, 13, 22, .9) 69%,
    #020d16 75%,
    #020d16 100%
  );
  --scene-corner-blend: radial-gradient(
    ellipse 80% 82% at var(--scene-origin),
    rgba(2, 13, 22, 0) 0%,
    rgba(2, 13, 22, 0) 34%,
    rgba(2, 13, 22, .035) 42%,
    rgba(2, 13, 22, .12) 49%,
    rgba(2, 13, 22, .3) 56%,
    rgba(2, 13, 22, .55) 63%,
    rgba(2, 13, 22, .78) 69%,
    rgba(2, 13, 22, .94) 75%,
    #020d16 81%
  );
  pointer-events: none;
  background-color: #020d16;
  background-image:
    var(--scene-vertical-blend),
    var(--scene-corner-blend),
    var(--scene-image);
  background-position: center, center, var(--scene-origin);
  background-repeat: no-repeat;
  background-size: cover, cover, min(1500px, 86vw) auto;
  contain: paint;
}

.section-scene {
  position: absolute;
  z-index: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}

.module-showcase > :not(.section-scene),
.workflow-showcase > :not(.section-scene),
.module-overview > :not(.section-scene) {
  position: relative;
  z-index: 1;
}

.section-scene-modules {
  --scene-origin: left top;
  --scene-image: url("assets/section-backgrounds/modules-continuous-v5-lossless.webp");
  top: 0;
  height: calc(100% + 110px);
  opacity: .96;
}

.section-scene-workflow {
  --scene-origin: right top;
  --scene-image: url("assets/section-backgrounds/workflow-track-v5-lossless.webp");
  top: -120px;
  height: 960px;
  opacity: .94;
}

.section-scene-overview {
  --scene-origin: left top;
  --scene-image: url("assets/section-backgrounds/overview-pitlane-v5-lossless.webp");
  top: -130px;
  height: calc(100% + 430px);
  opacity: .96;
}

/* Product rows continue the left/right rhythm without touching their screenshots. */
.workflow-item {
  position: relative;
  isolation: isolate;
}

.workflow-item::before {
  --scene-origin: left top;
  --scene-image: url("assets/section-backgrounds/workflow-track-v5-lossless.webp");
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  opacity: .6;
}

.workflow-item:nth-child(even)::before {
  --scene-origin: right top;
  --scene-image: url("assets/section-backgrounds/overview-pitlane-v5-lossless.webp");
}

.workflow-item:nth-child(3n)::before {
  --scene-image: url("assets/section-backgrounds/community-studio-v5-lossless.webp");
}

.landing-hero::before {
  --scene-origin: right top;
  --scene-image: url("assets/hero-helmet-v3-lossless.webp");
  background-image: linear-gradient(
    180deg,
    rgba(2, 13, 22, 0) 0%,
    rgba(2, 13, 22, 0) 60%,
    rgba(2, 13, 22, .035) 67%,
    rgba(2, 13, 22, .12) 74%,
    rgba(2, 13, 22, .3) 82%,
    rgba(2, 13, 22, .58) 89%,
    rgba(2, 13, 22, .82) 95%,
    #020d16 100%
  ), var(--scene-image);
  background-position: center, center top;
  background-size: cover, cover;
}

.landing-hero::after,
.module-showcase::before,
.workflow-showcase::before {
  display: none;
}

body::after {
  /* Photos already contain dithering. Avoid a full-viewport blend on every scroll. */
  display: none;
}

.conversion-zone {
  position: relative;
  isolation: isolate;
  display: flow-root;
}

.conversion-zone-scene {
  --scene-origin: right top;
  --scene-image: url("assets/section-backgrounds/community-studio-v5-lossless.webp");
  position: absolute;
  z-index: -1;
  inset: -180px 0 -80px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  opacity: .78;
}

@media (max-width: 800px) {
  .section-scene,
  .workflow-item::before,
  .landing-hero::before,
  .conversion-zone-scene {
    background-size: cover, cover, auto 72%;
  }

  .section-scene-modules {
    top: 0;
    height: calc(100% + 80px);
    opacity: .86;
  }

  .section-scene-workflow {
    top: -40px;
    height: 760px;
    opacity: .83;
  }

  .section-scene-overview {
    top: -70px;
    height: calc(100% + 140px);
    opacity: .86;
  }

  .conversion-zone-scene {
    opacity: .7;
  }

  .workflow-item::before {
    opacity: .52;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .section-scene,
  .workflow-item::before,
  .conversion-zone-scene {
    opacity: .16;
  }
}