/* =========================================================================
   Ludic Media Studio — v2 Film & Animation + Explainer Videos
   Loaded by v2/film-and-animation.html and v2/explainer-videos.html ONLY,
   after sections.css, audience.css and site.css, via
   V.page(..., css=["css/film.css"]) in their build scripts.

   What lives here (`vf-` classes):
     * the storyboard strip — a film strip of frames, each a crop of one
       drawing, with a playhead that steps from frame to frame;
     * the anatomy of an explainer — an editing timeline: a time ruler, a
       proportional bar of beats with a moving playhead, and a card per beat
       with its words / picture / sound tracks;
     * the comparison table, the film cards under a reel, small fixes.

   Same rules as every stylesheet here: no ID selectors, only the documented
   breakpoints, every var() defined, never white on yellow. Both animations
   are paused by html[data-vx-paused] (the "Pause motion" buttons) and
   stopped by the global prefers-reduced-motion rule in foundation.css.
   ========================================================================= */

:root {
  --vf-film: #1b1b1b;        /* the film base: a shade off black so the strip reads on a black band */
  --vf-hole: var(--line);    /* sprocket holes */
  --vf-loop: 9s;             /* one pass of a playhead */
}

/* ---------- small fixes on black bands ----------------------------------- */
.vf-board-wrap .arrow-link:hover,
.vf-reels-wrap .arrow-link:hover { color: var(--yellow); }
.vf-board-wrap .vx-story__quote footer,
.vf-reels-wrap .vx-story__quote footer { color: var(--white); }
.vf-back { color: var(--yellow); text-decoration: underline; }
.vf-back:hover { color: var(--white); }

/* ---------- the storyboard strip ----------------------------------------- */
.vf-frames {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(14rem, 78%);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-sm);
}
@media (min-width: 48rem) { .vf-frames { grid-auto-columns: minmax(14rem, 38%); } }
@media (min-width: 64rem) {
  .vf-frames { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-lg); overflow: visible; padding-bottom: 0; }
}
.vf-frame { --z: 1; --ox: 50%; --oy: 50%; --i: 0; display: flex; flex-direction: column; scroll-snap-align: start; }
.vf-frame__n {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 0.375rem;
  color: var(--yellow);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.vf-frame__n span + span { color: var(--white); }
/* The film base: the frame sits between two rows of sprocket holes. */
.vf-frame__shot {
  padding: 1.25rem 0.375rem;
  background-color: var(--vf-film);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0.375rem, var(--vf-hole) 0.375rem 0.875rem, transparent 0.875rem 1.25rem),
    repeating-linear-gradient(90deg, transparent 0 0.375rem, var(--vf-hole) 0.375rem 0.875rem, transparent 0.875rem 1.25rem);
  background-size: 100% 0.5rem, 100% 0.5rem;
  background-position: 0 0.375rem, 0 calc(100% - 0.375rem);
  background-repeat: no-repeat;
}
.vf-frame__view { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--white); }
.vf-frame__view img { width: 100%; height: 100%; object-fit: cover; object-position: var(--ox) var(--oy); transform: scale(var(--z)); transform-origin: var(--ox) var(--oy); }
/* The playhead: each frame lights in turn, one sixth of the loop each. */
.vf-frame__view::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 4px solid var(--yellow);
  opacity: 0;
  animation: vf-play var(--vf-loop) steps(1, end) infinite;
  animation-delay: calc(var(--i) * var(--vf-loop) / 6);
}
@keyframes vf-play { 0% { opacity: 1; } 16.66%, 100% { opacity: 0; } }
.vf-frame__text { display: grid; gap: 0.375rem; align-content: start; padding: var(--space-sm) var(--space-sm) 0 0.375rem; }
.vf-frame__title { font-size: var(--text-md); font-weight: 800; line-height: var(--leading-snug); }
.vf-frame__body { font-size: var(--text-sm); line-height: var(--leading-mid); }
.vf-frame__cam { font-size: var(--text-xs); font-weight: 700; line-height: var(--leading-mid); color: var(--yellow); }

.vf-board-foot { display: grid; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 2px solid var(--dark-grey); }
@media (min-width: 64rem) { .vf-board-foot { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: var(--space-xl); } }
.vf-board-foot .vx-story__quote p { font-size: var(--text-md); }
.vf-board-links { display: grid; gap: var(--space-xs); justify-items: start; }
.vf-board-links .arrow-link { font-size: var(--text-base); font-weight: 700; }

/* ---------- the anatomy of an explainer ----------------------------------- */
.vf-anat { margin-bottom: var(--space-lg); }
.vf-ruler {
  position: relative;
  height: 1.625rem;
  margin-bottom: 0.25rem;
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* --t is each mark's place on the clock, set inline by the build. */
.vf-ruler li { --t: 0%; position: absolute; bottom: 0; left: var(--t); padding-bottom: 0.375rem; transform: translateX(-50%); }
.vf-ruler li::after { content: ""; position: absolute; bottom: 0; left: 50%; height: 0.3rem; border-left: 2px solid currentColor; }
.vf-ruler li:first-child { transform: none; }
.vf-ruler li:first-child::after { left: 0; }
.vf-ruler li:last-child { left: auto; right: 0; transform: none; }
.vf-ruler li:last-child::after { left: auto; right: 0; }
.vf-bar { position: relative; border: 3px solid var(--yellow); }
.vf-bar__segs { display: flex; height: 3.25rem; }
.vf-bar__seg {
  --s: 1;
  flex: var(--s) 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.375rem;
  overflow: hidden;
  background: var(--yellow);
  color: var(--black);
  border-right: 2px solid var(--black);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vf-bar__seg:nth-child(even) { background: var(--white); }
.vf-bar__seg:last-child { border-right: 0; }
.vf-bar__n {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--yellow);
  letter-spacing: 0;
}
.vf-bar__label { display: none; }
@media (min-width: 48rem) { .vf-bar__label { display: inline; } }
/* The playhead scrubs the bar from 0:00 to the end, then starts again. */
.vf-bar__head {
  position: absolute;
  top: -0.75rem;
  bottom: -0.75rem;
  left: 0;
  width: 3px;
  margin-left: -1.5px;
  background: var(--vx-cross);
  animation: vf-scrub var(--vf-loop) linear infinite;
}
.vf-bar__head::before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.4375rem;
  border-inline: 0.5rem solid transparent;
  border-top: 0.625rem solid var(--vx-cross);
}
@keyframes vf-scrub { to { left: 100%; } }
.vf-anat__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-top: var(--space-sm); }
.vf-anat__foot .vx-caption { margin-top: 0; }
.vf-anat__foot .vx-motion { margin-top: 0; }

.vf-beats { display: grid; gap: var(--space-lg) var(--space-md); }
@media (min-width: 36rem) { .vf-beats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .vf-beats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); } }
.vf-beat { display: flex; flex-direction: column; gap: 0.625rem; padding-top: var(--space-xs); border-top: 3px solid var(--yellow); }
.vf-beat__time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--yellow);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.vf-beat__time span {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 0;
}
.vf-beat__title { font-size: var(--text-lg); font-weight: 800; line-height: var(--leading-snug); }
.vf-beat__frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid var(--yellow); background: var(--white); }
.vf-tracks { display: grid; margin: 0; border-top: 1px solid var(--dark-grey); }
.vf-track { padding-block: 0.5rem; border-bottom: 1px solid var(--dark-grey); }
.vf-track dt { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); }
.vf-track dd { margin: 0.125rem 0 0; font-size: var(--text-sm); line-height: var(--leading-mid); }

/* ---------- the comparison ------------------------------------------------ */
.vf-vs { display: grid; gap: var(--space-lg); }
@media (min-width: 64rem) { .vf-vs { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-xl); align-items: start; } }
.vf-vs .vx-head { margin-bottom: 0; }
.vf-vs .button-group { margin-top: var(--space-md); }
.vf-cmp-wrap { overflow-x: auto; border: 3px solid var(--black); box-shadow: var(--vx-shadow); background: var(--white); }
.vf-cmp { width: 100%; border-collapse: collapse; }
.vf-cmp th,
.vf-cmp td { padding: 0.875rem var(--space-xs); text-align: left; vertical-align: top; line-height: var(--leading-mid); }
.vf-cmp thead th { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 3px solid var(--black); }
.vf-cmp thead th:first-child { background: var(--black); color: var(--yellow); }
.vf-cmp tbody tr + tr > * { border-top: 1px solid var(--line); }
.vf-cmp tbody th { width: 55%; font-weight: 700; background: var(--cream); }
.vf-cmp tbody td { color: var(--ink-muted); }
.vf-cmp__cell { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.625rem; align-items: start; }
.vf-mark { position: relative; display: block; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; }
.vf-mark--yes { background: var(--yellow); border: 2px solid var(--black); }
.vf-mark--yes::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.05rem;
  width: 0.35rem;
  height: 0.65rem;
  border: solid var(--black);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.vf-mark--no::before,
.vf-mark--no::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.125rem;
  height: 1rem;
  border-left: 2.5px solid var(--vx-cross);
  transform: rotate(45deg);
}
.vf-mark--no::after { transform: rotate(-45deg); }

/* ---------- reels and film cards ------------------------------------------ */
.vf-films { display: grid; gap: var(--space-lg) var(--space-md); margin-top: var(--space-xl); }
@media (min-width: 48rem) { .vf-films { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vf-film { display: grid; gap: var(--space-xs); align-content: start; }
.vf-film .video-frame { border: 3px solid var(--yellow); }
.vf-film .video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf-film .vf-poster--left img { object-position: 0% 50%; }
/* A darker gate than the shared one: these posters are drawings full of
   their own words, and the gate's title has to read over them. */
.vf-reels-wrap .video-frame__gate { background: rgb(0 0 0 / 0.72); }
/* The TechInsights still is wide and its name sits at the left: keep it. */
.v2-cap__media img[src$="tech-explainer-video/thumb.webp"] { object-position: 0% 50%; }
.vf-film__kicker { justify-self: start; padding: 0 0.5rem; background: var(--yellow); color: var(--black); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.vf-film__title { font-size: var(--text-lg); font-weight: 800; line-height: var(--leading-snug); }
.vf-film__body { line-height: var(--leading-mid); }
.vf-film .vx-story__quote { margin-top: 0.25rem; }
.vf-film .vx-story__quote p { font-size: var(--text-base); }