/* ===========================================================================
   15 Oct · Niko's final feedback, the two things every film does.

   1. THE PLAY GLYPH FADES. At rest a frame is its picture; the circle and
      triangle fade in when the pointer is over the frame and fade out when it
      leaves — big frames and small ones alike. Touch devices have no hover, so
      there the glyph stays as it was (always on): a hidden control on a phone
      is a control nobody finds.

   2. A CLICKED FILM GROWS IN PLACE. player.js adds .is-big to the .vframe and
      .has-big to the column, rail item or peak item that holds it, then FLIP-
      animates every block that moved. The target size is the peak's own lead
      frame (.peak__film: 44svh tall at the film's ratio), so a film opened
      anywhere on the page plays at the size The Second Wave does. Frames that
      are already that size (the hero, the three leads) do not grow.
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {
  .vframe__glyph {
    opacity: 0;
    transition: opacity 260ms var(--vf-ease), transform 160ms var(--vf-ease), background-color 160ms var(--vf-ease);
  }
  .vframe__play:hover .vframe__glyph,
  .vframe__play:focus-visible .vframe__glyph { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .vframe__glyph { transition: none; }
}

/* The grown frame spans whatever grid it sits in, capped at the lead size.
   !important on purpose: the flowgrid tile cap and #a8's own max-width are
   layout rules, and this is a state that must win over all of them. */
.vframe.is-big {
  grid-column: 1 / -1;
  width: 100% !important;
  max-width: min(100%, calc(44svh * var(--ar, 1.7778))) !important;
}
/* Its column takes the full row so the frame has room; the neighbours flow
   into the rows that open up. On a one-column phone grid this is a no-op. */
.ecol.has-big { grid-column: 1 / -1; }
.ecols:has(> .has-big) { grid-auto-flow: dense; }
/* In the two horizontal rails the item itself widens; the rail keeps panning. */
.rail > li.has-big,
.peak__more > li.has-big,
#a7 .peak__more > li.has-big { width: min(calc(44svh * 1.7778), 86vw); }
/* The frame keeps its own transform while it is FLIP-animated; the tilt that
   pointer.js writes lives on .vframe__pic underneath and is not touched. */
.vframe.is-big, .has-big { transform-origin: 0 0; }

/* THE WAY BACK. A grown, playing film needs a close that is not Escape:
   once the pointer or the keyboard is inside the Vimeo player, Escape never
   reaches this page. player.js mounts the button with the player and removes
   it with it. Top-LEFT of the frame: Vimeo parks its own like / share
   buttons in the top-right corner of a playing film. */
.vframe__close {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  z-index: 4;
  width: 2.25rem; height: 2.25rem;
  margin: 0; padding: 0;
  border: 1px solid rgba(239,233,221,0.55);
  border-radius: 50%;
  background: rgba(10,9,8,0.72);
  color: #EFE9DD;
  font: 400 1.1rem/1 var(--sc-font-display);
  cursor: pointer;
  display: grid; place-items: center;
  opacity: 0.85;
  transition: opacity 160ms var(--vf-ease), transform 160ms var(--vf-ease);
}
.vframe__close:hover, .vframe__close:focus-visible { opacity: 1; transform: scale(1.06); }
.vframe__close svg { width: 0.9rem; height: 0.9rem; display: block; }
.vframe__close svg path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }