/* ============================================================
   padsplit-film-viewer.css — guided "Not Yet" brand-film viewer
   Full-bleed cover hero + storyboard copy + compact controls.
   Interior PadSplit page only. Homepage plate is untouched.
   Frame opacity transition MUST match FADE in the JS (700ms).
   ============================================================ */
:root{ --ps-yellow:#F4C64A; }

/* full-bleed film stage: begins below the 64px global nav, spans full width,
   fills the first screen height. cover fill, no navy gutters, no letterbox. */
.pfv{position:relative;width:100%;min-height:calc(100svh - 64px);background:#000;overflow:hidden;isolation:isolate}
@media (max-width:780px){.pfv{min-height:calc(100svh - 58px)}}
.pfv:focus-visible{outline:2px solid var(--ps-yellow);outline-offset:-4px}

.pfv__stage{position:absolute;inset:0}
.pfv__frame{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 42%;background:#000;
  opacity:0;transition:opacity 700ms ease;will-change:opacity}
.pfv__frame.is-active{opacity:1}
@media (prefers-reduced-motion:reduce){.pfv__frame{transition:none}}

/* local scrim only behind the copy, bottom-anchored — never darkens the whole image */
.pfv__scrim{position:absolute;left:0;right:0;bottom:0;height:64%;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(8,10,20,.80) 0%,rgba(8,10,20,.55) 32%,rgba(8,10,20,0) 100%)}

/* bottom bar: storyboard copy (left) + compact controls (right) */
.pfv__bar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:flex-end;
  justify-content:space-between;gap:clamp(18px,3vw,44px);padding:clamp(20px,3.4vw,50px)}
.pfv__copy{max-width:min(56ch,64%)}
.pfv__chapter{font-family:'Inter',sans-serif;font-weight:700;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ps-yellow);margin:0 0 12px}
.pfv__line{font-family:'Inter',sans-serif;font-weight:700;font-size:clamp(24px,3.6vw,48px);line-height:1.05;
  letter-spacing:-.018em;color:#fff;margin:0;max-width:22ch;text-wrap:balance}
.pfv__note{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(14px,1.25vw,17px);line-height:1.5;
  color:rgba(255,255,255,.86);margin:14px 0 0;max-width:52ch;text-wrap:pretty}

.pfv__controls{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:0 0 auto}
.pfv__count{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:.1em;
  color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums}
.pfv__btns{display:flex;align-items:center;gap:10px}
.pfv__btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:rgba(8,10,20,.42);backdrop-filter:blur(6px);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:background .2s,border-color .2s;color:#fff}
.pfv__btn:hover{background:rgba(8,10,20,.72);border-color:#fff}
.pfv__btn:focus-visible{outline:2px solid var(--ps-yellow);outline-offset:2px}
.pfv__btn svg{width:16px;height:16px;fill:currentColor}
/* play/pause glyph via classes on the play button */
.pfv__ic-pause,.pfv__ic-play{display:block;width:14px;height:14px;position:relative}
.pfv__ic-pause::before,.pfv__ic-pause::after{content:'';position:absolute;top:0;width:4px;height:14px;background:#fff}
.pfv__ic-pause::before{left:1px}.pfv__ic-pause::after{right:1px}
.pfv__btn.is-paused .pfv__ic-pause{display:none}
.pfv__ic-play{display:none}
.pfv__btn.is-paused .pfv__ic-play{display:block}
.pfv__ic-play::before{content:'';position:absolute;left:3px;top:0;width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff}

/* progress rail — clickable positions */
.pfv__rail{display:flex;gap:4px;align-items:center}
.pfv__dot{position:relative;width:20px;height:26px;background:transparent;border:0;padding:0;cursor:pointer}
.pfv__dot::before{content:'';position:absolute;left:2px;right:2px;top:50%;height:4px;transform:translateY(-50%);
  background:rgba(255,255,255,.34);border-radius:2px;transition:background .2s}
.pfv__dot:hover::before{background:rgba(255,255,255,.6)}
.pfv__dot.is-on::before{background:var(--ps-yellow)}
.pfv__dot:focus-visible{outline:2px solid var(--ps-yellow);outline-offset:1px;border-radius:3px}

/* visually-hidden polite status */
.pfv__status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:760px){
  .pfv__bar{flex-direction:column;align-items:flex-start;gap:16px}
  .pfv__copy{max-width:100%}
  .pfv__controls{align-items:flex-start;width:100%}
  .pfv__btns{gap:12px}
  .pfv__btn{width:46px;height:46px}
  .pfv__dot{height:44px;width:100%;flex:1}   /* full-width tall hit areas on mobile */
  .pfv__rail{width:100%;gap:5px}
}