/* the film section (app/film.js, Rob 2026-10-14 "A2"): the 60 s CardSigner film as a normal muted video, between
   "Create. Save. Load." and "Sign by QR code.". It runs the full width (it takes the page margins back): 16:9 as large
   as 84 % of the view's height allows, 9:16 on a phone held upright (film.js adds .film-tall) */
.ch-film { display: block; max-width: none; min-height: 0; padding: calc(10 * var(--svh, 1svh)) 0;
  margin: 0 calc(-1 * clamp(24px, 7vw, 120px)); }
.film-box { position: relative; margin: 0 auto; width: min(100%, calc(84 * var(--svh, 1svh) * 16 / 9)); aspect-ratio: 16 / 9; }
.film-tall .film-box { width: min(100%, calc(88 * var(--svh, 1svh) * 9 / 16)); aspect-ratio: 9 / 16; }
/* no edge: the film's black lies on this section's black (below); the sides beyond the film's central square fade
   out (a smoothstep), never the band where its text sits (the central 1215 px of the 2160 master) */
.film-v { display: block; width: 100%; height: 100%; object-fit: cover; background: #000;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .156) 2%, rgb(0 0 0 / .5) 4%, rgb(0 0 0 / .844) 6%, #000 8%, #000 92%, rgb(0 0 0 / .844) 94%, rgb(0 0 0 / .5) 96%, rgb(0 0 0 / .156) 98%, rgb(0 0 0 / 0) 100%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .156) 2%, rgb(0 0 0 / .5) 4%, rgb(0 0 0 / .844) 6%, #000 8%, #000 92%, rgb(0 0 0 / .844) 94%, rgb(0 0 0 / .5) 96%, rgb(0 0 0 / .156) 98%, rgb(0 0 0 / 0) 100%); }
.film-tall .film-v {
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .156) 2%, rgb(0 0 0 / .5) 4%, rgb(0 0 0 / .844) 6%, #000 8%, #000 92%, rgb(0 0 0 / .844) 94%, rgb(0 0 0 / .5) 96%, rgb(0 0 0 / .156) 98%, rgb(0 0 0 / 0) 100%);
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .156) 2%, rgb(0 0 0 / .5) 4%, rgb(0 0 0 / .844) 6%, #000 8%, #000 92%, rgb(0 0 0 / .844) 94%, rgb(0 0 0 / .5) 96%, rgb(0 0 0 / .156) 98%, rgb(0 0 0 / 0) 100%); }
/* the pause button: small, in the film's lower right corner, the page's own grey */
.film-pp { position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0;
  background: rgb(0 0 0 / .45); box-shadow: inset 0 0 0 1px rgb(242 242 244 / .28); cursor: pointer; }
.film-pp:hover { box-shadow: inset 0 0 0 1px rgb(242 242 244 / .6); }
.film-pp:focus-visible { outline: 2px solid #f2f2f4; outline-offset: 2px; }
.film-pp::before, .film-pp::after { content: ''; position: absolute; top: 12px; height: 12px; background: #c8c8cc; }
.film-pp[data-state="playing"]::before { left: 13px; width: 3px; }
.film-pp[data-state="playing"]::after { left: 20px; width: 3px; }
.film-pp[data-state="paused"]::before { left: 14px; width: 0; height: 0; top: 11px; background: none;
  border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #c8c8cc; }
.film-pp[data-state="paused"]::after { content: none; }
/* the page under this section is black, so the film's black lies on the same black: this section's area
   (scrollbg.css) is black over the section and fades out over calc(45 * var(--svh, 1svh)) above and below it, like
   every area (a smoothstep), under the grain like every area */
.story > .ch-film::before {
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0, rgb(0 0 0 / .043) calc(5.625 * var(--svh, 1svh)), rgb(0 0 0 / .156) calc(11.25 * var(--svh, 1svh)),
    rgb(0 0 0 / .316) calc(16.875 * var(--svh, 1svh)), rgb(0 0 0 / .5) calc(22.5 * var(--svh, 1svh)), rgb(0 0 0 / .684) calc(28.125 * var(--svh, 1svh)),
    rgb(0 0 0 / .844) calc(33.75 * var(--svh, 1svh)), rgb(0 0 0 / .957) calc(39.375 * var(--svh, 1svh)), #000 calc(45 * var(--svh, 1svh)),
    #000 calc(100% - 45 * var(--svh, 1svh)), rgb(0 0 0 / .957) calc(100% - 39.375 * var(--svh, 1svh)), rgb(0 0 0 / .844) calc(100% - 33.75 * var(--svh, 1svh)),
    rgb(0 0 0 / .684) calc(100% - 28.125 * var(--svh, 1svh)), rgb(0 0 0 / .5) calc(100% - 22.5 * var(--svh, 1svh)), rgb(0 0 0 / .316) calc(100% - 16.875 * var(--svh, 1svh)),
    rgb(0 0 0 / .156) calc(100% - 11.25 * var(--svh, 1svh)), rgb(0 0 0 / .043) calc(100% - 5.625 * var(--svh, 1svh)), rgb(0 0 0 / 0) 100%);
}