/* Depth System — DOF blur, parallax transforms, atmospheric perspective */

/* ═══ Depth-of-Field Blur ═══ */
/* Elements outside the focus plane get a subtle gaussian blur.
   --depth-blur is computed by depth.js based on distance from focus depth. */

.lit {
  --depth-blur: 0px;
  --depth-dim: 1;
  --depth-parallax-x: 0px;
  --depth-parallax-y: 0px;
}

[data-depth-active="1"] .lit {
  filter: blur(var(--depth-blur));
  opacity: var(--depth-dim);
  transform: translate(var(--depth-parallax-x), var(--depth-parallax-y));
  transition: filter 0.3s ease, opacity 0.3s ease;
  will-change: filter, opacity, transform;
}

/* Focused elements get no blur and full opacity */
[data-depth-active="1"] .lit[data-depth-focused="true"] {
  filter: none;
  opacity: 1;
}

/* ═══ Parallax Layers ═══ */
/* Different depth levels move at different rates relative to cursor.
   Applied via transform from depth.js on each .lit element. */

/* Ensure parallax doesn't break layout */
[data-depth-active="1"] .lit {
  position: relative;
}

/* ═══ Focus Ring ═══ */
/* Visual indicator of which depth is currently in focus (optional debug) */

[data-depth-debug="1"] .lit[data-depth-focused="true"] {
  outline: 1px dashed var(--color-accent);
  outline-offset: 4px;
}

/* ═══ Atmospheric Perspective ═══ */
/* Elements further from camera (lower depth) are slightly desaturated and dimmer.
   This creates visual depth even without blur. */

[data-depth-active="1"] .lit[data-depth="0"] {
  --atmospheric-desaturate: 0.9;
}
[data-depth-active="1"] .lit[data-depth="1"] {
  --atmospheric-desaturate: 0.95;
}
[data-depth-active="1"] .lit[data-depth="2"] {
  --atmospheric-desaturate: 1;
}
[data-depth-active="1"] .lit[data-depth="3"] {
  --atmospheric-desaturate: 1;
}

/* ═══ Reduced Motion ═══ */
/* Disable parallax and DOF for users who prefer reduced motion */

@media (prefers-reduced-motion: reduce) {
  [data-depth-active="1"] .lit {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}