/* The film: from the field to the door (DESIGN.md §15). Tokens: site.css.
   As written it is a still: the field, then the film's words beneath it, in normal flow. Where the
   film can run it takes the film's own layout from the first paint (the media query below, which is
   the same one assets/js/film.js asks), so nothing shifts when the script starts. Every duration,
   ease and distance of the film is in film.js; nothing here moves. */
.film {
  --fs-film: 3.125rem;        /* 50: the film's words, one step of the 1.25 ramp above the hero */
  position: relative;
  background: var(--night);
  color: var(--night-text);
}
.film__frame {
  position: relative;
  overflow: hidden;
  width: 100%;               /* always the page's full width: where the height is capped the picture is cropped, never shrunk to one side */
  aspect-ratio: 16 / 9;
  max-height: calc(100dvh - var(--header-h) - var(--s-10));   /* the words stay on the first screen */
  container-type: size;      /* its layers are sized in its own units (picture space, below) */
}
.film__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film__shots { display: none; }
.film__words {
  padding: var(--s-6) var(--gutter);
  font-size: var(--fs-title);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  text-align: center;
  text-wrap: balance;
}

/* The bayaan: the FMB office's own poster, on its own white ground, never drawn larger than it was
   published (731px). In the still it follows the words. */
.film__bayaan {
  max-width: calc(731px + 2 * var(--s-4));
  margin: 0 auto var(--s-7);
  padding: var(--s-4);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-small);
  text-align: center;
}
.film__bayaan img { display: block; width: 100%; height: auto; }
.film__bayaan figcaption { margin-top: var(--s-3); }

/* The film's layout: the stage held under the masthead over a long track and filled by the
   picture, the words beside the tawa where the wood is dark and bare. "still" is the script's word
   that the film could not start. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .film:not([data-film-state="still"]) .film__track { height: calc((100dvh - var(--header-h)) * var(--film-screens, 1)); }
  .film:not([data-film-state="still"]) .film__stage {
    position: sticky;
    top: var(--header-h);
    height: calc(100dvh - var(--header-h));
  }
  .film:not([data-film-state="still"]) .film__frame { height: 100%; aspect-ratio: auto; max-height: none; }
  /* The words stand at the left, mid-height, on their own shade of night that fades into the
     picture, so they read over any picture and the shade comes and goes with them. No transform
     places them: the film owns transform and opacity. */
  .film:not([data-film-state="still"]) .film__words {
    position: absolute;
    inset: 0 auto 0 0;
    display: flex;
    align-items: center;
    width: 36%;
    padding: 0 0 0 var(--gutter);
    background: linear-gradient(to right, color-mix(in srgb, var(--night) 64%, transparent), transparent);
    font-size: var(--fs-film);
    text-align: left;
    opacity: 0;                    /* until the film brings them in */
  }
  .film:not([data-film-state="still"]) .film__words span { max-width: 6em; }    /* two lines: Mohabbat / ni roti */
  /* The bayaan stands at the left of the door, mid-height, clear of the door, the lamp and the thali
     on the step. Auto margins centre it: no transform, as with the words. */
  .film:not([data-film-state="still"]) .film__bayaan {
    position: absolute;
    inset: 0 auto 0 var(--gutter);
    width: min(calc(731px + 2 * var(--s-4)), 43%);      /* wide enough to read its small lines; the film moves the door aside for it */
    height: fit-content;
    margin: auto 0;
    opacity: 0;                    /* until the film brings it in */
  }
  .film[data-film-state="live"] .film__shots { display: block; }
}
@media (min-width: 1600px) {
  .film { --fs-film: 3.90625rem; }      /* 62.5, the next step, where the wood beside the tawa is wide enough */
}

.film__shot { position: absolute; inset: 0; }
/* Picture space: every layer, and the grains that belong to a picture, is a 16:9 box as large as
   covers the frame and centred on it, exactly where object-fit lays the poster. So the film can move
   a layer by a share of the picture itself, on any screen. It is placed with the frame's own units
   and no transform, because the film owns every transform. */
.film__layer, .film__grains {
  position: absolute;
  left: calc((100cqw - max(100cqw, 100cqh * 16 / 9)) / 2);
  top: calc((100cqh - max(100cqh, 100cqw * 9 / 16)) / 2);
  display: block;
  width: max(100cqw, 100cqh * 16 / 9);
  height: max(100cqh, 100cqw * 9 / 16);
}
/* Depth from one picture: the field's near layer is the same picture, kept only where the wheat is
   nearest the camera and faded out above. At rest it lies exactly over the picture; the film grows
   it faster. */
[data-shot="field"] [data-layer="near"] { mask-image: linear-gradient(to top, black 24%, transparent 40%); }
.film__grains img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--s-4);
  height: var(--s-6);
  margin: calc(var(--s-6) / -2) 0 0 calc(var(--s-4) / -2);
  opacity: 0;
}