/* v8 TASK F: immersive project-media viewer (phone <=940px). Paired with media-open.js.
   Reference: research/phone-v8/media-open.md (Cuberto 390 touch). Motion lives in JS (WAAPI); this file is layout + resting states.
   Stage colour #0a0a0a = near-black like our .phs-dark; the viewer sits above the nav (120) and below the cursor dot (9999). */
.mo{display:none}
@media (max-width:940px){
  html.mo-lock,html.mo-lock body{overflow:hidden}
  .mo{position:fixed;inset:0;z-index:9000;display:none;color:#fff;overscroll-behavior:contain;touch-action:none;-webkit-tap-highlight-color:transparent}
  .mo.is-open{display:block}
  .mo-bg{position:absolute;inset:0;background:#0a0a0a}
  /* the shared element: fixed box whose final rect = viewport width x the video's own aspect; JS sets left/top/width/height */
  .mo-media{position:absolute;left:0;top:0;overflow:hidden;transform-origin:0 0;background:#0a0a0a;will-change:transform,clip-path}
  .mo-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  /* the moved card video keeps phone.css .wk-vid.wk-loop (absolute, 0/0/100%/100%, cover); restate so the viewer never depends on it */
  .mo-media>video{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;object-fit:cover;border-radius:0!important;opacity:1!important}
  .mo-x{position:absolute;top:max(12px,calc(env(safe-area-inset-top) + 8px));right:12px;width:48px;height:48px;border-radius:50%;border:0;padding:0;margin:0;
    background:rgba(10,10,10,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;display:grid;place-items:center;cursor:pointer;
    transition:transform .16s cubic-bezier(.23,1,.32,1)}
  .mo-x:active{transform:scale(.94)}
  .mo-x svg{width:18px;height:18px;display:block}
  .mo-x:focus-visible,.mo-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .mo-foot{position:absolute;left:16px;right:16px;bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px))}
  .mo-cap{font-size:24px;line-height:1.2;letter-spacing:-.01em;font-weight:400;margin:0 0 24px;max-width:340px;color:#fff}
  /* primary action: Cuberto CtaButton -size-md height (60.3px MEASURED) as a filled pill, full width for thumb reach */
  .mo-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:60px;border-radius:99999px;background:#fff;color:#0a0a0a;
    text-decoration:none;font-size:17.68px;line-height:1;font-weight:500;transition:transform .16s cubic-bezier(.23,1,.32,1)}
  .mo-cta:active{transform:scale(.97)}
  .mo-cta svg{width:14px;height:14px;display:block}
  .phs-work a.wk .wk-media.mo-src{visibility:hidden}
}