/* =========================================================================
   Caption band for the rendered films (walkthrough, social pack, structural pack)
   -------------------------------------------------------------------------
   Each film reserves a strip at the foot of its picture and burns its
   captions into it, and each also ships the same words as a WebVTT track.
   Both of those land in the one place a browser will not leave alone: the
   bottom of the video, where the control bar is drawn. The result was a
   caption printed twice, the second line of a two-line cue sliced in half by
   the bar, the last word under the mute button, and at 352px a strip 27px
   tall sitting entirely behind the bar with nothing readable on screen.

   The control bar is the same height whether the film is 1140px wide or
   352px, so no strip measured as a fraction of the frame can ever clear it.
   The band is taken out of the video instead. The film is cropped to its
   picture - the burned strip is scrolled off the bottom of the box, not
   hidden, so nothing is printed twice - and the cue is drawn underneath the
   player as an ordinary block that the control bar cannot reach. It can be
   one line or three, at any width, and it is never clipped and never
   collides with a control.

   All of it hangs off .has-film-cues, which film-captions.js adds. With
   scripting off nothing is cropped and nothing is moved: the film's own
   burned-in strip is the caption, which is what it is for.
   ========================================================================= */

.film-cues{display:none}

/* =========================================================================
   The film's own play control
   -------------------------------------------------------------------------
   A browser draws its control bar at the foot of the video from the moment the
   element exists. At 352px that is a black slab across a 170px picture with a
   strip of the browser's own chrome under it, in a card whose language is
   nothing like it. film-captions.js takes the controls off, unhides this
   button, and hands the controls back on the press that starts the film, so
   the idle state is a poster tile and every second after it is the real
   player. With scripting off the button stays hidden and the native controls
   in the markup are the ones on screen: there is no path where the film
   cannot be paused.
   ========================================================================= */

.vf-cover{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:linear-gradient(180deg,rgba(15,23,42,.02),rgba(15,23,42,.2));
  font:inherit;
  color:#ffffff;
  text-align:center;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.vf-cover[hidden]{display:none}
.vf-cover:focus-visible{outline:3px solid var(--blue,#0078d4);outline-offset:-4px}
.vf-cover-mark{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  background:var(--blue,#0078d4);
  box-shadow:0 16px 38px rgba(15,23,42,.38);
  transition:transform .18s ease;
}
.vf-cover-mark svg{width:26px;height:26px;margin-left:3px;stroke:#ffffff}
.vf-cover:hover .vf-cover-mark{transform:scale(1.06)}
.vf-cover-label{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--line,rgba(15,23,42,.12));
  background:rgba(255,255,255,.95);
  box-shadow:0 10px 26px rgba(15,23,42,.2);
  color:var(--ink,#182130);
  font-size:12px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.vf-cover-label.is-narrow{display:none}
/* On a wide screen the play mark is the whole control: a pill of words over
   the middle of the poster sat on top of the canvas it is a picture of. The
   words stay in the button as its accessible name. */
.vf-cover-label.is-wide{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:640px){
  .vf-cover{gap:10px}
  .vf-cover-mark{width:50px;height:50px}
  .vf-cover-mark svg{width:21px;height:21px}
  .vf-cover-label{padding:5px 12px;font-size:11px;letter-spacing:.05em}
  .vf-cover-label.is-wide{display:none}
  .vf-cover-label.is-narrow{display:inline-block}
}
@media(prefers-reduced-motion:reduce){.vf-cover-mark{transition:none}}

/* The strip under the frame on a phone. The film is a 16:9 composition and a
   352px column cannot hold it at a readable size, so rather than shipping a
   player the page's own copy calls a smudge, the narrow layout offers a poster
   tile, a control that asks for full screen, and this line saying what to do
   with it. It is off above 640px, where the film is simply watchable. */
.vf-wide-note{display:none}
@media(max-width:640px){
  .vf-wide-note{
    display:block;
    margin:0;
    padding:11px 14px;
    border-top:1px solid var(--line);
    background:rgba(240,244,249,.55);
    color:var(--muted,#42597a);
    font-size:12.5px;
    line-height:1.5;
    text-wrap:pretty;
  }
}

.vf-stage.has-film-cues{aspect-ratio:auto;background:transparent}

/* 1600 x 775 is the film's picture once its 125px caption strip is taken off
   the 1600 x 900 render. object-position pins the top edge, so the crop only
   ever takes the strip. */
.vf-stage.has-film-cues .vf-video{
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  aspect-ratio:64/31;
  object-fit:cover;
  object-position:center top;
  background:#e9eef6;
}

/* Collapsed until a cue is actually up. A band that reserves its height whether
   or not there is anything in it is a dead black bar under every film nobody
   has pressed play on yet, and another one over the end card once the last cue
   has gone. film-captions.js adds .has-cue when it writes text in and takes it
   off a beat after the text empties, so the gaps between cues inside a running
   film never flicker the band away and back. */
.vf-stage.has-film-cues .film-cues{
  display:none;
  align-items:center;
  justify-content:center;
  /* Two lines plus the padding, so the ordinary cue never resizes the frame
     as it comes and goes. The rare three-line cue grows it once. */
  min-height:4.1em;
  padding:12px 5%;
  background:#21222c;
  border-top:1px solid rgba(255,255,255,.12);
  color:#f8f8f2;
  font-size:clamp(12.5px,1.2vw,18px);
  font-weight:650;
  line-height:1.34;
  text-align:center;
  text-wrap:pretty;
}

.vf-stage.has-film-cues .film-cues.has-cue{display:flex}

.vf-stage.has-film-cues .film-cues span{display:block;max-width:100%}

/* Belt and braces: the script keeps the track in `hidden` mode, but a visitor
   who turns captions on from the control bar would otherwise get the
   browser's own layer back, over the picture this time. */
.vf-stage.has-film-cues .vf-video::cue{color:transparent;background-color:transparent;text-shadow:none}

/* Full screen is the one place the crop has to come off. The page's caption
   band is not inside the element the browser promotes, so a cropped film there
   would lose the burned strip as well and play with no captions at all. Let go
   of the crop and the film is what was rendered: picture, caption strip and
   all. Two rules rather than one selector list, because a browser that does not
   know one of these prefixes drops the whole list. */
.vf-stage.has-film-cues .vf-video:fullscreen{
  aspect-ratio:auto;width:100%;height:100%;object-fit:contain;object-position:center;background:#12141c;
}
.vf-stage.has-film-cues .vf-video:-webkit-full-screen{
  aspect-ratio:auto;width:100%;height:100%;object-fit:contain;object-position:center;background:#12141c;
}

@media(max-width:640px){
  .vf-stage.has-film-cues .film-cues{padding:10px 4%;font-size:12.5px;min-height:5.6em}
}

/* The still band, and the line that says what the film is doing on a phone at
   all. Below 640px the stage moves under three stills cropped from the same
   render, because a 1600 x 900 film in a 352px column cannot be read; saying so
   is better than leaving a visitor to squint at it and conclude the product is
   a blur. Every page that carries a film carries this: the home walkthrough and
   both pack films, which at 390 were two unreadable players and no proof.

   The crops live beside the mp4 they came out of and are written into the page
   by renderStills() in apps/web/scripts/demo-reels.mjs. */
.demo-stills{display:none}
@media(max-width:640px){
  .demo-stills{order:1;display:grid;gap:14px;margin:30px 0 0;padding:0;list-style:none}
  .demo-stills li{margin:0;border:1px solid var(--line-strong);border-radius:14px;background:#ffffff;overflow:hidden;box-shadow:0 18px 44px rgba(15,23,42,.12)}
  .demo-stills img{display:block;width:100%;height:auto}
  .demo-stills p{margin:0;padding:11px 13px;border-top:1px solid var(--line);background:rgba(240,244,249,.55);color:var(--muted);font-size:13px;line-height:1.5}
}
.demo-stills-note{display:none}
@media(max-width:640px){
  .demo-stills-note{
    display:block;
    order:1;
    margin:14px 0 0;
    color:var(--muted,#42597a);
    font-size:12.5px;
    line-height:1.55;
    text-wrap:pretty;
  }
  /* On /packs the figure follows the note directly, with no flex order to put
     air between them. On the home page the figure is the first child of
     #homeDemoStage and this never matches. */
  .demo-stills-note + .video-frame{margin-top:26px}
}

html[data-site-theme="dark"] .vf-cover{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
html[data-site-theme="dark"] .vf-cover-mark{border-color:rgba(255,255,255,.3);box-shadow:0 16px 38px rgba(0,0,0,.55)}
html[data-site-theme="dark"] .vf-cover-mark svg{stroke:var(--on-blue,#06111c)}
html[data-site-theme="dark"] .vf-cover-label{background:rgba(14,21,36,.95);border-color:rgba(148,178,220,.2);box-shadow:0 10px 26px rgba(0,0,0,.55)}
html[data-site-theme="dark"] .vf-stage.has-film-cues .vf-video{background:#0b111e}
html[data-site-theme="dark"] .vf-stage.has-film-cues .film-cues{background:#141d30;border-top-color:rgba(148,178,220,.16);color:var(--ink)}
html[data-site-theme="dark"] .vf-wide-note{background:#0b111e}
html[data-site-theme="dark"] .demo-stills li{border-color:rgba(148,178,220,.16);background:#0e1524;box-shadow:0 18px 44px rgba(0,0,0,.5)}
html[data-site-theme="dark"] .demo-stills img{border-bottom:1px solid rgba(148,178,220,.14);filter:brightness(.72) saturate(.9)}
html[data-site-theme="dark"] .demo-stills p{background:#0b111e}