/* Shared frame for the film concepts. Each page sets --bg, --ink, --dim, --line, --accent and its fonts. */
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{font-family:var(--text);font-size:1.05rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pad{padding-left:var(--pad);padding-right:var(--pad)}
:root{--pad:clamp(20px,5vw,72px)}

.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:calc(16px + env(safe-area-inset-top)) var(--pad) 12px}
.top .demo{font-size:.82rem;color:var(--dim)}

[data-film]{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.media,.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media{background:var(--bg)}
.media video{opacity:0;transition:opacity .8s ease}
.ch{position:absolute;z-index:3;opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ch.on{opacity:1;transform:none;pointer-events:auto}
.bar{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:calc(18px + env(safe-area-inset-bottom));height:1px;background:var(--line)}
.bar::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0))}

[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
[data-reveal].on{opacity:1;transform:none}

.foot{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;padding:28px var(--pad) calc(28px + env(safe-area-inset-bottom));color:var(--dim);font-size:.9rem;border-top:1px solid var(--line)}

/* reduced motion: the chapters become a readable list over the last frame */
.still .stage{position:relative;height:auto;min-height:100vh}
.still .ch{position:relative;inset:auto;opacity:1;transform:none;margin:0 var(--pad) 28px;max-width:40ch}
.still .media{position:fixed;opacity:.35}
.still .bar{display:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}