/* =============================================================================
   case-film.css · JasonWalker.design · the case study film, on demand (1.0.0, 2026-10-01)
   -----------------------------------------------------------------------------
   One block near the top of every case page that has a film: the poster, the
   film's real runtime and one Acid button. The film plays in a dialog with sound,
   at its own ratio (9:16 on a portrait phone under 700 px, 16:9 everywhere else).
   It is portfolio framing, not the brand's: carbon and Acid, so it never competes
   with a page's own hero commercial ("Play · 0:16 with sound" stays the brand's).
   Markup:  <section class="cf-watch" data-cf> … see assets/js/case-film.js.
   ============================================================================= */
.cf-watch{--cf-carbon:#171717;--cf-acid:#DFFF00;--cf-silver:#C9CCCF;
  position:relative;background:var(--cf-carbon);color:var(--cf-silver);
  padding:clamp(28px,4.2vw,64px) clamp(18px,4.4vw,84px);
  font-family:var(--font-brand,'Radikal',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif)}
.cf-watch__inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,44px);align-items:end}
.cf-watch__poster{all:unset;box-sizing:border-box;display:block;position:relative;cursor:pointer;aspect-ratio:16/9;overflow:hidden;background:#0d0d0d}
.cf-watch__poster img{display:block;width:100%;height:100%;object-fit:cover;margin:0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cf-watch__poster:hover img{transform:scale(1.015)}
.cf-watch__poster::before{content:"";position:absolute;left:clamp(12px,1.8vw,22px);bottom:clamp(12px,1.8vw,22px);width:56px;height:56px;background:var(--cf-carbon)}
.cf-watch__poster::after{content:"";position:absolute;left:calc(clamp(12px,1.8vw,22px) + 20px);bottom:calc(clamp(12px,1.8vw,22px) + 15px);width:0;height:0;
  border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent var(--cf-acid)}
.cf-watch__poster:focus-visible{outline:2px solid var(--cf-acid);outline-offset:4px}
.cf-watch__side{display:grid;gap:14px;justify-items:start}
.cf-watch__btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:12px;
  background:var(--cf-acid);color:var(--cf-carbon);padding:18px 26px 18px 22px;
  font:600 17px/1.1 var(--font-brand,'Radikal',system-ui,sans-serif);letter-spacing:.01em;white-space:nowrap;border-radius:0}
.cf-watch__btn::before{content:"";width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}
.cf-watch__btn:hover{background:#EBFF4D}
.cf-watch__btn:focus-visible{outline:2px solid var(--cf-acid);outline-offset:4px}
.cf-watch__btn time{font-variant-numeric:tabular-nums;font-weight:400}
@media (max-width:760px){
  .cf-watch__inner{grid-template-columns:1fr}
  .cf-watch__btn{width:100%;justify-content:center}
}

/* the dialog: the film at its own ratio, nothing around it but the way out */
.cf-dialog{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:rgba(10,10,10,.97);color:#C9CCCF;overflow:hidden}
.cf-dialog::backdrop{background:rgba(0,0,0,.92)}
.cf-dialog[open]{display:grid;place-items:center;animation:cf-in .28s ease-out}
@keyframes cf-in{from{opacity:0}to{opacity:1}}
.cf-dialog__frame{display:grid;gap:12px;justify-items:end;width:min(calc(100vw - 32px),calc((100dvh - 96px) * 16 / 9));max-width:1600px}
.cf-dialog[data-portrait="1"] .cf-dialog__frame{width:min(calc(100vw - 24px),calc((100dvh - 84px) * 9 / 16))}
.cf-dialog__video{display:block;width:100%;aspect-ratio:16/9;background:#000;outline:0}
.cf-dialog[data-portrait="1"] .cf-dialog__video{aspect-ratio:9/16}
.cf-dialog__video:focus-visible{outline:2px solid #DFFF00;outline-offset:3px}
.cf-dialog__close{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;
  font:500 14px/1 var(--font-brand,'Radikal',system-ui,sans-serif);letter-spacing:.04em;color:#C9CCCF;border:1px solid rgba(201,204,207,.35)}
.cf-dialog__close:hover{color:#DFFF00;border-color:#DFFF00}
.cf-dialog__close:focus-visible{outline:2px solid #DFFF00;outline-offset:3px}
body.cf-modal{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .cf-dialog[open]{animation:none}
  .cf-watch__poster img{transition:none}
}