/* The brand film card, click to play: the homepage founders section and /about.
   Loaded with pages/film.js on those two pages, after site.css, which draws the
   card itself (.film, .film-top, .film-play, .film-foot). This adds the poster
   behind the card's text, a real play button, and the Vimeo player that
   film.js puts in the poster's place. Nothing loads from Vimeo until someone
   presses play. Colors are the brand tokens only. */

.film { position: relative; isolation: isolate; }
.film-poster {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
}
/* The Espresso shade over the poster: heavier under the label at the top and the
   quote at the bottom, lighter around the play button */
.film::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(27, 23, 20, .82) 0%, rgba(27, 23, 20, .4) 22%, rgba(27, 23, 20, .35) 50%, rgba(27, 23, 20, .92) 100%);
}

/* The play button (site.css draws the Cream disc and the triangle) */
button.film-play {
  margin: 0; padding: 0; border: 0; cursor: pointer; font: inherit;
  transition: transform .2s ease;
}
button.film-play:hover { transform: scale(1.06); }
button.film-play:focus-visible { outline: 3px solid var(--drd-cream); outline-offset: 5px; }

/* "Watch the film": a link to Vimeo without JavaScript, the same play with it.
   The padding gives it a 44 px tap target without moving the type. */
.film-cta a {
  display: inline-block; padding-block: 13px; margin-block: -13px;
  color: inherit; text-decoration: none;
}
.film-cta a:hover { text-decoration: underline; text-decoration-color: var(--drd-bronze-light); text-underline-offset: 4px; }
.film-cta a:focus-visible { outline: 2px solid var(--drd-cream); outline-offset: 2px; }

/* Playing: the card keeps its size and the film sits in it, 4:3, on Espresso */
.film.is-playing { padding: 0; container-type: size; }
.film.is-playing::after { display: none; }
.film.is-playing > :not(.film-player) { display: none; }
.film-player {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--drd-espresso);
}
.film-player iframe { display: block; width: 100%; height: 100%; border: 0; }
@supports (width: 1cqw) {
  .film-player iframe { width: min(100cqw, 133.333cqh); height: min(75cqw, 100cqh); }
}

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