/* ============================================================================
   500x — THE HALL · the film
   ----------------------------------------------------------------------------
   With motion, hall-film.js lifts the poster still and the lights into the
   film's pin, draws the film on one canvas beneath them, and keeps the words
   in the DOM for assistive tech only. Before that script runs, the opening is
   the poster over the whole viewport (the film's first frame, no words), so
   the swap is invisible. Without JavaScript, with reduced motion, or with no
   film to play, #hall is simply the page: the four carved arches with their
   names, then the headline.
   Spec: docs/superpowers/specs/2026-09-17-homepage-film-design.md
   ========================================================================== */

#film { position: relative; z-index: 3; }

/* ---------------------------------------------------------------- in the pin */
/* The words stay for screen readers and search; the film shows them carved. */
.hall.is-film,
.hall.is-film .hl-headline,
.hall.is-film .hl-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hall.is-film .hl-arch img,
.hall.is-film .hl-headline img { display: none; }   /* never fetched in film mode */

.mv-pin .hf-canvas,
.mv-pin .hl-still,
.mv-pin .hl-lights,
.mv-pin .hl-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
/* --hf-pan and --hf-zoom are a contract, not decoration: anything drawing over this
   pin may move the film's own frame under it (assets/js/hall-row.js pans the hall
   behind the statue row on a narrow screen). Unset, they are the identity. */
.mv-pin .hf-canvas {
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  transform: translate3d(var(--hf-pan, 0px), 0, 0) scale(var(--hf-zoom, 1));
  will-change: transform;
}
.mv-pin .hl-still { z-index: 2; }
.mv-pin .hl-lights { z-index: 3; }
.mv-pin .hl-dust { z-index: 4; }

/* The poster: the same cover fit as the canvas draws. */
.mv-pin .hl-still img,
.mv-pin .hl-still picture {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Lights add to the film below them. */
.mv-pin .hl-light {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: opacity;
}
.mv-pin .hl-light--breath {
  background: radial-gradient(ellipse 70% 60% at 22% 18%, rgba(255, 228, 180, 0.06), rgba(255, 228, 180, 0) 70%);
}
.mv-pin .hl-light--beams {
  background: repeating-linear-gradient(118deg, rgba(255, 236, 200, 0) 0 7%, rgba(255, 236, 200, 0.16) 9% 12%,
                                        rgba(255, 236, 200, 0) 15% 24%);
  filter: blur(14px);
}

/* The engine's grain is overlay-blended, which redraws the whole scene
   beneath it every frame. In the hall it is laid on plainly, a touch fainter. */
.mv-pin .mv-grain { mix-blend-mode: normal; opacity: calc(var(--grain, 0.08) * 0.45); }

/* ------------------------------------------------ before hall-film.js has run */
@media (prefers-reduced-motion: no-preference) {
  .js .hall:not(.is-film) { position: relative; height: 100vh; overflow: hidden; background: #0b0907; }
  .js .hall:not(.is-film) .hl-still { position: absolute; inset: 0; }
  .js .hall:not(.is-film) .hl-still picture,
  .js .hall:not(.is-film) .hl-still img {
    display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%;
  }
  .js .hall:not(.is-film) .hl-headline,
  .js .hall:not(.is-film) .hl-arches,
  .js .hall:not(.is-film) .hl-lights { display: none; }
  /* No film after all (hall-film.js gave up): the page as authored. */
  .js .hall.is-static { height: auto; overflow: visible; }
  .js .hall.is-static .hl-still { display: none; }
  .js .hall.is-static .hl-arches { display: grid; }
  .js .hall.is-static .hl-headline { display: block; }
}

/* ------------------------------------- no JavaScript, or reduced motion */
@media (prefers-reduced-motion: reduce) {
  #film .mv { display: none; }
  .hall:not(.is-film) .hl-still { display: none; }
}
html:not(.js) .hall .hl-still { display: none; }
html:not(.js) .hall,
.hall:not(.is-film) {
  display: flex;
  flex-direction: column;
  background: #0b0907;
  color: #f6f1e7;
}
html:not(.js) .hall .hl-arches,
.hall:not(.is-film) .hl-arches { order: 1; }
html:not(.js) .hall .hl-headline,
.hall:not(.is-film) .hl-headline { order: 2; }
.hall:not(.is-film) .hl-lights { display: none; }
.hall:not(.is-film) .hl-arches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 48px 32px;
  margin: 0;
  /* Clear of the fixed overlay nav (about 68 px): this is the top of the page in static mode,
     and at 72 px the first row of arches ran under the logo. */
  padding: 124px 6vw 0;
  list-style: none;
}
.hall:not(.is-film) .hl-arch { margin: 0; text-align: center; }
.hall:not(.is-film) .hl-arch img { display: block; width: 100%; height: auto; }
.hall:not(.is-film) .hl-name {
  margin: 18px 0 0;
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e9dfcb;
}
.hall:not(.is-film) .hl-headline {
  margin: 0;
  padding: 72px 6vw 120px;
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 54px);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #efe6d4;
}
.hall:not(.is-film) .hl-headline .hl-line { display: block; }
/* The last beat of the film, as a picture: the words carved in the frieze over the lit door.
   The h1's own text stays under it, so the heading is still text to a reader and to a crawler. */
.hall:not(.is-film) .hl-headline img {
  display: block;
  width: 100%;
  max-width: 1280px;
  height: auto;
  margin: 0 auto 36px;
}