@layer utilities {
  .section-shell {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background-color: transparent;
  }

  .section-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .section-content {
    position: relative;
    z-index: 1;
  }

  /* Default — sections live inside the global ambient (no owned wash) */
  .bg-band-flat,
  .bg-section-canvas {
    background-color: transparent;
    background-image: none;
  }

  /*
   * Soft rhythm tint only — translucent so the shared ambient shows through.
   * Never opaque slabs that restart the canvas.
   */
  .bg-section-muted {
    background-color: color-mix(in srgb, var(--surface) 18%, transparent);
    background-image: none;
  }

  .dark .bg-section-muted {
    background-color: color-mix(in srgb, var(--surface) 16%, transparent);
    background-image: none;
  }

  /* Slightly brighter calm pocket — used sparingly for visual rhythm */
  .bg-section-lift {
    background-color: transparent;
    background-image: none;
  }

  .dark .bg-section-lift {
    background-image: radial-gradient(
      ellipse 85% 70% at 50% 40%,
      rgba(232, 240, 238, 0.025),
      transparent 70%
    );
  }
}