/* ============================================================
   padsplit-films.css · the PadSplit case study's films
   JasonWalker.design · work/padsplit-case-study.html (with padsplit-films.js)

   THE HERO. The Alan film without sound, whole, at its own aspect on
   black: the separately composed 9:16 edit on a portrait screen 720 px
   wide or less (the homepage's breakpoint), the 16:9 cut everywhere
   else, including a small phone turned on its side, where the 9:16 edit
   would be a sliver. padsplit-films.js makes the same choice. The frame
   is sized from the viewport before the film loads, so nothing moves
   when it arrives: it fills the width, or the first screen under the
   navigation when that is shorter, and never crops, stretches or fills
   the sides with anything but black.

   THE FILMS WITH SOUND. One player in the reading column. The version
   names above it, "Watch with sound" beside them, the browser's own
   controls on the film for playback, seeking, volume and fullscreen.
   ============================================================ */

/* ---- the hero ------------------------------------------------------------ */
.psf-hero{--psf-nav:64px;position:relative;display:flex;justify-content:center;background:#000}
@media (max-width:780px){.psf-hero{--psf-nav:58px}}
.psf-hero__frame{position:relative;background:#000;aspect-ratio:16 / 9;
  width:min(100%, calc((100vh - var(--psf-nav)) * 16 / 9))}
@supports (height:100svh){.psf-hero__frame{width:min(100%, calc((100svh - var(--psf-nav)) * 16 / 9))}}
@media (max-width:720px) and (orientation:portrait){
  .psf-hero__frame{aspect-ratio:9 / 16;width:min(100%, calc((100vh - var(--psf-nav)) * 9 / 16))}
  @supports (height:100svh){.psf-hero__frame{width:min(100%, calc((100svh - var(--psf-nav)) * 9 / 16))}}
}
.psf-hero__film,.psf-hero__still{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#000}
.psf-hero__still img{width:100%;height:100%;object-fit:contain}

/* one discreet control: an icon while the film plays, "Play" beside the icon when it is paused */
.psf-toggle{position:absolute;right:clamp(10px,1.3vw,18px);bottom:clamp(10px,1.3vw,18px);z-index:2;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-width:40px;padding:0 15px 0 13px;
  border:1px solid rgba(255,255,255,.34);border-radius:999px;background:rgba(8,10,14,.46);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;cursor:pointer;
  font-family:var(--font-system);font-weight:500;font-size:14px;line-height:1;letter-spacing:.01em;
  opacity:.8;transition:opacity .2s,background-color .2s,border-color .2s}
.psf-toggle[hidden],.psf-watch[hidden],.psf-screen video[hidden],.psf-player[hidden]{display:none}
.psf-toggle:hover{opacity:1;background:rgba(8,10,14,.72);border-color:rgba(255,255,255,.8)}
.psf-toggle:focus-visible{opacity:1;outline:2px solid var(--ps-tulip,#ECBC3E);outline-offset:3px}
.psf-toggle svg{width:12px;height:12px;flex:none;fill:currentColor}
.psf-toggle .psf-ic--play{display:none}
.psf-toggle[data-state="paused"] .psf-ic--pause{display:none}
.psf-toggle[data-state="paused"] .psf-ic--play{display:block}
.psf-toggle__t{display:none}
.psf-toggle[data-state="paused"] .psf-toggle__t{display:inline}
.psf-toggle[data-state="playing"],.psf-toggle[data-state="starting"]{width:40px;padding:0}
@media (pointer:coarse){.psf-toggle{height:44px;min-width:44px}.psf-toggle[data-state="playing"],.psf-toggle[data-state="starting"]{width:44px}}
/* a paused or refused film can also be started from the picture itself */
.psf-hero[data-state="paused"] .psf-hero__frame{cursor:pointer}

/* ---- the films with sound -------------------------------------------------- */
.glance-sec.psf-films{border-top:0;padding-top:clamp(40px,5vw,72px)}
.psf-player{margin:clamp(28px,3.6vw,44px) 0 0}
.psf-player__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin:0 0 16px}
.psf-versions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.psf-versions__list{display:inline-flex;flex-wrap:wrap;gap:8px}
.psf-versions__k{font-family:var(--font-system);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 8px 0 0}
.psf-version{display:inline-flex;align-items:center;min-height:40px;padding:0 19px;border:1px solid var(--line-2,rgba(23,26,29,.28));border-radius:100px;
  background:transparent;color:var(--ink);font-family:var(--font-system);font-weight:500;font-size:15px;letter-spacing:.01em;line-height:1}
button.psf-version{cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
button.psf-version:hover{border-color:var(--ink)}
button.psf-version[aria-pressed="true"],.psf-version--only{border-color:var(--ink);background:var(--ink);color:var(--paper,#F7F6F1)}
.psf-version:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ps-protocta.psf-watch{margin:0;border:0;cursor:pointer;padding:13px 24px}
.psf-watch svg{width:12px;height:12px;fill:currentColor;flex:none}
.psf-watch:focus-visible{outline:3px solid var(--ps-tulip,#ECBC3E);outline-offset:3px}

.psf-screen{position:relative;background:#000;aspect-ratio:16 / 9;width:min(100%, calc((100vh - 64px - 40px) * 16 / 9))}
@supports (height:100svh){.psf-screen{width:min(100%, calc((100svh - 64px - 40px) * 16 / 9))}}
@media (max-width:720px) and (orientation:portrait){
  .psf-screen{aspect-ratio:9 / 16;margin:0 auto;width:min(100%, calc((100vh - 58px - 24px) * 9 / 16))}
  @supports (height:100svh){.psf-screen{width:min(100%, calc((100svh - 58px - 24px) * 9 / 16))}}
  .psf-player__bar{gap:14px}
  .ps-protocta.psf-watch{width:100%;justify-content:center}
}
.psf-screen video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#000}

@media (prefers-reduced-motion:reduce){.psf-toggle,button.psf-version{transition:none}}