/* Section-specific diagrams, kept quiet behind the content. */
.hero, .intro, .work, .playground, .contact {
  position: relative;
  isolation: isolate;
}

.hero::before, .intro::before, .work::before,
.playground::before, .contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* First light: fine rays rising from the illustration. */
.hero::before {
  background: repeating-conic-gradient(from -45deg at 75% 48%,
    transparent 0deg 11.8deg, rgb(140 129 80 / 9%) 11.8deg 12deg);
  mask-image: radial-gradient(ellipse at 75% 48%, transparent 20%, #000 65%);
}

/* The lab: graph-paper construction lines, fading toward the copy. */
.intro::before {
  background-image:
    linear-gradient(rgb(69 72 63 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(69 72 63 / 8%) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(110deg, #000, transparent 65%);
}

/* Data: a regular field of points, concentrated in the open margin. */
.work::before {
  background: radial-gradient(circle, rgb(69 72 63 / 18%) 1px, transparent 1.5px) 0 0 / 19px 19px;
  mask-image: linear-gradient(90deg, #000, transparent 48%);
}

/* Playground: an off-centre orbital diagram echoing the interactive mark. */
.playground::before {
  background: repeating-radial-gradient(ellipse at 83% 57%,
    transparent 0 62px, rgb(140 129 80 / 15%) 63px 64px, transparent 65px 115px);
  mask-image: linear-gradient(90deg, transparent 20%, #000 85%);
}

/* Contact: a quiet diagonal paper texture. */
.contact::before {
  background: repeating-linear-gradient(135deg,
    transparent 0 14px, rgb(69 72 63 / 5%) 14px 15px);
  mask-image: linear-gradient(90deg, transparent 20%, #000);
}

@media (max-width: 800px) {
  .intro::before { mask-image: linear-gradient(110deg, rgb(0 0 0 / 65%), transparent 75%); }
  .work::before { mask-image: linear-gradient(90deg, rgb(0 0 0 / 50%), transparent 70%); }
  .playground::before { opacity: .7; }
}