/* Scroll-scrub opening film (10 Oct, approved by Jason). Canvas pinned; frames follow scroll both ways. */
.film{position:relative;z-index:1;height:100vh;height:100svh;background:#1A0F08}
html.film-on .film{height:320vh;height:320svh}
.film-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.film-still,.film canvas{position:absolute;inset:0;width:100%;height:100%}
.film-still img{width:100%;height:100%;object-fit:contain;object-position:center}
@media (orientation:landscape){.film-still img{object-fit:cover}}
.film canvas{opacity:0;transition:opacity .4s}
html.film-on .film canvas.ready{opacity:1}
.film-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#1A0F08 0,rgba(26,15,8,0) 22%,rgba(26,15,8,0) 70%,#1A0F08 100%)}
.film-copy{position:absolute;left:0;right:0;bottom:calc(9vh + env(safe-area-inset-bottom));text-align:center;padding:0 1.25rem;z-index:2}
.film-copy .eyebrow{margin:0 0 .4rem}
.film-copy .film-title{font-family:var(--font-head);font-size:var(--fs-xl);line-height:1.1;margin:0 0 1rem;color:var(--text)}
.film-hint{position:absolute;top:calc(var(--nav-h) + 1rem);left:0;right:0;text-align:center;font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);opacity:.8}
html:not(.film-on) .film-hint{display:none}
/* Opening coffee photo replaced by the film */
.scene-mark-photo,.stage .pour-photo{display:none!important}
html.film-on .film{height:420vh;height:420svh}
.film-copy{min-height:9.5rem}
.film-cap{position:absolute;left:0;right:0;bottom:0;padding:0 1.25rem;transition:none}
.film-cap .film-title{margin-bottom:1rem}
html.film-on .film-cap{opacity:0;visibility:hidden}
html:not(.film-on) .film-cap:not(.last){display:none}