/* Film blocks. Loaded by the generated marketing pages via <link> and by the
   SPA via ensureStylesheet('/css/film-player.css'), so both surfaces share one
   definition rather than drifting apart.

   marketing.css has no --space-* / --radius-* scale (spacing and radius are
   literal px throughout that file — see e.g. .section-header's 48px margin
   and .use-card's 16px radius), so the values below are literal px rather
   than tokens, matching that convention.

   Colour stays token-only, and every colour reads through a two-name chain,
   because the two surfaces do not share a vocabulary: marketing.css defines
   --ink-900 / --ink-500, while the SPA never loads marketing.css and defines
   --color-ink-900 / --color-ink-500 instead. Every one of those inverts
   between light and dark, so none of them can be replaced with a hex
   literal. --action-surface happens to exist on both, so the play control
   needs no chain. */
.film-block {
  margin: 48px auto;
  max-width: 960px;
}

.film-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  /* Two surfaces, two token vocabularies: the generated marketing pages load
     marketing.css (--ink-900); the SPA homepage never loads it and uses
     --color-ink-900. Without this chain the stage has no backdrop on the
     homepage -- caught on the preview, where it computed to transparent and
     only looked right because the page behind it happens to be dark. Both
     tokens invert between light and dark, so neither can be a hex literal. */
  background: var(--ink-900, var(--color-ink-900, transparent));
}

.film-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Centred, not bottom-anchored. These films burn their own captions along the
   bottom of the frame, so a control sitting there lands directly on the words
   — caught on /pricing, where "Play" covered "Maya's at lunch". The centre is
   also where a viewer looks for a play affordance.

   Styled from the marketing surface's own action tokens rather than reusing
   .al-btn: that system inks its dot from dot-engine.js, which these pages do
   not load. */
.film-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  /* stylelint-disable-next-line color-no-hex -- white on --action-surface, the
     same pairing .cta-button uses. --action-surface is a dark green in BOTH
     themes, so this one is genuinely not theme-dependent; --paper would be
     wrong here because it inverts to near-black in dark mode. */
  color: #FFF;
  background: var(--action-surface);
  border: none;
  border-radius: 999px;
  padding: 14px 26px 14px 20px;
  cursor: pointer;
  box-shadow: 0 6px 24px var(--action-glow);
  transition: background 160ms ease, transform 160ms ease;
}

.film-play:hover {
  background: var(--action-surface-hover);
  transform: scale(1.03);
}

.film-play:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
}

.film-play-glyph {
  width: 20px;
  height: 20px;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .film-play { transition: none; }
  .film-play:hover { transform: none; }
}

.film--playing .film-play {
  display: none;
}

.film-caption {
  margin-top: 12px;
  /* Same two-vocabulary problem as .film-stage above. */
  color: var(--ink-500, var(--color-ink-500, inherit));
  font-size: 14px;
}