/* ══════════════════════════════════════════════════════════════
   camera.css — the grade pass.
   Everything here happens "in the lens", not in the scene: bloom
   around highlights, a warm film curve, vignette, and grain.
   Applied last, over the top of the whole frame.
   ══════════════════════════════════════════════════════════════ */

.grade {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
}
.grade > * {
  position: absolute;
  inset: 0;
}

/* ── Bloom: light spilling off the brightest areas. Keyed to the
   same upper-left origin as the sun, and breathing with it. ── */
.grade__bloom {
  background:
    radial-gradient(
      46% 40% at 10% 6%,
      rgba(255, 244, 214, 0.34),
      transparent 68%
    ),
    radial-gradient(
      26% 24% at 34% 30%,
      rgba(255, 240, 206, 0.14),
      transparent 72%
    ),
    radial-gradient(
      20% 18% at 72% 26%,
      rgba(255, 246, 220, 0.11),
      transparent 74%
    );
  mix-blend-mode: screen;
  filter: blur(22px);
  opacity: calc(0.7 + var(--sun-strength) * 0.3);
}

/* ── Film curve: warm highlights, cool-ish lifted shadows. ── */
.grade__warm {
  background:
    /* Amber key wash across the lit third. */
    linear-gradient(
      146deg,
      rgba(255, 198, 122, 0.3) 0%,
      rgba(255, 214, 158, 0.12) 30%,
      transparent 52%,
      rgba(40, 22, 10, 0.3) 100%
    ),
    /* Deep golden-brown in the corners, the reference's signature. */
    radial-gradient(
        96% 88% at 22% 14%,
        transparent 40%,
        rgba(62, 34, 12, 0.3) 78%,
        rgba(38, 19, 6, 0.5) 100%
      );
  mix-blend-mode: overlay;
}
/* A second, non-blend amber pass. `overlay` alone can't push the
   midtones far enough warm without also crushing them. */
.grade__warm::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    148deg,
    rgba(255, 186, 96, 0.16) 0%,
    rgba(214, 132, 52, 0.06) 38%,
    transparent 62%
  );
  mix-blend-mode: soft-light;
}

/* ── Vignette: a soft oval, heavier bottom-right, pulling the eye
   back to the pie. Two stops so the falloff isn't linear. ── */
.grade__vignette {
  background:
    radial-gradient(
      78% 80% at 46% 50%,
      transparent 42%,
      rgba(24, 12, 5, 0.2) 72%,
      rgba(14, 7, 3, 0.5) 100%
    ),
    radial-gradient(
      124% 114% at 18% 12%,
      transparent 58%,
      rgba(20, 10, 4, 0.28) 100%
    );
}

/* ── Grain: fine, static, low-opacity. Built from overlapping
   tiny radial gradients at coprime sizes so it never tiles
   visibly — no image, no canvas, no SVG. ── */
.grade__grain {
  background-image:
    radial-gradient(
      0.5px 0.5px at 17% 23%,
      rgba(255, 255, 255, 0.3),
      transparent
    ),
    radial-gradient(0.5px 0.5px at 64% 41%, rgba(0, 0, 0, 0.26), transparent),
    radial-gradient(
      0.5px 0.5px at 38% 77%,
      rgba(255, 255, 255, 0.22),
      transparent
    ),
    radial-gradient(0.5px 0.5px at 82% 62%, rgba(0, 0, 0, 0.22), transparent),
    radial-gradient(
      0.5px 0.5px at 51% 14%,
      rgba(255, 255, 255, 0.18),
      transparent
    );
  background-size:
    7px 7px,
    11px 11px,
    13px 13px,
    17px 17px,
    19px 19px;
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* ── Depth of field.
   The pie is the focal plane and stays untouched. Everything
   else already carries a per-object blur driven by its own --px
   ("proximity to the focal plane"), declared inline in the
   markup. This block handles the two extremes: the far table
   corners fall off, and the very front edge softens slightly,
   which is what a wide aperture actually does. ── */
.table::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2.4px);
  -webkit-backdrop-filter: blur(2.4px);
  -webkit-mask: radial-gradient(
    66% 62% at 50% 52%,
    transparent 52%,
    rgba(0, 0, 0, 0.5) 76%,
    #000 100%
  );
  mask: radial-gradient(
    66% 62% at 50% 52%,
    transparent 52%,
    rgba(0, 0, 0, 0.5) 76%,
    #000 100%
  );
  pointer-events: none;
}