/* Film-space spotlight for the remaining seven scenes. Pages 01–03 retain
   the approved opening-light.css exposure. These two black fields shade the
   picture around its subject; they never fade the source alpha or paint an
   edge curtain. app.js clips them to the actual decoded film rectangle. */
#stage[data-sitewide-revision="true"] #shade .scene-grade:is([data-grade="3"], [data-grade="4"], [data-grade="5"], [data-grade="6"], [data-grade="7"], [data-grade="8"], [data-grade="9"]) {
  --reel-axis: 134deg;
  --reel-near: .80;
  --reel-far: .84;
  --reel-shoulder-near: .50;
  --reel-shoulder-far: .47;
  --reel-depth-early: .075;
  --reel-depth-middle: .40;
  --reel-depth-outer: .65;
  --reel-peripheral: .72;
  --reel-subject-rx: calc(var(--reel-film-width, 2496px) * .18);
  --reel-subject-ry: calc(var(--reel-film-height, 1404px) * .28);
  --reel-hero-x: 25%;
  --reel-hero-y: 25%;
  --reel-hero-rx: 24vw;
  --reel-hero-ry: 22vh;
  background: none;
  clip-path: var(--opening-film-clip, inset(0));
}

#stage[data-sitewide-revision="true"] #shade .scene-grade:is([data-grade="3"], [data-grade="4"], [data-grade="5"], [data-grade="6"], [data-grade="7"], [data-grade="8"], [data-grade="9"])::before {
  background: linear-gradient(var(--reel-axis),
    rgb(0 0 0 / var(--reel-near)) 0%,
    rgb(0 0 0 / var(--reel-shoulder-near)) 17%,
    rgb(0 0 0 / .25) 33%, rgb(0 0 0 / .075) 46%,
    transparent 54%, rgb(0 0 0 / .09) 66%,
    rgb(0 0 0 / var(--reel-shoulder-far)) 83%,
    rgb(0 0 0 / var(--reel-far)) 100%);
  -webkit-mask-image:
    radial-gradient(ellipse var(--reel-subject-rx) var(--reel-subject-ry) at var(--reel-subject-x) var(--reel-subject-y),
      transparent 0% 22%, rgb(0 0 0 / .15) 46%, rgb(0 0 0 / .43) 74%, rgb(0 0 0 / .84) 106%, #000 132%),
    radial-gradient(ellipse var(--reel-hero-rx) var(--reel-hero-ry) at var(--reel-hero-x) var(--reel-hero-y),
      rgb(0 0 0 / .28) 0% 24%, rgb(0 0 0 / .40) 48%, rgb(0 0 0 / .70) 80%, #000 116%);
  mask-image:
    radial-gradient(ellipse var(--reel-subject-rx) var(--reel-subject-ry) at var(--reel-subject-x) var(--reel-subject-y),
      transparent 0% 22%, rgb(0 0 0 / .15) 46%, rgb(0 0 0 / .43) 74%, rgb(0 0 0 / .84) 106%, #000 132%),
    radial-gradient(ellipse var(--reel-hero-rx) var(--reel-hero-ry) at var(--reel-hero-x) var(--reel-hero-y),
      rgb(0 0 0 / .28) 0% 24%, rgb(0 0 0 / .40) 48%, rgb(0 0 0 / .70) 80%, #000 116%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

#stage[data-sitewide-revision="true"] #shade .scene-grade:is([data-grade="3"], [data-grade="4"], [data-grade="5"], [data-grade="6"], [data-grade="7"], [data-grade="8"], [data-grade="9"])::after {
  background: radial-gradient(ellipse var(--reel-subject-rx) var(--reel-subject-ry) at var(--reel-subject-x) var(--reel-subject-y),
    transparent 0% 24%, rgb(0 0 0 / var(--reel-depth-early)) 46%,
    rgb(0 0 0 / var(--reel-depth-middle)) 70%,
    rgb(0 0 0 / var(--reel-depth-outer)) 98%,
    rgb(0 0 0 / var(--reel-peripheral)) 124%);
  -webkit-mask-image: radial-gradient(ellipse var(--reel-hero-rx) var(--reel-hero-ry) at var(--reel-hero-x) var(--reel-hero-y),
    rgb(0 0 0 / .28) 0% 24%, rgb(0 0 0 / .40) 48%, rgb(0 0 0 / .70) 80%, #000 116%);
  mask-image: radial-gradient(ellipse var(--reel-hero-rx) var(--reel-hero-ry) at var(--reel-hero-x) var(--reel-hero-y),
    rgb(0 0 0 / .28) 0% 24%, rgb(0 0 0 / .40) 48%, rgb(0 0 0 / .70) 80%, #000 116%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* Apertures are measured in the native source (0–1). app.js maps them
   through the resolved frame and crop at rest and during video/canvas travel.
   The reflected beam keeps the original light direction of each scene; the
   radial field holds its subject open while the surrounding set falls away. */
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="3"] {
  /* Both faces and their shared map, following the existing window beam. */
  --reel-native-x: .765; --reel-native-y: .59;
  --reel-axis: 144deg;
  --reel-near: .70; --reel-far: .76;
  --reel-shoulder-near: .39; --reel-shoulder-far: .43;
  --reel-depth-early: .04; --reel-depth-middle: .32;
  --reel-depth-outer: .57; --reel-peripheral: .66;
  --reel-subject-rx: calc(var(--reel-film-width, 2496px) * .16);
  --reel-subject-ry: calc(var(--reel-film-height, 1404px) * .32);
  --reel-hero-x: 27%;
}
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="4"] {
  /* The pointing glove and the gold landmass, held as one meeting point. */
  --reel-native-x: .59; --reel-native-y: .54;
  --reel-axis: 48deg; --reel-near: .82; --reel-far: .88;
  --reel-depth-middle: .43; --reel-depth-outer: .68; --reel-peripheral: .77;
  --reel-subject-rx: calc(var(--reel-film-width, 2496px) * .17);
  --reel-subject-ry: calc(var(--reel-film-height, 1404px) * .25);
  --reel-hero-x: 66%; --reel-hero-y: 25%;
}
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="5"] {
  /* Warm raking light on the right-hand design and brass divider. */
  --reel-native-x: .77; --reel-native-y: .49;
  --reel-axis: 141deg; --reel-near: .81; --reel-far: .88;
  --reel-depth-middle: .42; --reel-depth-outer: .67; --reel-peripheral: .76;
  --reel-subject-rx: calc(var(--reel-film-width, 2496px) * .17);
  --reel-subject-ry: calc(var(--reel-film-height, 1404px) * .30);
  --reel-hero-x: calc(var(--gutter) + min(19.08vw, 286px));
  --reel-hero-y: 23%; --reel-hero-rx: 24vw;
}
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="6"] {
  /* The real CI is the illuminated object, with the book receding around it. */
  --reel-native-x: .755; --reel-native-y: .49;
  --reel-axis: 126deg; --reel-near: .80; --reel-far: .86;
  --reel-depth-middle: .40; --reel-depth-outer: .64; --reel-peripheral: .73;
  --reel-subject-rx: calc(var(--reel-film-width, 2496px) * .15);
  --reel-subject-ry: calc(var(--reel-film-height, 1404px) * .29);
  --reel-hero-x: calc(var(--gutter) + min(11.46vw, 172px));
  --reel-hero-y: 23%; --reel-hero-rx: 18vw;
}
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="7"] {
  /* A tall pool of light connects pinned plans to the working instruments. */
  --reel-native-x: .675; --reel-native-y: .495;
  --reel-axis: 132deg; --reel-near: .78; --reel-far: .84;
  --reel-depth-middle: .38; --reel-depth-outer: .63; --reel-peripheral: .72;
  --reel-subject-rx: calc(var(--reel-film-width, 2496px) * .17);
  --reel-subject-ry: calc(var(--reel-film-height, 1404px) * .34);
  --reel-hero-x: calc(var(--gutter) + min(24.27vw, 360px));
  --reel-hero-rx: 29vw;
}
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="8"] {
  /* Bright paper receives deeper shoulders without flattening its detail. */
  --reel-native-x: .625; --reel-native-y: .45;
  --reel-axis: 122deg; --reel-near: .88; --reel-far: .84;
  --reel-shoulder-near: .56; --reel-shoulder-far: .51;
  --reel-depth-middle: .44; --reel-depth-outer: .70; --reel-peripheral: .78;
  --reel-subject-rx: calc(var(--reel-film-width, 2496px) * .18);
  --reel-subject-ry: calc(var(--reel-film-height, 1404px) * .25);
  --reel-hero-x: 20%; --reel-hero-y: 43%; --reel-hero-rx: 22vw;
}
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="9"] {
  /* A compact aperture reveals the crystal mechanism, not its paper surround. */
  --reel-native-x: .50; --reel-native-y: .485;
  --reel-axis: 52deg; --reel-near: .85; --reel-far: .90;
  --reel-depth-middle: .46; --reel-depth-outer: .71; --reel-peripheral: .80;
  --reel-subject-rx: calc(var(--reel-film-width, 2496px) * .16);
  --reel-subject-ry: calc(var(--reel-film-height, 1404px) * .26);
  --reel-hero-x: 66%;
}

@media (max-width: 760px) {
  /* object-position changes the source crop only. All physical frame sides
     remain at the viewport edges through resolveFilmLayout(). */
  #stage[data-sitewide-revision="true"] .scene--relationship { --film-focus-x: .87; }
  #stage[data-sitewide-revision="true"] .scene--community { --film-focus-x: .635; }
  #stage[data-sitewide-revision="true"] .scene--origin { --film-focus-x: .85; }
  #stage[data-sitewide-revision="true"] .scene--identity { --film-focus-x: .845; }
  #stage[data-sitewide-revision="true"] .scene--business { --film-focus-x: .735; }
  #stage[data-sitewide-revision="true"] .scene--products { --film-focus-x: .67; }
  #stage[data-sitewide-revision="true"] .scene--research { --film-focus-x: .50; }

  #stage[data-sitewide-revision="true"] #shade .scene-grade:is([data-grade="3"], [data-grade="4"], [data-grade="5"], [data-grade="6"], [data-grade="7"], [data-grade="8"], [data-grade="9"]) {
    --reel-subject-rx: 62vw; --reel-subject-ry: 31vh;
    --reel-hero-x: 50%; --reel-hero-y: 21%;
    --reel-hero-rx: 47vw; --reel-hero-ry: 18vh;
    --reel-near: .72; --reel-far: .78;
    --reel-shoulder-near: .42; --reel-shoulder-far: .45;
    --reel-depth-early: .06; --reel-depth-middle: .34;
    --reel-depth-outer: .58; --reel-peripheral: .66;
  }
  #stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="3"] {
    --reel-axis: 144deg;
    --reel-subject-rx: 72vw; --reel-subject-ry: 33vh;
    --reel-near: .61; --reel-far: .67;
    --reel-shoulder-near: .32; --reel-shoulder-far: .36;
    --reel-depth-early: .035; --reel-depth-middle: .27;
    --reel-depth-outer: .48; --reel-peripheral: .56;
  }
  #stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="4"] {
    --reel-subject-rx: 64vw;
    --reel-near: .75; --reel-far: .81;
  }
  #stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="5"] {
    --reel-subject-ry: 34vh;
  }
  #stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="6"] {
    --reel-subject-rx: 66vw;
    --reel-near: .69; --reel-far: .75; --reel-peripheral: .62;
  }
  #stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="7"] {
    --reel-subject-ry: 36vh;
    --reel-near: .68; --reel-far: .74; --reel-peripheral: .62;
  }
  #stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="8"] {
    --reel-subject-rx: 68vw;
    --reel-near: .79; --reel-far: .82;
    --reel-depth-middle: .38; --reel-depth-outer: .63; --reel-peripheral: .71;
  }
  #stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="9"] {
    --reel-subject-rx: 62vw;
    --reel-near: .76; --reel-far: .82;
    --reel-depth-middle: .38; --reel-depth-outer: .63; --reel-peripheral: .71;
  }
}

@media (max-width: 760px) and (max-height: 560px) and (orientation: landscape) {
  #stage[data-sitewide-revision="true"] #shade .scene-grade:is([data-grade="3"], [data-grade="4"], [data-grade="5"], [data-grade="6"], [data-grade="7"], [data-grade="8"], [data-grade="9"]) {
    --reel-subject-rx: 30vw; --reel-subject-ry: 59vh;
    --reel-hero-x: 26%; --reel-hero-y: 38%;
    --reel-hero-rx: 25vw; --reel-hero-ry: 37vh;
  }
}