/* Film a scroll delle pagine gioco (js/scrollfilm.js). I colori arrivano dalla pagina: --sf-accent, --sf-bg, --sf-font */
.sfilm{position:relative;height:420vh;background:var(--sf-bg,#0E0E0D)}
.sf-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--sf-bg,#0E0E0D)}
.sf-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sf-stage .sf-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 72% at 50% 50%,transparent 40%,rgba(0,0,0,.78) 100%)}
.sf-chap{position:absolute;left:0;right:0;padding-inline:var(--gutter);pointer-events:none;opacity:0;transform:translateY(18px);transition:opacity .6s,transform .7s var(--ease)}
.sf-chap.on{opacity:1;transform:none}
.sf-chap.top{top:calc(96px + env(safe-area-inset-top,0px))}
.sf-chap.mid{top:50%;margin-top:-1em;text-align:center}
.sf-chap.low{bottom:clamp(80px,14vh,140px)}
.sf-chap.right{text-align:right}
.sf-chap .k{display:inline-block;margin-bottom:12px;padding:5px 10px;background:var(--sf-accent,#E9C424);color:#0E0E0D;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.sf-chap h2{margin:0;font-family:var(--sf-font,var(--font-display));font-weight:400;font-size:clamp(40px,7vw,108px);line-height:.92;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 4px 30px rgba(0,0,0,.9);max-width:14ch}
.sf-chap.right h2{margin-left:auto}
.sf-chap.mid h2{margin-inline:auto}
.sf-chap p{margin:14px 0 0;max-width:34ch;font-size:clamp(17px,1.5vw,20px);text-shadow:0 2px 18px #000}
.sf-chap.right p{margin-left:auto}
.sf-chap.mid p{margin-inline:auto}
.sf-bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(18px + env(safe-area-inset-bottom,0px));height:2px;background:rgba(255,255,255,.12)}
.sf-bar i{display:block;height:100%;background:var(--sf-accent,#E9C424);transform-origin:left;transform:scaleX(0)}
.sf-hint{position:absolute;left:50%;bottom:calc(38px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);color:var(--chalk-2);transition:opacity .5s}
@media (max-width:760px){.sfilm{height:340vh}}
@media (prefers-reduced-motion:reduce){.sf-chap{transition:none}}