/* Projector — a film-reel portfolio for Bobby Holmes.
   Desktop = 16:9 cinema screen with a draggable film strip.
   Mobile  = full-bleed vertical frames you swipe through.
   Ported from the Claude Design "Bhlabs - Projector" reel. */

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;height:100%;
  background:#080706;color:#f3ede1;
  font-family:'Space Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;
}
::selection{background:#f0b75e;color:#080706}

/* ---- shared film keyframes (desktop) ---- */
@keyframes pjrec{0%,49%{opacity:1}50%,100%{opacity:.18}}
@keyframes pjkb{0%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes pjflick{0%,100%{opacity:.05}50%{opacity:.11}}
@keyframes filmflick{0%{opacity:.05}12%{opacity:.14}24%{opacity:.03}36%{opacity:.17}48%{opacity:.06}60%{opacity:.11}72%{opacity:.02}84%{opacity:.15}100%{opacity:.07}}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-4%,-3%)}20%{transform:translate(3%,4%)}30%{transform:translate(-3%,2%)}40%{transform:translate(4%,-4%)}50%{transform:translate(-4%,1%)}60%{transform:translate(3%,-3%)}70%{transform:translate(-2%,4%)}80%{transform:translate(4%,3%)}90%{transform:translate(-3%,-4%)}100%{transform:translate(0,0)}}
@keyframes scratch{0%,100%{opacity:0}4%{opacity:.6}8%{opacity:.1}12%{opacity:.5}16%{opacity:0}}
@keyframes leaderspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes leak{0%,44%,66%,100%{opacity:0}55%{opacity:.5}}
@keyframes vignettepulse{0%,100%{opacity:.82}50%{opacity:1}}

/* ---- mobile film keyframes ---- */
@keyframes mpkb{0%{transform:scale(1.14)}100%{transform:scale(1.0)}}
@keyframes mpgrain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-3%)}75%{transform:translate(-3%,-4%)}100%{transform:translate(0,0)}}
@keyframes mpflick{0%{opacity:.05}30%{opacity:.13}50%{opacity:.03}70%{opacity:.15}100%{opacity:.07}}
@keyframes mpvig{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes mpscr{0%,100%{opacity:0}5%{opacity:.5}10%{opacity:.1}15%{opacity:.4}20%{opacity:0}}
@keyframes mpspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes mpcue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-6px);opacity:1}}

/* ---- responsive stage toggle ---- */
@media (max-width:860px){ .pj{display:none!important} }
@media (min-width:861px){ .mp{display:none!important} }

@media (prefers-reduced-motion: reduce){
  .pj [data-grain],.mp [data-grain]{animation:none!important}
}