/* Picture light only. film-edge-blend.js alone joins exposed source edges.
   Each film has an open focal basin and two long, opposing oblique shoulders.
   The shoulders recede through the basin instead of drawing curtains along
   browser sides. The source keeps its own sharpness and highlight detail.
   app.js crossfades the entire grade with the decoded scene; no lagging CSS
   opacity transition or independently moving light can leave a second image. */
.scene-grade {
  --field-angle: 132deg;
  --return-angle: 314deg;
  --light-angle: 132deg;
  --focus-x: 56%;
  --focus-y: 48%;
  --focus-width: 57vw;
  --focus-height: 68vh;
  --shadow: .54;
  --shoulder: .35;
  --mid-shadow: .17;
  --mid-light: .045;
  --return-shadow: .34;
  --return-shoulder: .21;
  --return-mid: .09;
  --return-light: .02;
  --peripheral: .25;
  --peripheral-mid: .10;
  --warm-light: .035;
  background: linear-gradient(var(--light-angle),
    transparent 0% 26%,
    rgb(246 191 104 / .01) 41%,
    rgb(246 191 104 / var(--warm-light)) 54%,
    rgb(246 191 104 / .012) 67%,
    transparent 82% 100%);
}
.scene-grade::before, .scene-grade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene-grade::before {
  background:
    linear-gradient(var(--field-angle),
      rgb(5 8 11 / var(--shadow)) 0%,
      rgb(5 8 11 / var(--shoulder)) 17%,
      rgb(5 8 11 / var(--mid-shadow)) 35%,
      rgb(5 8 11 / var(--mid-light)) 53%,
      rgb(5 8 11 / .007) 70%,
      transparent 86% 100%),
    linear-gradient(var(--return-angle),
      rgb(8 10 12 / var(--return-shadow)) 0%,
      rgb(8 10 12 / var(--return-shoulder)) 19%,
      rgb(8 10 12 / var(--return-mid)) 38%,
      rgb(8 10 12 / var(--return-light)) 57%,
      rgb(8 10 12 / .004) 75%,
      transparent 91% 100%);
  /* Alpha, not a painted oval: source light remains open around the subject. */
  -webkit-mask-image: radial-gradient(ellipse var(--focus-width) var(--focus-height) at var(--focus-x) var(--focus-y),
    rgb(0 0 0 / .10) 0% 15%, rgb(0 0 0 / .58) 38%,
    rgb(0 0 0 / .90) 65%, #000 100%);
  mask-image: radial-gradient(ellipse var(--focus-width) var(--focus-height) at var(--focus-x) var(--focus-y),
    rgb(0 0 0 / .10) 0% 15%, rgb(0 0 0 / .58) 38%,
    rgb(0 0 0 / .90) 65%, #000 100%);
}
.scene-grade::after {
  background: radial-gradient(ellipse var(--focus-width) var(--focus-height) at var(--focus-x) var(--focus-y),
    transparent 0% 24%, rgb(6 10 14 / .03) 43%,
    rgb(6 10 14 / var(--peripheral-mid)) 73%,
    rgb(6 10 14 / var(--peripheral)) 100%);
}

/* Main's two stops are one uninterrupted lens shot and share every value. */
.scene-grade[data-grade="0"], .scene-grade[data-grade="1"] {
  --field-angle: 128deg; --return-angle: 313deg; --light-angle: 128deg;
  --focus-x: 50%; --focus-y: 47%;
  --focus-width: 43vw; --focus-height: 55vh;
  --shadow: .62; --shoulder: .41; --mid-shadow: .21;
  --return-shadow: .42; --return-shoulder: .27; --return-mid: .115;
  --peripheral: .31; --peripheral-mid: .13; --warm-light: .025;
  --mid-light: .065;
}
/* Compass: open the pivot and the SW–NE needle, shade across its other axis. */
.scene-grade[data-grade="2"] {
  --field-angle: 137deg; --return-angle: 317deg; --light-angle: 43deg;
  --focus-x: 50%; --focus-y: 46%;
  --focus-width: 42vw; --focus-height: 52vh;
  --shadow: .63; --shoulder: .42; --mid-shadow: .21;
  --return-shadow: .42; --return-shoulder: .27; --return-mid: .115;
  --peripheral: .32; --peripheral-mid: .14; --warm-light: .035;
  --mid-light: .065;
}
/* People: follow the real window beam to both faces and the shared map.
   The room is already dark, so its shadows are intentionally less dense. */
.scene-grade[data-grade="3"] {
  --field-angle: 151deg; --return-angle: 330deg; --light-angle: 132deg;
  --focus-x: 77%; --focus-y: 54%;
  --focus-width: 43vw; --focus-height: 60vh;
  --shadow: .36; --shoulder: .25; --mid-shadow: .115; --mid-light: .026;
  --return-shadow: .22; --return-shoulder: .14; --return-mid: .055;
  --peripheral: .19; --peripheral-mid: .075; --warm-light: .025;
}
/* Map: light travels down the bare hand, across the map, to the pointing glove. */
.scene-grade[data-grade="4"] {
  --field-angle: 229deg; --return-angle: 48deg; --light-angle: 141deg;
  --focus-x: 58%; --focus-y: 57%;
  --focus-width: 49vw; --focus-height: 51vh;
  --shadow: .53; --shoulder: .36; --mid-shadow: .18; --mid-light: .055;
  --return-shadow: .34; --return-shoulder: .22; --return-mid: .10;
  --peripheral: .28; --peripheral-mid: .115; --warm-light: .025;
}
/* Founder book: the drawing and brass divider carry a descending light axis. */
.scene-grade[data-grade="5"] {
  --field-angle: 143deg; --return-angle: 323deg; --light-angle: 143deg;
  --focus-x: 64%; --focus-y: 50%;
  --focus-width: 45vw; --focus-height: 54vh;
  --shadow: .56; --shoulder: .39; --mid-shadow: .19;
  --return-shadow: .37; --return-shoulder: .235; --return-mid: .10;
  --peripheral: .30; --peripheral-mid: .13; --warm-light: .03;
  --mid-light: .055;
}
/* Brand book: preserve the real mark on the right-hand illuminated page. */
.scene-grade[data-grade="6"] {
  --field-angle: 133deg; --return-angle: 312deg; --light-angle: 133deg;
  --focus-x: 74%; --focus-y: 48%;
  --focus-width: 43vw; --focus-height: 56vh;
  --shadow: .52; --shoulder: .35; --mid-shadow: .17; --mid-light: .05;
  --return-shadow: .34; --return-shoulder: .22; --return-mid: .09;
  --peripheral: .27; --peripheral-mid: .11; --warm-light: .025;
}
/* Workbench: the paper wall and lit tabletop form one deep diagonal field. */
.scene-grade[data-grade="7"] {
  --field-angle: 129deg; --return-angle: 314deg; --light-angle: 137deg;
  --focus-x: 68%; --focus-y: 53%;
  --focus-width: 45vw; --focus-height: 56vh;
  --shadow: .52; --shoulder: .35; --mid-shadow: .17; --mid-light: .05;
  --return-shadow: .34; --return-shoulder: .22; --return-mid: .09;
  --peripheral: .26; --peripheral-mid: .105; --warm-light: .035;
}
/* Products: keep the layered sheet drawings clear; recede the nearer shelves. */
.scene-grade[data-grade="8"] {
  --field-angle: 124deg; --return-angle: 306deg; --light-angle: 124deg;
  --focus-x: 63%; --focus-y: 46%;
  --focus-width: 46vw; --focus-height: 54vh;
  --shadow: .56; --shoulder: .38; --mid-shadow: .19; --mid-light: .055;
  --return-shadow: .37; --return-shoulder: .235; --return-mid: .10;
  --peripheral: .29; --peripheral-mid: .12; --warm-light: .025;
}
/* R&D: a compact pool of source light holds the crystal and its mechanism. */
.scene-grade[data-grade="9"] {
  --field-angle: 140deg; --return-angle: 321deg; --light-angle: 140deg;
  --focus-x: 51%; --focus-y: 44%;
  --focus-width: 39vw; --focus-height: 48vh;
  --shadow: .57; --shoulder: .39; --mid-shadow: .19;
  --return-shadow: .38; --return-shoulder: .245; --return-mid: .105;
  --peripheral: .32; --peripheral-mid: .145; --warm-light: .035;
  --mid-light: .055;
}

@media (max-width: 760px) {
  /* Portrait reframes each subject. These are separate light compositions,
     not the desktop vignette narrowed into two dark vertical side rails. */
  .scene-grade[data-grade="0"], .scene-grade[data-grade="1"] {
    --field-angle: 137deg; --return-angle: 318deg; --light-angle: 137deg;
    --focus-x: 50%; --focus-y: 35%;
    --focus-width: 73vw; --focus-height: 33vh;
    --shadow: .50; --shoulder: .34; --mid-shadow: .165; --mid-light: .04;
    --return-shadow: .36; --return-shoulder: .23; --return-mid: .095;
    --peripheral: .28; --peripheral-mid: .12; --warm-light: .02;
  }
  .scene-grade[data-grade="2"] {
    --field-angle: 133deg; --return-angle: 314deg; --light-angle: 45deg;
    --focus-x: 49%; --focus-y: 34%;
    --focus-width: 78vw; --focus-height: 30vh;
    --shadow: .52; --shoulder: .35; --mid-shadow: .17; --mid-light: .045;
    --return-shadow: .40; --return-shoulder: .27; --return-mid: .12;
    --peripheral: .30; --peripheral-mid: .13; --warm-light: .025;
  }
  .scene-grade[data-grade="3"] {
    --field-angle: 146deg; --return-angle: 326deg; --light-angle: 139deg;
    --focus-x: 63%; --focus-y: 43%;
    --focus-width: 89vw; --focus-height: 34vh;
    --shadow: .31; --shoulder: .21; --mid-shadow: .095; --mid-light: .02;
    --return-shadow: .19; --return-shoulder: .12; --return-mid: .045;
    --peripheral: .18; --peripheral-mid: .065; --warm-light: .02;
  }
  .scene-grade[data-grade="4"] {
    --field-angle: 225deg; --return-angle: 46deg; --light-angle: 143deg;
    --focus-x: 62%; --focus-y: 36%;
    --focus-width: 83vw; --focus-height: 29vh;
    --shadow: .47; --shoulder: .32; --mid-shadow: .15; --mid-light: .035;
    --return-shadow: .39; --return-shoulder: .25; --return-mid: .11;
    --peripheral: .29; --peripheral-mid: .12; --warm-light: .02;
  }
  .scene-grade[data-grade="5"] {
    --field-angle: 142deg; --return-angle: 323deg; --light-angle: 142deg;
    --focus-x: 66%; --focus-y: 36%;
    --focus-width: 81vw; --focus-height: 29vh;
    --shadow: .51; --shoulder: .35; --mid-shadow: .17; --mid-light: .04;
    --return-shadow: .40; --return-shoulder: .26; --return-mid: .115;
    --peripheral: .31; --peripheral-mid: .135; --warm-light: .025;
  }
  .scene-grade[data-grade="6"] {
    --field-angle: 136deg; --return-angle: 316deg; --light-angle: 136deg;
    --focus-x: 58%; --focus-y: 23%;
    --focus-width: 79vw; --focus-height: 27vh;
    --shadow: .46; --shoulder: .31; --mid-shadow: .145; --mid-light: .035;
    --return-shadow: .36; --return-shoulder: .23; --return-mid: .10;
    --peripheral: .27; --peripheral-mid: .115; --warm-light: .02;
  }
  .scene-grade[data-grade="7"] {
    --field-angle: 132deg; --return-angle: 314deg; --light-angle: 139deg;
    --focus-x: 65%; --focus-y: 38%;
    --focus-width: 80vw; --focus-height: 30vh;
    --shadow: .46; --shoulder: .31; --mid-shadow: .145; --mid-light: .035;
    --return-shadow: .36; --return-shoulder: .23; --return-mid: .10;
    --peripheral: .28; --peripheral-mid: .12; --warm-light: .025;
  }
  .scene-grade[data-grade="8"] {
    --field-angle: 128deg; --return-angle: 309deg; --light-angle: 128deg;
    --focus-x: 55%; --focus-y: 33%;
    --focus-width: 83vw; --focus-height: 31vh;
    --shadow: .49; --shoulder: .33; --mid-shadow: .16; --mid-light: .04;
    --return-shadow: .39; --return-shoulder: .25; --return-mid: .11;
    --peripheral: .30; --peripheral-mid: .13; --warm-light: .02;
  }
  .scene-grade[data-grade="9"] {
    --field-angle: 145deg; --return-angle: 326deg; --light-angle: 145deg;
    --focus-x: 52%; --focus-y: 27%;
    --focus-width: 78vw; --focus-height: 27vh;
    --shadow: .50; --shoulder: .34; --mid-shadow: .165; --mid-light: .04;
    --return-shadow: .40; --return-shoulder: .26; --return-mid: .115;
    --peripheral: .31; --peripheral-mid: .135; --warm-light: .025;
  }
}

@media (min-width: 761px) and (max-height: 480px) {
  /* A very shallow reel exposes more peripheral props. Keep the film's own
     light legible rather than compressing the portrait focus into a slit. */
  .scene-grade[data-grade] { --focus-height: 88vh; }
}