:root {
  --live-scrim-boost: 0;
}

/* Adaptive cinematic scrims stay transparent at the edges so the 3D world
   remains continuous, while protecting the contrast immediately behind copy. */
.scene {
  --scrim-base: 0.28;
}

.section-copy {
  position: relative;
  isolation: isolate;
}

.section-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: clamp(-90px, -7vw, -44px) clamp(-110px, -8vw, -38px);
  pointer-events: none;
  opacity: clamp(0, calc(var(--scrim-base) + var(--live-scrim-boost)), 0.82);
  background:
    radial-gradient(ellipse at 42% 48%, rgba(5, 5, 7, 0.98) 0%, rgba(5, 5, 7, 0.78) 42%, rgba(5, 5, 7, 0.26) 68%, transparent 84%),
    linear-gradient(90deg, rgba(5, 5, 7, 0.74), rgba(5, 5, 7, 0.18) 68%, transparent 94%);
  transition: opacity 420ms ease;
}

/* Protected quiet zones are authored by chapter according to copy density. */
#about { --scrim-base: 0.42; }
#philosophy { --scrim-base: 0.5; }
#work { --scrim-base: 0.56; }
#services { --scrim-base: 0.62; }
#why { --scrim-base: 0.46; }
#contact { --scrim-base: 0.54; }

.philosophy .section-copy::before,
.work .section-copy::before,
.services .section-copy::before,
.contact .section-copy::before {
  inset-inline: clamp(-120px, -8vw, -42px);
  background: radial-gradient(ellipse at 50% 48%, rgba(5, 5, 7, 0.97) 0%, rgba(5, 5, 7, 0.76) 54%, rgba(5, 5, 7, 0.2) 76%, transparent 92%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: clamp(0.24, calc(0.3 + var(--live-scrim-boost)), 0.48);
  background:
    linear-gradient(90deg, rgba(5, 5, 7, 0.72) 0%, rgba(5, 5, 7, 0.28) 48%, transparent 74%),
    linear-gradient(0deg, rgba(5, 5, 7, 0.62) 0%, transparent 34%);
}

@media (max-width: 800px) {
  .scene { --scrim-base: 0.56; }

  .section-copy::before {
    inset: -52px -24px;
    background: radial-gradient(ellipse at 46% 48%, rgba(5, 5, 7, 0.99) 0%, rgba(5, 5, 7, 0.82) 58%, rgba(5, 5, 7, 0.24) 80%, transparent 96%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-copy::before { transition: none; }
}