/* REV052 — a source-anchored linear beam and a continuous reading-side field.
   Reviewed against all 13 original posters, not a viewport-centred vignette.
   Grade 0 deliberately has no selector here: its optical aperture and the
   3500ms opening sequence remain in opening-aperture.css / opening-reveal.js.
   app.js retains ownership of grade opacity, the native anchor and film clip.
   Pure black shades preserve source colour; no source alpha or UI is filtered. */
#stage[data-sitewide-revision="true"] #shade .scene-grade:is([data-grade="1"], [data-grade="2"], [data-grade="3"], [data-grade="4"], [data-grade="5"], [data-grade="6"], [data-grade="7"], [data-grade="8"], [data-grade="9"], [data-grade="10"], [data-grade="11"], [data-grade="12"], [data-grade="13"], [data-grade="14"]) {
  --linear-axis: 132deg;
  /* Unit direction = (sin(axis), -cos(axis)); the main strip follows that
     vector. Pixel stops project the real subject onto each gradient line,
     so no oversized compositing surfaces or extra tracking JavaScript are needed. */
  --linear-dx: .743145;
  --linear-dy: .669131;
  --linear-near: .82;
  --linear-far: .86;
  --linear-cross: .72;
  --linear-width: 1;
  --linear-spread: 1;
  --linear-strength: 1;
  --linear-floor: .18;
  --linear-read-axis: 90deg;
  --linear-read-center: var(--reel-hero-x);
  --linear-read-span: 100vw;
  --linear-center: calc(50% + (var(--reel-subject-x) - 50vw) * var(--linear-dx) + (var(--reel-subject-y) - 50vh) * var(--linear-dy));
  --linear-band: calc((var(--reel-subject-rx) * .65 + var(--reel-subject-ry) * .35) * var(--linear-width) * var(--linear-spread));
  background: rgb(0 0 0 / var(--linear-floor));
  clip-path: var(--opening-film-clip, inset(0));
}

/* One uninterrupted primary strip and one broad field toward the copy side.
   Reset both historical radial masks, including their composite operations. */
#stage[data-sitewide-revision="true"] #shade .scene-grade:is([data-grade="1"], [data-grade="2"], [data-grade="3"], [data-grade="4"], [data-grade="5"], [data-grade="6"], [data-grade="7"], [data-grade="8"], [data-grade="9"], [data-grade="10"], [data-grade="11"], [data-grade="12"], [data-grade="13"], [data-grade="14"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--linear-axis),
    rgb(0 0 0 / calc(var(--linear-near) * var(--linear-strength))) calc(var(--linear-center) - var(--linear-band) * 2.80),
    rgb(0 0 0 / calc(.68 * var(--linear-strength))) calc(var(--linear-center) - var(--linear-band) * 1.90),
    rgb(0 0 0 / calc(.40 * var(--linear-strength))) calc(var(--linear-center) - var(--linear-band) * 1.30),
    rgb(0 0 0 / calc(.12 * var(--linear-strength))) calc(var(--linear-center) - var(--linear-band) * .80),
    transparent calc(var(--linear-center) - var(--linear-band) * .44),
    transparent calc(var(--linear-center) + var(--linear-band) * .44),
    rgb(0 0 0 / calc(.12 * var(--linear-strength))) calc(var(--linear-center) + var(--linear-band) * .80),
    rgb(0 0 0 / calc(.40 * var(--linear-strength))) calc(var(--linear-center) + var(--linear-band) * 1.30),
    rgb(0 0 0 / calc(.68 * var(--linear-strength))) calc(var(--linear-center) + var(--linear-band) * 1.90),
    rgb(0 0 0 / calc(var(--linear-far) * var(--linear-strength))) calc(var(--linear-center) + var(--linear-band) * 2.80));
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
#stage[data-sitewide-revision="true"] #shade .scene-grade:is([data-grade="1"], [data-grade="2"], [data-grade="3"], [data-grade="4"], [data-grade="5"], [data-grade="6"], [data-grade="7"], [data-grade="8"], [data-grade="9"], [data-grade="10"], [data-grade="11"], [data-grade="12"], [data-grade="13"], [data-grade="14"])::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--linear-read-axis),
    transparent calc(var(--linear-read-center) - var(--linear-read-span) * .32),
    rgb(0 0 0 / calc(.35 * var(--linear-strength))) calc(var(--linear-read-center) - var(--linear-read-span) * .22),
    rgb(0 0 0 / calc(.57 * var(--linear-strength))) calc(var(--linear-read-center) - var(--linear-read-span) * .12),
    rgb(0 0 0 / calc(var(--linear-cross) * var(--linear-strength))) calc(var(--linear-read-center) + var(--linear-read-span) * .08));
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* Source 1: the revealed telescope retains sea/sky detail, with brass receding.
   Source 2: the opposing diagonal follows the SW–NE compass needle. */
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="1"] {
  --linear-near: .76; --linear-far: .82; --linear-cross: .69; --linear-width: 1.10;
}
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="2"] {
  --linear-axis: 48deg; --linear-dx: .743145; --linear-dy: -.669131;
  --linear-near: .80; --linear-far: .85; --linear-cross: .72; --linear-width: 1.08;
}
/* Source 3: the existing high window light crosses faces and the shared map.
   A broader strip keeps both people in the same illuminated plane. */
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="3"] {
  --linear-read-axis: 270deg; --linear-read-center: calc(100% - var(--reel-hero-x));
  --linear-axis: 144deg; --linear-dx: .587785; --linear-dy: .809017;
  --linear-near: .75; --linear-far: .80; --linear-cross: .67; --linear-width: 1.22;
}
/* Source 4: the pointing hand and map are one plane, under upper-left light. */
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="4"] {
  --linear-axis: 48deg; --linear-dx: .743145; --linear-dy: -.669131;
  --linear-near: .85; --linear-far: .90; --linear-cross: .74; --linear-width: 1.12;
}
/* Source 5: the brass divider leads into the right-hand mechanism drawing. */
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="5"] {
  --linear-read-axis: 270deg; --linear-read-center: calc(100% - var(--reel-hero-x));
  --linear-axis: 141deg; --linear-dx: .629320; --linear-dy: .777146;
  --linear-near: .85; --linear-far: .88; --linear-cross: .72; --linear-width: 1.10;
}
/* Source 6: raking light on the real CI; the book remains visibly continuous. */
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="6"] {
  --linear-read-axis: 270deg; --linear-read-center: calc(100% - var(--reel-hero-x));
  --linear-axis: 126deg; --linear-dx: .809017; --linear-dy: .587785;
  --linear-near: .84; --linear-far: .87; --linear-cross: .72; --linear-width: 1.16;
}
/* Source 7: the workbench and pinned plans form a broad, centred stage. */
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="7"] {
  --linear-read-axis: 180deg; --linear-read-center: 66vh; --linear-read-span: 100vh;
  --linear-near: .82; --linear-far: .87; --linear-cross: .74; --linear-width: 1.25;
}
/* Source 8: one sheet-wide light plane, not separate spots on each drawing. */
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="8"] {
  --linear-read-axis: 270deg; --linear-read-center: calc(100% - var(--reel-hero-x));
  --linear-axis: 122deg; --linear-dx: .848048; --linear-dy: .529919;
  --linear-near: .87; --linear-far: .87; --linear-cross: .74; --linear-width: 1.20;
}
/* Source 9: the crystal and engraved cube are clear; surrounding tools recede. */
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="9"] {
  --linear-axis: 52deg; --linear-dx: .788011; --linear-dy: -.615661;
  --linear-near: .86; --linear-far: .90; --linear-cross: .76; --linear-width: 1.08;
}
/* Source 10 is shared by two pages. Its top light and all faces share a broad
   strip, so changing their copy cannot make the picture's lighting jump. */
#stage[data-sitewide-revision="true"] #shade .scene-grade:is([data-grade="10"], [data-grade="11"]) {
  --linear-axis: 142deg; --linear-dx: .615661; --linear-dy: .788011;
  --linear-near: .84; --linear-far: .84; --linear-cross: .72; --linear-width: 1.28;
}
/* Source 11: a taller clear plane for the machine; the white room recedes. */
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="12"] {
  --linear-axis: 48deg; --linear-dx: .743145; --linear-dy: -.669131;
  --linear-near: .88; --linear-far: .91; --linear-cross: .78; --linear-width: 1.20;
}
/* Source 12: overhead papers and hands form one horizontal working plane. */
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="13"] {
  --linear-read-axis: 270deg; --linear-read-center: calc(100% - var(--reel-hero-x));
  --linear-axis: 128deg; --linear-dx: .788011; --linear-dy: .615661;
  --linear-near: .90; --linear-far: .89; --linear-cross: .76; --linear-width: 1.28;
}
/* Source 13: the tall sail and stern stay open, opposing the bright right sky.
   The existing source safeInset remains solely in film-geometry.js. */
#stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="14"] {
  --linear-axis: 137deg; --linear-dx: .681998; --linear-dy: .731354;
  --linear-near: .87; --linear-far: .83; --linear-cross: .74; --linear-width: 1.22;
}

@media (min-width: 761px) {
  /* Native desktop evidence: Founder signature, lower CI captions and the
     Execution / People footer extend onto pale paper or white floor. The existing
     pseudo-element carries a broad lower field, with no new DOM/compositor
     layer. The source mechanism and CI remain unchanged through 58vh. */
  #stage[data-sitewide-revision="true"] #shade .scene-grade:is([data-grade="5"], [data-grade="6"], [data-grade="12"], [data-grade="13"])::after {
    --linear-lower-read: linear-gradient(180deg,
      transparent 0% 58vh,
      rgb(0 0 0 / .32) 75vh,
      rgb(0 0 0 / .45) 85vh,
      rgb(0 0 0 / .54) 100%);
    background:
      linear-gradient(var(--linear-read-axis),
        transparent calc(var(--linear-read-center) - var(--linear-read-span) * .32),
        rgb(0 0 0 / calc(.35 * var(--linear-strength))) calc(var(--linear-read-center) - var(--linear-read-span) * .22),
        rgb(0 0 0 / calc(.57 * var(--linear-strength))) calc(var(--linear-read-center) - var(--linear-read-span) * .12),
        rgb(0 0 0 / calc(var(--linear-cross) * var(--linear-strength))) calc(var(--linear-read-center) + var(--linear-read-span) * .08)),
      var(--linear-lower-read);
  }
  /* The Execution room alone has a near-white header behind the official
     gold logo. This broad upper field clears before the central mechanism. */
  #stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="12"]::after {
    background:
      linear-gradient(var(--linear-read-axis),
        transparent calc(var(--linear-read-center) - var(--linear-read-span) * .32),
        rgb(0 0 0 / calc(.35 * var(--linear-strength))) calc(var(--linear-read-center) - var(--linear-read-span) * .22),
        rgb(0 0 0 / calc(.57 * var(--linear-strength))) calc(var(--linear-read-center) - var(--linear-read-span) * .12),
        rgb(0 0 0 / calc(var(--linear-cross) * var(--linear-strength))) calc(var(--linear-read-center) + var(--linear-read-span) * .08)),
      var(--linear-lower-read),
      linear-gradient(180deg,
        rgb(0 0 0 / .36) 0% 12vh,
        rgb(0 0 0 / .20) 22vh,
        transparent 30vh);
  }
}

@media (max-width: 760px) {
  /* The cover crop is already close. Open the strip and soften its shoulders;
     the DOF stylesheet independently disables the expensive outer pass. */
  #stage[data-sitewide-revision="true"] #shade .scene-grade:is([data-grade="1"], [data-grade="2"], [data-grade="3"], [data-grade="4"], [data-grade="5"], [data-grade="6"], [data-grade="7"], [data-grade="8"], [data-grade="9"], [data-grade="10"], [data-grade="11"], [data-grade="12"], [data-grade="13"], [data-grade="14"]) {
    --linear-spread: 1.10;
    --linear-strength: .84;
    --linear-floor: .16;
    --linear-read-axis: 180deg; --linear-read-center: 64vh; --linear-read-span: 100vh;
  }
  /* The two opening-mobile anchors were percentages of the viewport box.
     Express the same points as viewport lengths before projecting them onto
     a diagonal gradient line, whose percentage basis is a different length. */
  #stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="1"] {
    --reel-subject-x: 46vw; --reel-subject-y: 46vh;
  }
  #stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="2"] {
    --reel-subject-x: 50vw; --reel-subject-y: 44vh;
  }
  /* Native mobile evidence: cream paper, the cube lid and the white studio
     behind Founder / Identity / Products / Research / Execution / People
     headings need an upper reading plane.
     One continuous ramp rejoins the existing lower field at 42vh: no extra
     layer, local text halo, or additional darkening of the middle/lower shot. */
  #stage[data-sitewide-revision="true"] #shade .scene-grade:is([data-grade="5"], [data-grade="6"], [data-grade="8"], [data-grade="9"], [data-grade="12"], [data-grade="13"])::after {
    background: linear-gradient(180deg,
      rgb(0 0 0 / .44) 0%,
      rgb(0 0 0 / .42) 26vh,
      rgb(0 0 0 / .35) 32vh,
      rgb(0 0 0 / calc(.35 * var(--linear-strength))) calc(var(--linear-read-center) - var(--linear-read-span) * .22),
      rgb(0 0 0 / calc(.57 * var(--linear-strength))) calc(var(--linear-read-center) - var(--linear-read-span) * .12),
      rgb(0 0 0 / calc(var(--linear-cross) * var(--linear-strength))) calc(var(--linear-read-center) + var(--linear-read-span) * .08));
  }
}
@media (max-width: 760px) and (max-height: 560px) and (orientation: landscape) {
  #stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="1"] { --reel-subject-y: 50vh; }
  #stage[data-sitewide-revision="true"] #shade .scene-grade[data-grade="2"] { --reel-subject-y: 46vh; }
}