/* 上下胶卷处于画布与控件之间，不接收鼠标，也不覆盖正文的阅读区。 */
.cinema-film-reels{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--film-opacity,1)}.cinema-film-strip{position:absolute;left:0;width:100%;height:clamp(64px,9vh,134px);overflow:hidden;background:#181613a8;border-top:1px solid #8a7c6240;border-bottom:1px solid #8a7c6233;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}.film-top{top:max(54px,4.4vh);rotate:-.3deg}.film-bottom{bottom:max(62px,4.4vh);rotate:.35deg}.film-group:before,.film-group:after{content:'';position:absolute;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,#b5a78b59 0 9px,transparent 9px 20px);z-index:1}.film-group:before{top:5px}.film-group:after{bottom:5px}.film-track{display:flex;width:max-content;height:100%;animation:film-transport 38s linear infinite;will-change:transform}.film-bottom .film-track{animation-duration:46s;animation-direction:reverse}.film-group{position:relative;display:flex;flex-shrink:0;gap:12px;padding:17px 12px 17px 0;box-sizing:border-box}.film-cell{position:relative;flex:none;width:clamp(135px,17vw,240px);height:100%;border:1px solid #9c8d6a35;background:linear-gradient(140deg,#4e453a16,#0e0e0c55);overflow:hidden}.film-cell svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#b2a58b;stroke-width:.7;opacity:.25}.film-frame-number{position:absolute;top:3px;left:6px;color:#bdaf914f;font:7px monospace;letter-spacing:.15em}.film-cell small{position:absolute;bottom:2px;right:5px;font:5px monospace;letter-spacing:.2em;color:#c5b99844}.cinema-film-patina{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,#cfba8f03 0 1px,transparent 1px 4px)}.cinema-film-patina:before,.cinema-film-patina:after{content:'';position:absolute;width:1px;top:16%;height:57%;left:23%;background:#ddc9a1;opacity:.045;animation:film-scratch 9s steps(6,end) infinite}.cinema-film-patina:after{left:81%;top:35%;height:29%;animation-delay:-4s;opacity:.035}
@keyframes film-transport{to{transform:translateX(-50%)}}@keyframes film-scratch{0%,50%,100%{translate:0 0;opacity:.02}22%{translate:13px 3%;opacity:.06}72%{translate:-9px -4%;opacity:.035}}
.dark-cinema[data-film-motion=false] .film-track,.dark-cinema[data-film-motion=false] .cinema-film-patina:before,.dark-cinema[data-film-motion=false] .cinema-film-patina:after{animation-play-state:paused}
@media(max-width:700px){.cinema-film-strip{height:clamp(44px,7vh,64px)}.film-top{top:55px}.film-bottom{bottom:60px}.film-group{padding-block:13px;gap:8px;padding-right:8px}.film-cell{width:145px}.film-group:before,.film-group:after{height:4px}.film-group:before{top:4px}.film-group:after{bottom:4px}.film-frame-number{font-size:5px}.film-cell small{display:none}}
@media(max-height:620px){.cinema-film-strip{height:38px}.film-top{top:43px}.film-bottom{bottom:45px}.film-group{padding-block:11px}.film-cell{width:140px}}
@media(prefers-reduced-motion:reduce){.film-track,.cinema-film-patina:before,.cinema-film-patina:after{animation:none}}
