/* A section can contain the mist, or the shared page shell can fix it behind
   the whole site with one canvas sized to the viewport. */
[data-polarity-background] {
  --polarity-background: #06060c;
  --polarity-background-opacity: 1;
  position: relative;
  isolation: isolate;
  background-color: var(--polarity-background);
}

.polarity-background-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--polarity-background, #06060c);
}

[data-polarity-background-fixed] > .polarity-background-layer {
  position: fixed;
}

/* The live hero uses .wrap; this lets its background reach the viewport edges. */
[data-polarity-fullbleed] > .polarity-background-layer {
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
}

.polarity-background-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 45%, #57367a40, transparent 65%);
}

.polarity-background-layer.is-rendering::before { display: none; }

.polarity-background-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--polarity-background-opacity, 1);
}

/* Let the violet mist show through, with a light scrim behind the copy. */
.polarity-background-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #06060c33 0%, #06060c1f 40%, #06060c00 72%, #06060c14 100%),
    linear-gradient(180deg, #06060c66 0%, #06060c00 14%, #06060c00 86%, #06060c99 100%);
}

@media (max-width: 760px) {
  [data-polarity-background] { --polarity-background-opacity: .9; }
  .polarity-background-layer::after {
    background: linear-gradient(180deg, #06060c66 0%, #06060c26 42%, #06060c0d 70%, #06060c99 100%);
  }
}