/* Shared selected-scene player; only the video slot is replaced. */
.project-page .portfolio-clip-player { position:relative; width:100%; aspect-ratio:16/9; background:#080808; isolation:isolate; }
.project-page .portfolio-clip-player video,
.project-page .portfolio-clip-player .portfolio-coming-image { display:block; width:100%; height:100%; object-fit:contain; background:#080808; }
.project-page .portfolio-clip-title { position:absolute; z-index:3; top:24px; left:28px; max-width:calc(100% - 56px); color:#f5f5f0; font:500 clamp(15px,1.5vw,21px)/1.25 'IBM Plex Mono',monospace; text-shadow:0 2px 12px rgba(0,0,0,.85); opacity:1; pointer-events:none; transition:opacity 420ms ease; }
.project-page .portfolio-clip-player.has-started .portfolio-clip-title { opacity:0; }
.project-page .portfolio-main-play { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:70px; height:70px; color:#fff; border:0; border-radius:50%; background:rgba(0,0,0,.48); font:27px/1 Arial,sans-serif; cursor:pointer; }
.project-page .portfolio-main-play:hover { background:rgba(0,0,0,.7); }
.project-page .portfolio-clip-player.has-started .portfolio-main-play { display:none; }
.project-page .portfolio-clip-arrow { position:absolute; z-index:4; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:40px; height:56px; border:0; color:white; background:rgba(0,0,0,.3); font:32px/1 Arial,sans-serif; cursor:pointer; }
.project-page .portfolio-clip-arrow:hover { background:rgba(0,0,0,.58); }
.project-page .portfolio-clip-arrow.prev { left:0; }
.project-page .portfolio-clip-arrow.next { right:0; }
.project-page .portfolio-coming-badge { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:15px 24px; white-space:nowrap; border:1px solid rgba(255,255,255,.52); background:rgba(0,0,0,.58); color:white; font:500 clamp(16px,2vw,25px)/1.2 'Instrument Sans',Arial,sans-serif; letter-spacing:.02em; pointer-events:none; }
@media(max-width:500px) { .project-page .portfolio-clip-title { top:14px; left:16px; max-width:calc(100% - 32px); font-size:14px; } .project-page .portfolio-main-play { width:54px; height:54px; font-size:22px; } .project-page .portfolio-clip-arrow { width:28px; height:44px; font-size:24px; } }
@media(prefers-reduced-motion:reduce) { .project-page .portfolio-clip-title { transition:none; } }