/* Film-strip hero: scene authored in px (wide 1280×640, tall 640×820), scaled by JS */
.fs-wrap{position:relative;z-index:2}
.fs-figure{position:relative}
.fs-viewport{position:relative;width:100%}
.fs-scene{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--fs-scale,1))}
.fs-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fs-screen{position:absolute}
.fs-screen .viewport{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#050505;box-shadow:0 0 0 1px #fff3e62e,0 30px 90px #000c,-40px 20px 100px -30px #ff3b2466}
.fs-progress{position:absolute;left:0;bottom:-10px;height:2px;width:0;background:var(--inferno);box-shadow:0 0 8px var(--inferno)}
.fs-label{position:absolute;left:0;right:0;top:-32px;display:flex;align-items:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8e8781;white-space:nowrap}
.fs-label b,.fs-in b{font-weight:500;color:var(--cream);margin-right:10px;padding:3px 7px;border:1px solid #fff3e640;border-radius:3px}
.fs-in{position:absolute;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8e8781;white-space:nowrap}

/* Celluloid */
.fs-strip{position:absolute;left:-40px;right:-40px;overflow:hidden;background:#0d0b0a;box-shadow:0 0 0 1px #fff3e614,0 24px 60px #000b;--hole:repeating-linear-gradient(90deg,transparent 0 7px,#2a2522 7px 19px,transparent 19px 26px)}
.fs-strip:before,.fs-strip:after{content:'';position:absolute;left:0;right:0;height:10px;background:var(--hole);background-position-x:var(--hole-x,0);z-index:2}
.fs-strip:before{top:7px}.fs-strip:after{bottom:7px}
.fs-frames{position:absolute;inset:0}
.fs-frame{position:absolute;top:0;overflow:hidden;border-radius:3px;background:#070707}
.fs-frame .viewport{position:absolute;inset:0;overflow:hidden}
.fs-code{position:absolute;inset:0;padding:10px 12px;background:linear-gradient(180deg,#141210,#0b0a09);font:400 9.5px/1.75 var(--mono);color:#b9ada2;white-space:pre;overflow:hidden;box-shadow:inset 0 0 0 1px #fff3e612}
.fs-code b{font-weight:400;color:var(--peach)}
.fs-code i{font-style:normal;color:#ff7a66}
.fs-code .hl{display:block;margin:0 -12px;padding:0 12px;background:#d9ff3d14;box-shadow:inset 2px 0 0 var(--acid);color:var(--cream)}
.fs-film{position:absolute;inset:0;background:#050505 url(./assets/work/raycast-strip.jpg) 0 0/500% 500% no-repeat}
.fs-screen video{display:block;width:100%;height:100%;object-fit:cover}
.fs-edge{position:absolute;left:5px;bottom:4px;padding:1px 4px;border-radius:2px;background:#000a;font:400 8px var(--mono);letter-spacing:.1em;color:#a8a29c;z-index:3}

/* Projector gate */
.fs-gate{position:absolute;border-radius:8px;background:linear-gradient(90deg,#1a1a1a,#0f0f0f 60%,#161616);box-shadow:inset 0 0 0 1px #fff3e626,0 20px 50px #000c;z-index:4}
.fs-slit{position:absolute;left:50%;top:10px;bottom:10px;width:3px;margin-left:-1.5px;border-radius:4px;background:linear-gradient(180deg,var(--inferno),#fff3e6,var(--inferno));box-shadow:0 0 14px 3px var(--inferno),0 0 60px 14px #ff3b2466}
.fs-lens{position:absolute;right:-12px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff3e6,#ffb39a 35%,#3a1a12 70%);box-shadow:0 0 0 4px #1a1a1a,0 0 0 5px #fff3e62e,0 0 24px #ffb39a88}
.fs-gate-label{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#8e8781}
.fs-scene.is-tall .fs-label,.fs-scene.is-tall .fs-in{font-size:16px}
.fs-scene.is-tall .fs-label{top:-42px}
.fs-scene.is-tall .fs-gate-label{font-size:13px;bottom:-30px}

.fs-caption{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:10px}
.fs-caption b{font-weight:500;color:var(--cream)}
.fs-tc{min-width:84px;font-size:11px;color:#8e8781}
.motion-toggle{width:30px;height:30px;flex:none;display:grid;place-items:center;border:1px solid #4a4541;border-radius:50%;background:none;padding:0}
.motion-toggle:hover{border-color:var(--cream)}
.pause-symbol{width:7px;height:9px;border-left:2px solid var(--cream);border-right:2px solid var(--cream)}
.motion-toggle[aria-pressed=true] .pause-symbol{width:0;height:0;border:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--cream);margin-left:3px}

.fs-feed{position:absolute;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent)}
.fs-feed pre{margin:0;font:400 12px/22px var(--mono);color:#8e8781;white-space:pre}
.fs-feed b{font-weight:400;color:var(--peach)}
.fs-feed i{font-style:normal;color:#ff7a66}
.fs-scene.is-tall .fs-feed{display:none}