/* Picture light for the authorized telescope / compass opening only.
   These are broad reflected BLACK fields, not colored light or edge fades. Source alpha stays intact.
   app.js owns scene opacity and the real film rectangle, so this light follows
   decoded transitions without independently fading or tinting mobile blanks. */
#shade .scene-grade:is([data-grade="0"], [data-grade="1"], [data-grade="2"]) {
  --reel-axis: 132deg;
  --reel-near: .76;
  --reel-far: .68;
  --reel-peripheral: .64;
  --reel-depth-early: .14;
  --reel-depth-middle: .38;
  --reel-depth-outer: .58;
  --reel-native-x: .5;
  --reel-native-y: .5;
  --reel-subject-x: calc(100% - var(--reel-film-width, max(min(120vw, 1728px), 100vw, calc(100vh * 1.7777777778))) * .5);
  --reel-subject-y: 50%;
  /* The basin scales with the actual film, preserving the source-relative
     432×378px light measured at the former 2496×1404px reference. */
  --reel-subject-rx: calc(var(--reel-film-width, var(--opening-source-width)) * .1730769231);
  --reel-subject-ry: calc(var(--reel-film-height, var(--opening-source-height)) * .2692307692);
  --reel-hero-x: 80.5%;
  --reel-hero-y: 50%;
  --reel-hero-rx: 17vw;
  --reel-hero-ry: 27vh;
  background: none;
  clip-path: var(--opening-film-clip, inset(0));
}

/* A reflected oblique exposure: shade → clear light → shade. Deeper shoulders
   make the clear subject core read as a spotlight across the picture's details.
   The hero mask retains a quarter of the field for text contrast, instead of
   opening a second huge hole that erases the whole cinematic exposure. */
#shade .scene-grade:is([data-grade="0"], [data-grade="1"], [data-grade="2"])::before {
  content: "";
  background: linear-gradient(var(--reel-axis),
    rgb(0 0 0 / var(--reel-near)) 0%,
    rgb(0 0 0 / .52) 15%,
    rgb(0 0 0 / .34) 31%,
    rgb(0 0 0 / .12) 44%,
    transparent 53%,
    rgb(0 0 0 / .10) 65%,
    rgb(0 0 0 / .36) 81%,
    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% 24%, rgb(0 0 0 / .16) 48%, rgb(0 0 0 / .46) 75%, rgb(0 0 0 / .85) 105%, #000 130%),
    radial-gradient(ellipse var(--reel-hero-rx) var(--reel-hero-ry) at var(--reel-hero-x) var(--reel-hero-y),
      rgb(0 0 0 / .25) 0% 24%, rgb(0 0 0 / .38) 48%, rgb(0 0 0 / .68) 78%, #000 115%);
  mask-image:
    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 / .16) 48%, rgb(0 0 0 / .46) 75%, rgb(0 0 0 / .85) 105%, #000 130%),
    radial-gradient(ellipse var(--reel-hero-rx) var(--reel-hero-ry) at var(--reel-hero-x) var(--reel-hero-y),
      rgb(0 0 0 / .25) 0% 24%, rgb(0 0 0 / .38) 48%, rgb(0 0 0 / .68) 78%, #000 115%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* This is the main focus field, not a frame-edge fade: its 24–120% radial
   transition darkens the telescope rim/outer set around the clear cloud core.
   Both layers stay pure black and preserve the native image's sharp detail. */
#shade .scene-grade:is([data-grade="0"], [data-grade="1"], [data-grade="2"])::after {
  content: "";
  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)) 45%,
    rgb(0 0 0 / var(--reel-depth-middle)) 68%,
    rgb(0 0 0 / var(--reel-depth-outer)) 95%,
    rgb(0 0 0 / var(--reel-peripheral)) 120%);
  -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 / .25) 0% 24%, rgb(0 0 0 / .38) 48%, rgb(0 0 0 / .68) 78%, #000 115%);
  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 / .25) 0% 24%, rgb(0 0 0 / .38) 48%, rgb(0 0 0 / .68) 78%, #000 115%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* The same telescope shot keeps its reflected axis on page 02. Its headline
   moves to the upper right (native 1440 center 1013,230), so only that aperture
   moves; the cloud/lens basin remains anchored to the actual shot. */
#shade .scene-grade[data-grade="1"] {
  --reel-near: .71;
  --reel-far: .76;
  --reel-hero-x: 70.35%;
  --reel-hero-y: 25.55%;
  --reel-hero-rx: 22vw;
  --reel-hero-ry: 20vh;
}

/* Compass follows the SW–NE needle with an opposing reflected axis. Its pivot
   is a smaller, slightly elevated light basin than the telescope's seascape. */
#shade .scene-grade[data-grade="2"] {
  --reel-axis: 48deg;
  --reel-near: .72;
  --reel-far: .80;
  --reel-peripheral: .68;
  --reel-depth-middle: .42;
  --reel-depth-outer: .63;
  /* Source pivot retained from the approved 1440px composition: (180,396)
     through a 2496×1404 source box at (-1056,-265.5). */
  --reel-native-x: .4951923076923077;
  --reel-native-y: .4711538461538462;
  --reel-subject-x: calc(100% - var(--reel-film-width, max(min(120vw, 1728px), 100vw, calc(100vh * 1.7777777778))) * .5048076923);
  --reel-subject-y: 44%;
  --reel-subject-rx: calc(var(--reel-film-width, var(--opening-source-width)) * .1615384615);
  --reel-subject-ry: calc(var(--reel-film-height, var(--opening-source-height)) * .25);
  --reel-hero-y: 48%;
  --reel-hero-rx: 19vw;
  --reel-hero-ry: 23vh;
}

/* Mobile fills the viewport with a cover crop. Its subject sits near the
   viewport center, so the light follows that crop rather than the former
   right-aligned native frame. The same broad falloff keeps picture detail. */
@media (max-width: 760px) {
  #shade .scene-grade:is([data-grade="0"], [data-grade="1"], [data-grade="2"]) {
    --reel-axis: 126deg;
    --reel-near: .55;
    --reel-far: .52;
    --reel-peripheral: .46;
    --reel-depth-early: .09;
    --reel-depth-middle: .27;
    --reel-depth-outer: .41;
    --reel-subject-x: 46%;
    --reel-subject-y: 46%;
    --reel-subject-rx: 62vw;
    --reel-subject-ry: 30vh;
    --reel-hero-x: 50%;
    --reel-hero-y: 23%;
    --reel-hero-rx: 44vw;
    --reel-hero-ry: 17vh;
  }
  #shade .scene-grade[data-grade="2"] {
    --reel-axis: 52deg;
    --reel-near: .56;
    --reel-far: .60;
    --reel-peripheral: .50;
    --reel-depth-middle: .29;
    --reel-depth-outer: .45;
    --reel-subject-x: 50%;
    --reel-subject-y: 44%;
    --reel-subject-rx: 60vw;
    --reel-subject-ry: 28vh;
  }
}

/* Landscape keeps the same full-frame crop, with an open subject in the middle
   and a second soft aperture over the left-column headline. */
@media (max-width: 760px) and (max-height: 560px) and (orientation: landscape) {
  #shade .scene-grade:is([data-grade="0"], [data-grade="1"], [data-grade="2"]) {
    --reel-subject-y: 50%;
    --reel-subject-rx: 32vw;
    --reel-subject-ry: 52vh;
    --reel-hero-x: 26%;
    --reel-hero-y: 43%;
    --reel-hero-rx: 25vw;
    --reel-hero-ry: 35vh;
  }
  #shade .scene-grade[data-grade="2"] {
    --reel-subject-y: 46%;
    --reel-subject-rx: 30vw;
    --reel-subject-ry: 49vh;
  }
}