/* ===========================================================
   SCROLL DEPTH EFFECT
   As a new section becomes the focus, the section(s) above it
   blur and dim slightly — like a camera racking focus. GSAP
   (already loaded) drives --blur/--dim per section; this file
   only defines how those variables render and a safe fallback.
   =========================================================== */

.depth-section {
  --blur: 0px;
  --dim: 1;
  filter: blur(var(--blur));
  opacity: var(--dim);
  will-change: filter, opacity;
  /* GPU-accelerated, avoids layout thrash */
  transform: translateZ(0);
}

/* If JS never runs (load failure), guarantee full visibility */
.depth-section {
  filter: blur(0px);
  opacity: 1;
}

.js-depth-ready .depth-section {
  filter: blur(var(--blur));
  opacity: var(--dim);
}

@media (prefers-reduced-motion: reduce) {
  .depth-section {
    filter: none !important;
    opacity: 1 !important;
  }
}

/* Keep blurred content from clipping its own shadows/glow oddly */
.depth-section {
  isolation: isolate;
}