.section {
  position: relative;
  padding: var(--sec-pad) var(--gutter);
  overflow: hidden;
}

.section--dark      { background: var(--bg);   color: var(--fg); }
.section--light     { background: var(--lbg);  color: var(--lfg); }
.section--light-alt { background: var(--lbg2); color: var(--lfg); }

.section--stacked {
  border-radius: 30px 30px 0 0;
  margin-top: -42px;
  box-shadow: 0 -22px 60px rgba(0, 0, 0, .30);
  will-change: transform;
}

.section--first {
  border-radius: 0;
  margin-top: 0;
  box-shadow: none;
}

.blend-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}
/* Applied only after the WebGL scene is live — see modules/section-blend.js. */
.is-blended .section { background: transparent; }

.is-blended .section--stacked {
  border-radius: 0;
  margin-top: 0;
  box-shadow: none;
}

.scroll-track { scrollbar-width: none; }
.scroll-track::-webkit-scrollbar { display: none; }

.cursor-light {
  position: absolute;
  left: 0;
  top: 0;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, .09) 0%,
    rgba(255, 255, 255, .045) 34%,
    transparent 68%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
.cursor-light.is-on { opacity: 1; }

.section > .container,
.cases__head,
.cases__track,
.cases__footer { position: relative; z-index: 1; }