/* Texel: mobile film mode (active only when film.js sets html.film-mode). */
html.film-mode .scroll-scrub__stage{height:100vh;height:100lvh}
html.film-mode .scroll-scrub__progress,
html.film-mode .scroll-scrub__route{display:none}
html.film-mode .scroll-scrub__stage:after{display:none}
.film-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:block;opacity:0;transition:opacity .6s ease}
.film-canvas.is-ready{opacity:1}

/* longer chapters: one leg of the walk takes about two and a half swipes */
html.film-mode .scroll-scrub__chapter{min-height:260vh!important;min-height:260svh!important}
html.film-mode .scroll-scrub__chapter:first-child{min-height:240vh!important;min-height:240svh!important}
html.film-mode .scroll-scrub__chapter:last-child{min-height:220vh!important;min-height:220svh!important}

/* captions: compact, bottom, fade away once the walk gets going */
html.film-mode .scroll-scrub__chapter-pin,
html.film-mode .scroll-scrub__chapter[data-align=right] .scroll-scrub__chapter-pin{
  min-height:100vh;min-height:100svh;align-items:flex-end;justify-content:flex-start;
  padding:0 max(1.25rem,env(safe-area-inset-right)) calc(1.6rem + env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left))}
html.film-mode .scroll-scrub__copy{width:100%;will-change:opacity,transform}
html.film-mode .scroll-scrub__copy:before{
  inset:-9rem -1.5rem -2rem;border-radius:0;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--ss-bg) 94%,transparent) 0%,
    color-mix(in srgb,var(--ss-bg) 78%,transparent) 40%,
    color-mix(in srgb,var(--ss-bg) 30%,transparent) 72%,
    transparent 100%)}
html.film-mode .scroll-scrub__kicker{font-size:.7rem;margin:0 0 .55rem;letter-spacing:.14em}
html.film-mode .scroll-scrub__title{font-size:clamp(1.9rem,9vw,2.7rem);max-width:15ch;line-height:.98}
html.film-mode .scroll-scrub__body{font-size:.96rem;line-height:1.45;margin-top:.7rem;max-width:34ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html.film-mode .scroll-scrub__tags,
html.film-mode .scroll-scrub__actions{display:none}

/* story bar + chapter label */
.film-top{position:absolute;z-index:6;left:0;right:0;top:0;pointer-events:none;
  padding:calc(.7rem + env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) 2.6rem max(1rem,env(safe-area-inset-left));
  background:linear-gradient(to bottom,color-mix(in srgb,var(--ss-bg) 70%,transparent),transparent)}
.film-top{opacity:0;transition:opacity .35s ease}
html.film-in .film-top{opacity:1}
.film-bar{display:flex;gap:4px}
.film-bar i{flex:1;height:3px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--ss-ink) 22%,transparent)}
.film-bar b{display:block;height:100%;background:var(--ss-accent);transform:scaleX(0);transform-origin:0 50%}
.film-label{margin-top:.6rem;display:flex;gap:.55rem;align-items:baseline;color:var(--ss-ink);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.film-label__n{color:var(--ss-accent);font-variant-numeric:tabular-nums}
.film-top.is-swap .film-label{animation:film-swap .5s ease both}
@keyframes film-swap{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* header slides away while walking, comes back after the film */
html.film-mode .site-header{transition:transform .35s ease,opacity .35s ease}
html.film-in .site-header{transform:translateY(-110%);opacity:0;pointer-events:none}

/* swipe hint in the first caption */
.film-hint{display:flex;align-items:center;gap:.5rem;margin:1rem 0 0;font-size:.8rem;font-weight:600;color:var(--ss-ink);opacity:.85;transition:opacity .4s}
.film-hint svg{width:18px;height:18px;fill:none;stroke:var(--ss-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:film-nudge 1.6s ease-in-out infinite}
.film-started .film-hint{opacity:0}
@keyframes film-nudge{0%,100%{transform:translateY(3px)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.film-hint svg{animation:none}}

/* v2 */