/* =====================================================================
   CUTSCENE — PLAY PAGE  (v5)
   The film is as wide as the window (edge to edge by default), and only
   as tall as can be seen whole under the header. Category and role sit
   above it; the time, scrub and buttons sit right under it, then the
   title. The whole block is centred when it fits. When it doesn't (a
   16:9 film on a laptop), the film keeps its full size, the controls
   stay pinned to the bottom of the window over the picture, and the
   title is a short scroll below.

   Credits rise from the bottom: the film glides up and shrinks just
   enough, still playing, and the list opens underneath. Nothing ever
   sits on the picture.

   Prev / Next: a quick dissolve to the next film instead of the frame
   visibly growing or shrinking.

   Layout numbers are worked out in js/play.js (layout()).
   ===================================================================== */

:root{
  --play-vw: 100;                      /* film never wider than this % of window */
  --play-side: 0px;                    /* side margin around the film (0 = edge to edge) */
  --play-top-gap: 14px;                /* header -> category/role labels       */
  --play-bottom: 18px;                 /* bottom of the block -> window edge   */
  --play-valign: .5;                   /* spare height: 0 = block high, .5 = centred, 1 = low */
  --play-ui-idle: 2400ms;              /* controls hide after this, playing    */
  --play-enter: 950ms;                 /* film growing out of the frame        */
  --play-morph: 850ms;                 /* film making room for the credits     */
  --play-switch: 320ms;                /* PREV / NEXT dissolve, each way       */
  --play-ease: cubic-bezier(.77, 0, .18, 1);
  --pn-title-size: 18px;               /* PREV / NEXT titles                   */
  --credits-h: 20;                     /* credits: max height, % of window (short lists take less) */
  --credits-gap: 26px;                 /* controls -> credits                  */
  --credit-size: 14px;
  --credit-weight: 300;
  --credits-cols: 190px;               /* narrowest a credit cell gets         */
}

/* The header spans the full width; only its logo and menu take clicks */
.site-head{ pointer-events: none; }
.site-head > *{ pointer-events: auto; }

/* While a film is open the home strip steps back (the menu stays) */
.stage{ transition: opacity .45s ease; }
.app.is-playing .stage{ opacity: 0; pointer-events: none; }
/* scrolled down the Play page: the header gets a soft dark band */
.site-head::before{
  content: "";
  position: absolute;
  inset: 0 0 -34px;
  z-index: -1;
  background: linear-gradient(rgb(11 11 10 / .94) 55%, rgb(11 11 10 / 0));
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.app.play-scrolled .site-head::before{ opacity: 1; }

.play{
  --play-ratio: 1.7778;                /* set per film by js/play.js */
  position: absolute;
  inset: 0;
  z-index: 4;                          /* under the header (5) */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  --fx: 0px; --fy: 0px; --fw: 100px; --fh: 56px;
  --inset: max(0px, calc(var(--gutter) - var(--play-side-px, 0px)));
}
.play::-webkit-scrollbar{ display: none; }
.play[hidden]{ display: none; }
.play-probe{ position: absolute; visibility: hidden; height: 0; pointer-events: none; }

/* Everything that isn't the film fades in after it lands */
.play-fade{
  transition: opacity .5s ease, translate .6s cubic-bezier(.16, 1, .3, 1);
}
.play:not(.is-ready) .play-fade{ opacity: 0 !important; translate: 0 8px; }
.play.is-ready .play-fade{ transition-delay: var(--d, 0ms); }

/* ---- The block: labels, film, controls, title — placed by js/play.js ---- */
.play-unit{
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: var(--fw);
  transition: left var(--play-morph) var(--play-ease),
              top var(--play-morph) var(--play-ease),
              width var(--play-morph) var(--play-ease),
              opacity var(--play-switch) ease,
              translate var(--play-switch) cubic-bezier(.4, 0, .2, 1);
}
.play-end{ display: block; height: var(--play-bottom); }
.play-frame{
  position: relative;
  /* height always follows the width at the film's exact shape, so when
     the film changes size (credits opening, full screen) it can never be
     momentarily the wrong shape and the picture never pumps in and out */
  aspect-ratio: var(--play-ratio);
}
.play.is-instant .play-unit,
.play.is-instant .play-frame,
.play.is-instant .play-chrome,
.play.is-instant .play-credits,
.play.sw-in .play-unit,
.play.sw-in .play-credits .pc-scroll{ transition: none !important; }

/* PREV / NEXT dissolve: out one way, in from the other */
.play.is-switching .play-unit{ opacity: 0; translate: calc(var(--sw-dir, 1) * -22px) 0; }
.play.sw-in .play-unit{ opacity: 0; translate: calc(var(--sw-dir, 1) * 22px) 0; }
.play-credits .pc-scroll{ transition: opacity var(--play-switch) ease; }
.play.is-switching .play-credits .pc-scroll,
.play.sw-in .play-credits .pc-scroll{ opacity: 0; }

/* CLOSE, above the film at its top right */
.play-top{
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--inset) 10px;
}

/* Category / role: under the film, left and right, above the time */
.play-labels{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 6px;
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--fg);
}

.play-screen{
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
/* In full screen, while the film changes size (credits opening/closing),
   a live copy of the picture is drawn on top of the video so the browser
   never has to re-draw the full-screen video mid-move, which on some
   machines shows a quick squeeze. The copy follows the video frame by
   frame and is removed once the move is done. */
.play-mirror{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.play-screen video,
.play-screen .play-poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                   /* the frame already has the film's shape */
  background: #000;
}
/* the still shows until the film is actually playing, then the film fades up */
.play-screen video{ opacity: 0; transition: opacity .5s ease; }
.play-screen.has-video video{ opacity: 1; }

/* corner marks, as on Home (not when the film runs edge to edge) */
.play-frame .corner{ z-index: 2; pointer-events: none; }
.play-frame .corner.tl{ left: 0; top: 0; }
.play-frame .corner.tr{ right: 0; top: 0; }
.play-frame .corner.bl{ left: 0; bottom: 0; }
.play-frame .corner.br{ right: 0; bottom: 0; }
.play.edge-to-edge .play-frame .corner{ display: none; }

.play-notice{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / .45);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-2);
  text-align: center;
  padding: 24px 22%;
}
.play-notice[hidden]{ display: none; }

/* ---- PREV / NEXT: over the film, at its far sides, level with its middle ---- */
.play-nav{
  position: absolute;
  top: 0; bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 24%;
  pointer-events: none;
}
.play-nav.prev{ left: max(clamp(14px, 1.6vw, 28px), var(--inset)); align-items: flex-start; text-align: left; }
.play-nav.next{ right: max(clamp(14px, 1.6vw, 28px), var(--inset)); align-items: flex-end; text-align: right; }
.play-nav button{
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 8px;
  padding: 14px 0;
  background: none;
  border: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  text-align: inherit;
  text-shadow: 0 0 18px rgb(0 0 0 / .6), 0 0 3px rgb(0 0 0 / .5);
  cursor: pointer;
  pointer-events: auto;
  opacity: .72;
  transition: opacity .35s ease;
}
.play-nav button:hover{ opacity: 1; }
.pn-label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}
.pn-arrow{ display: inline-block; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.play-nav.prev button:hover .pn-arrow{ transform: translateX(-5px); }
.play-nav.next button:hover .pn-arrow{ transform: translateX(5px); }
.pn-title{
  font-family: var(--font-display);
  font-stretch: var(--title-width);
  font-weight: var(--title-weight);
  font-size: var(--pn-title-size);
  letter-spacing: var(--title-track);
  line-height: 1.15;
}

/* ---- Controls: right under the picture. If the picture runs to the
        bottom of the window they stay pinned there, over it ---- */
.play-chrome{
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: 14px var(--inset) 0;
  transition: opacity .45s ease;
}
.play-chrome::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(100% + 70px);
  z-index: -1;
  background: linear-gradient(to top, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .42) 55%, rgb(0 0 0 / 0) 100%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.play.chrome-stuck .play-chrome::before{ opacity: 1; }

/* hidden while the film plays and the pointer is still */
.play.ui-idle .play-chrome,
.play.ui-idle .play-nav{ opacity: 0 !important; pointer-events: none; }
.play.ui-idle .play-nav button{ pointer-events: none; }
.play.ui-idle .play-screen{ cursor: none; }

.play-bar{
  display: flex;
  flex-direction: column;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.play-bar.is-disabled .pb-time,
.play-bar.is-disabled .pb-scrub,
.play-bar.is-disabled .pb-toggle,
.play-bar.is-disabled .pb-sound,
.play-bar.is-disabled .pb-full{ opacity: .35; pointer-events: none; }
.play-chrome button,
.pi-credits{
  background: none;
  border: 0;
  padding: 5px 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease;
}
.play-chrome button:hover{ color: var(--fg); }

.pb-time{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--tc-font);
  font-weight: var(--tc-weight);
  font-feature-settings: "tnum" 1;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--fg);
  text-transform: none;
}
.pb-dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--fg-2); }
.pb-dur{ color: var(--fg-2); }

.pb-row{
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  column-gap: 24px;
  align-items: center;
}
.pb-left{ justify-self: start; display: flex; gap: 28px; }
.pb-toggle{ justify-self: center; color: var(--fg) !important; min-width: 5em; }
.pb-right{ justify-self: end; display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); }

/* the scrub line: thin, thickens under the pointer */
.pb-scrub{
  position: relative;
  height: 20px;
  cursor: pointer;
  touch-action: none;
}
.pb-scrub::before,
.pb-buffer,
.pb-progress{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  translate: 0 -50%;
  transition: height .2s ease;
}
.pb-scrub::before{ right: 0; background: rgb(var(--fg-rgb) / .25); }
.pb-buffer{ width: 0; background: rgb(var(--fg-rgb) / .4); }
.pb-progress{ width: 0; background: var(--fg); }
.pb-scrub:hover::before,
.pb-scrub:hover .pb-buffer,
.pb-scrub:hover .pb-progress,
.pb-scrub.is-dragging::before,
.pb-scrub.is-dragging .pb-buffer,
.pb-scrub.is-dragging .pb-progress{ height: 3px; }
.pb-head{
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 11px;
  translate: -50% -50%;
  background: var(--fg);
}
.pb-hover{
  position: absolute;
  bottom: 100%;
  left: 0;
  translate: -50% -2px;
  font-family: var(--tc-font);
  font-feature-settings: "tnum" 1;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--fg);
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.pb-scrub:hover .pb-hover,
.pb-scrub.is-dragging .pb-hover{ opacity: 1; }

/* CREDITS buttons: a line draws under and the + turns */
.pb-credits,
.pi-credits{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pb-credits::after,
.pi-credits::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.pb-credits:hover,
.play.show-credits .pb-credits{ color: var(--fg); }
.pb-credits:hover::after,
.pi-credits:hover::after,
.play.show-credits .pb-credits::after{ transform: scaleX(1); }
.pcb-plus{
  position: relative;
  width: 9px; height: 9px;
  transition: rotate .45s cubic-bezier(.16, 1, .3, 1);
}
.pcb-plus::before,
.pcb-plus::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 1px;
  background: currentColor;
  translate: -50% -50%;
}
.pcb-plus::after{ rotate: 90deg; }
.pb-credits:hover .pcb-plus{ rotate: 90deg; }
.play.show-credits .pcb-plus{ rotate: 45deg; }

/* Controls over the picture instead (Tune option, and in full screen) */
.play.ui-over .play-chrome{
  position: absolute;                  /* moved inside the film by js/play.js */
  left: 0; right: 0;
  top: auto;
  bottom: 0;
  padding: 0 max(var(--inset), clamp(12px, 1.6vw, 26px)) 14px;
  transition: opacity .45s ease;
}
.play.ui-over .play-chrome::before{ opacity: 1; }

/* ---- Title: centred under the controls ---- */
.play-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px var(--inset) 0;
}
.pi-title{
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  font-stretch: var(--title-width);
  letter-spacing: var(--title-track);
  line-height: 1;
  text-wrap: balance;
}
.pi-sub{
  margin-top: 8px;
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--fg-2);
}
.pi-sub[hidden]{ display: none; }
/* "[ Start a project ]": a quiet line under the title, opening the brief.
   Built to sit exactly centred: brackets either side (like the timecode),
   the letters' trailing space balanced, and on hover the brackets open
   out evenly and a line draws from the middle. */
.pi-brief{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .9em;
  margin-top: 22px;
  padding: 4px 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-2);
  cursor: pointer;
  transition: color .3s ease;
}
.pi-brief-text{
  position: relative;
  letter-spacing: var(--label-track);
  margin-right: calc(var(--label-track) * -1);   /* no extra space after the last letter */
}
.pi-brief-text::after{
  content: "";
  position: absolute;
  left: 0;
  right: var(--label-track);
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.pi-bk{ font-weight: 300; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.pi-brief:hover, .pi-brief:focus-visible{ color: var(--fg); }
.pi-brief:hover .pi-brief-text::after, .pi-brief:focus-visible .pi-brief-text::after{ transform: scaleX(1); }
.pi-brief:hover .pi-bk:first-child{ transform: translateX(-5px); }
.pi-brief:hover .pi-bk:last-child{ transform: translateX(5px); }
.pi-credits{ display: none; }
/* with the credits up, the title steps aside for them (it's repeated at
   the top of the list) */
.play.show-credits .play-info{ display: none; }

/* ---- Credits: rise from the bottom, under the film, never over it ---- */
/* (kept inside a window-sized box so, closed, it never makes the page scroll) */
.play-credits-wrap{
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.play-credits{
  position: absolute;
  left: max(var(--play-side-px, 0px), var(--gutter));
  right: max(var(--play-side-px, 0px), var(--gutter));
  top: var(--ct, 60vh);
  height: var(--ch, 36vh);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  translate: 0 60px;
  transition: top var(--play-morph) var(--play-ease),
              height var(--play-morph) var(--play-ease),
              translate var(--play-morph) var(--play-ease),
              opacity calc(var(--play-morph) * .6) ease,
              visibility 0s linear var(--play-morph);
}
.play.show-credits .play-credits{
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  translate: 0 0;
  transition: top var(--play-morph) var(--play-ease),
              height var(--play-morph) var(--play-ease),
              translate var(--play-morph) var(--play-ease),
              opacity calc(var(--play-morph) * .6) ease calc(var(--play-morph) * .2);
}
/* a hairline draws across the top like a splice mark */
.pc-line{
  display: block;
  height: 1px;
  flex: none;
  background: rgb(var(--fg-rgb) / .16);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .7s cubic-bezier(.65, 0, .35, 1);
}
.play.show-credits .pc-line{ transform: scaleX(1); transition-delay: calc(var(--play-morph) * .35); }

.pc-scroll{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
/* only a list that scrolls gets the soft fade at its edges */
.play-credits.is-scrollable .pc-scroll{
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 30px), transparent 100%);
}
.pc-scroll::-webkit-scrollbar{ display: none; }
/* scroll hint, only when the list is longer than the drawer:
   a hairline track on the right edge with the position marked on it, and a
   small "Scroll" at the foot that fades once the end is reached */
.pc-track{
  position: absolute;
  right: 0;
  top: 22px; bottom: 30px;
  width: 1px;
  background: rgb(var(--fg-rgb) / .1);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.pc-thumb{
  position: absolute;
  left: 0; top: 0;
  width: 1px;
  background: rgb(var(--fg-rgb) / .55);
  transition: transform .12s linear;
}
.pc-more{
  position: absolute;
  left: 50%; bottom: 4px;
  translate: -50% 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fg-2);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.pc-more::after{ content: " \2193"; letter-spacing: 0; }
.play.show-credits .play-credits.is-scrollable .pc-track{ opacity: 1; transition-delay: calc(var(--play-morph) * .6); }
.play.show-credits .play-credits.is-scrollable:not(.at-end) .pc-more{ opacity: .8; transition-delay: calc(var(--play-morph) * .6); }
.play.show-credits .play-credits.is-scrollable.at-end .pc-more{ transition-delay: 0s; }
.pc-inner{ padding: 14px 0 12px; }
.play-credits.is-scrollable .pc-inner{ padding-bottom: 30px; }
.pc-head{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: baseline;
  padding-top: 4px;
  margin-bottom: 16px;
  opacity: 0;
  translate: 0 8px;
  transition: opacity .5s ease, translate .6s cubic-bezier(.16, 1, .3, 1);
}
/* the film's title, centred at the top of the drawer */
.pc-film{
  font-style: normal;
  font-family: var(--font-display);
  font-stretch: var(--title-width);
  font-weight: var(--title-weight);
  font-size: 17px;
  letter-spacing: var(--title-track);
  color: var(--fg);
  text-align: center;
}
.pc-note{
  position: absolute;
  right: 0;
  bottom: 3px;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-2);
  opacity: .7;
}
/* credits flow across the full width, role over name, so a short list
   is a single line and a long one simply scrolls */
.pc-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--credits-cols), 1fr));
  gap: 12px 36px;
}
.pc-cell{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  opacity: 0;
  translate: 0 8px;
  transition: opacity .5s ease, translate .6s cubic-bezier(.16, 1, .3, 1);
}
.play.show-credits .pc-head,
.play.show-credits .pc-cell{
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(var(--play-morph) * .45 + var(--i, 0) * 25ms);
}
.pc-role,
.pc-deptname span{
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pc-name{
  font-family: var(--font-display);
  font-size: var(--credit-size);
  font-weight: var(--credit-weight);
  font-stretch: 105%;
  line-height: 1.25;
}
/* unit label (e.g. "Singapore Unit"): its own full row, starting at the left */
.pc-deptname{ grid-column: 1 / -1; justify-content: flex-start; padding-top: 10px; }
.pc-list > .pc-deptname:first-child{ padding-top: 0; }
.pc-deptname span{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  opacity: .75;
  letter-spacing: .24em;
}
.pc-deptname span::before{
  content: "";
  width: 16px; height: 1px;
  background: currentColor;
  opacity: .6;
}
.pc-empty{
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ---- Close: top right of the film ---- */
.play-close{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 4px 0 4px 8px;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
  opacity: .8;
  transition: opacity .2s ease;
}
.play-close:hover{ opacity: 1; }
.play-close i{ position: relative; width: 11px; height: 11px; transition: rotate .45s cubic-bezier(.16, 1, .3, 1); }
.play-close:hover i{ rotate: 90deg; }
.play-close i::before,
.play-close i::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 1px;
  background: currentColor;
  translate: -50% -50%;
  rotate: 45deg;
}
.play-close i::after{ rotate: -45deg; }

/* ---- The frame that flies from Home to the Play page ---- */
.play-fly{
  position: fixed;
  z-index: 25;
  overflow: hidden;
  pointer-events: none;
  background: #000;
}
.play-fly img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Full screen: the whole display, controls over the picture ---- */
.play:fullscreen{ background: #000; }
.play:fullscreen .play-top,
.play:fullscreen .play-labels,
.play:fullscreen .play-info,
.play:fullscreen .play-end,
.play:fullscreen .corner{ display: none; }

/* ---- Phones: film full width, then controls, title and credits below ---- */
@media (max-width: 760px){
  .play{ --inset: 0px; }
  .play-unit{
    position: relative;
    left: auto; top: auto;
    width: auto;
    margin: var(--phone-top, 120px) var(--gutter) 0;
    transition: opacity var(--play-switch) ease, translate var(--play-switch) cubic-bezier(.4, 0, .2, 1);
  }
  .play-frame{ height: auto; aspect-ratio: var(--play-ratio); transition: none; }
  .play-chrome{ position: relative; padding-top: 10px; }
  .play.ui-idle .play-chrome,
  .play.ui-idle .play-nav{ opacity: 1 !important; pointer-events: auto; }
  .play.ui-idle .play-nav button{ pointer-events: auto; }
  .pn-title{ display: none; }
  .play-nav button{ padding: 10px 0; }
  .pb-right, .pb-left{ gap: 18px; }
  .pb-credits{ display: none; }
  .pi-credits{
    display: inline-flex;
    margin-top: 14px;
    padding: 6px 2px;
    color: var(--fg-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
  }
  .play.show-credits .play-info{ display: flex; }
  .play.show-credits .pi-credits{ color: var(--fg); }
  .play.show-credits .pi-credits .pcb-plus{ rotate: 45deg; }
  .play-end{ height: 24px; }
  .play-credits-wrap{ position: static; width: auto; height: auto; overflow: visible; pointer-events: auto; }
  .play-credits{
    position: relative;
    left: auto; right: auto; top: auto;
    height: auto;
    margin: 0 var(--gutter) 48px;
    scroll-margin-top: var(--phone-top, 110px);
    display: none;
    translate: none;
    transition: none;
  }
  .play.show-credits .play-credits{ display: flex; }
  .pc-scroll{ overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .pc-track, .pc-more{ display: none; }            /* the page itself scrolls on a phone */
  .pc-head{ flex-direction: column; align-items: center; gap: 6px; }
  .pc-note{ position: static; }
  .pc-inner{ padding: 18px 0 8px; }
}