/* REV052: source-relative linear depth of field, below grades and foreground.
   The existing renderer supplies native-projected focal points and radii.
   Wide clear planes replace circular halos; no parent filter or added media. */
#film-depth {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  --depth-soft-blur: 2.2px;
  --depth-outer-blur: 4.5px;
  --depth-near-blur: 4px;
}
#film-depth > div {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
}
#film-depth .film-depth--soft {
  -webkit-backdrop-filter: blur(var(--depth-soft-blur));
  backdrop-filter: blur(var(--depth-soft-blur));
  /* Faces, the book and the table share a broad sharp horizontal plane.
     The feather is measured from the real source, not viewport percentages. */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 calc(var(--depth-focus-y) - var(--depth-focus-ry) * 1.85),
    rgb(0 0 0 / .42) calc(var(--depth-focus-y) - var(--depth-focus-ry) * 1.25),
    transparent calc(var(--depth-focus-y) - var(--depth-focus-ry) * .80),
    transparent calc(var(--depth-focus-y) + var(--depth-focus-ry) * .80),
    rgb(0 0 0 / .42) calc(var(--depth-focus-y) + var(--depth-focus-ry) * 1.25),
    #000 calc(var(--depth-focus-y) + var(--depth-focus-ry) * 1.85));
  mask-image: linear-gradient(to bottom,
    #000 calc(var(--depth-focus-y) - var(--depth-focus-ry) * 1.85),
    rgb(0 0 0 / .42) calc(var(--depth-focus-y) - var(--depth-focus-ry) * 1.25),
    transparent calc(var(--depth-focus-y) - var(--depth-focus-ry) * .80),
    transparent calc(var(--depth-focus-y) + var(--depth-focus-ry) * .80),
    rgb(0 0 0 / .42) calc(var(--depth-focus-y) + var(--depth-focus-ry) * 1.25),
    #000 calc(var(--depth-focus-y) + var(--depth-focus-ry) * 1.85));
}
#film-depth .film-depth--outer {
  -webkit-backdrop-filter: blur(var(--depth-outer-blur));
  backdrop-filter: blur(var(--depth-outer-blur));
  /* Only distant lateral scenery receives the stronger pass. Keeping this
     plane wider than the subject protects faces, hands and tall machinery. */
  -webkit-mask-image: linear-gradient(to right,
    #000 calc(var(--depth-focus-x) - var(--depth-focus-rx) * 2.20),
    rgb(0 0 0 / .30) calc(var(--depth-focus-x) - var(--depth-focus-rx) * 1.60),
    transparent calc(var(--depth-focus-x) - var(--depth-focus-rx) * 1.12),
    transparent calc(var(--depth-focus-x) + var(--depth-focus-rx) * 1.12),
    rgb(0 0 0 / .30) calc(var(--depth-focus-x) + var(--depth-focus-rx) * 1.60),
    #000 calc(var(--depth-focus-x) + var(--depth-focus-rx) * 2.20));
  mask-image: linear-gradient(to right,
    #000 calc(var(--depth-focus-x) - var(--depth-focus-rx) * 2.20),
    rgb(0 0 0 / .30) calc(var(--depth-focus-x) - var(--depth-focus-rx) * 1.60),
    transparent calc(var(--depth-focus-x) - var(--depth-focus-rx) * 1.12),
    transparent calc(var(--depth-focus-x) + var(--depth-focus-rx) * 1.12),
    rgb(0 0 0 / .30) calc(var(--depth-focus-x) + var(--depth-focus-rx) * 1.60),
    #000 calc(var(--depth-focus-x) + var(--depth-focus-rx) * 2.20));
}
#film-depth .film-depth--near {
  -webkit-backdrop-filter: blur(var(--depth-near-blur));
  backdrop-filter: blur(var(--depth-near-blur));
  /* A single lower ramp follows foreground depth. Its start cannot precede
     the sharp subject's lower boundary, including the ship and machine. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent max(calc(var(--depth-near-y) - var(--depth-focus-ry) * .24), calc(var(--depth-focus-y) + var(--depth-focus-ry) * .92)),
    #000 max(calc(var(--depth-near-y) + var(--depth-focus-ry) * .32), calc(var(--depth-focus-y) + var(--depth-focus-ry) * 1.50)));
  mask-image: linear-gradient(to bottom,
    transparent max(calc(var(--depth-near-y) - var(--depth-focus-ry) * .24), calc(var(--depth-focus-y) + var(--depth-focus-ry) * .92)),
    #000 max(calc(var(--depth-near-y) + var(--depth-focus-ry) * .32), calc(var(--depth-focus-y) + var(--depth-focus-ry) * 1.50)));
}
@media (max-width: 760px) {
  /* A tall mobile crop already throws most peripheral scenery out of view.
     Two gentle passes retain depth with a smaller compositing workload. */
  #film-depth { --depth-soft-blur: 1.4px; --depth-near-blur: 2.4px; }
  #film-depth .film-depth--outer { display: none; }
}
/* Hide only when neither implementation exists. Nested conditions preserve
   the previous fallback while also parsing in the project's CSS AST tool. */
@supports not (backdrop-filter: blur(1px)) {
  @supports not (-webkit-backdrop-filter: blur(1px)) {
    #film-depth { display: none; }
  }
}