/* No pin at all. Any sticky hold means a stretch where the page scrolls and
   the film does not move, and at the end of the growth curve it is barely
   changing size either — so it reads as the page stopping. Shortening the hold
   only shortened the stall. The film now travels with the page the whole way
   and grows as it rises, so something is always moving. */
.impact-film {
  position: relative;
  padding-top: clamp(4rem, 7vw, 7rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}
.impact-film__media {
  position: relative;
  width: min(80vw, 151svh);
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(36, 28, 44, .12);
  background: #151117;
  box-shadow: 0 1.5rem 4rem rgba(36, 28, 44, .12);
  transform: scale(var(--film-scale, .72));
  transform-origin: center center;
  will-change: transform;
}
.impact-film__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.impact-film__media:not(.is-playing) video { filter: saturate(.88) brightness(.86); }
.impact-film__play {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.impact-film__play span {
  display: grid;
  width: clamp(4.25rem, 6vw, 6.5rem);
  aspect-ratio: 1;
  place-items: center;
  /* An optical nudge, not a centring fix: a triangle's visual centre sits left
     of its bounding box, so it has to be pushed right to look centred in the
     ring. */
  padding-left: .14em;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  background: rgba(20, 12, 26, .3);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .35s ease;
}
/* Drawn, not typed. U+25B6 is rendered as a colour emoji by iOS and Android,
   so the ring held a flat blue-black glyph on a phone instead of a mark in the
   button's own colour. */
.impact-film__play svg {
  width: 34%;
  height: auto;
  fill: currentColor;
}
.impact-film__play:hover span { transform: scale(1.1); background: rgba(20, 12, 26, .66); }
.impact-film__play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.impact-film__media.is-playing .impact-film__play { display: none; }
/* 10% wider and 20% taller, below the desktop widths only.

   On a phone the 80vw 16/9 frame was tiny: 80vw of a 393px screen is 314px
   across and only 177px tall, about a fifth of the screen, so the card barely
   registered before it was tapped. The extra height cannot come from the width,
   so the ratio carries it — (16 x 1.1) / (9 x 1.2) is 44/27. The video is
   object-fit: cover, so a 16/9 source takes a slightly tighter crop down its
   sides in the taller frame.

   Not applied above this width. On a 16/9 desktop the frame is capped by its
   svh term rather than by 80vw, and at that cap a taller ratio can only be a
   narrower box: on 1920x1080 the same change made the card 1404px wide against
   1536px before. Desktop already fills 72-80svh and was not the complaint. */
@media (max-width: 899px) {
  .impact-film__media {
    width: 88vw;
    aspect-ratio: 44 / 27;
  }
}
@media (max-width: 600px) {
  .impact-film { padding-top: 3rem; padding-bottom: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .impact-film { height: auto; }
  .impact-film__media { position: relative; top: auto; transform: none; will-change: auto; }
  .impact-film__play span { transition: none; }
}