/* Films page layer — "the screening room". Loaded only by /films; every rule is scoped to .mk-films.
   Projection-room charcoal and archival paper, a tungsten (projector-lamp) amber as the one accent,
   a serif title voice, stills that develop as they appear, and a beam of light that crosses a still on hover. */

/* ---- tokens ---- */
html[data-theme="dark"] .mk-films{--bg:#14110d;--bg2:#1c1813;--bg3:#262019;--fg:#f1e9db;--fg2:#b6ab99;--fg3:#877c6c;--line:#2b251d;
  --sig:#e6ad5c;--sigtx:#eab66d;--on-sig:#1b1208;--grid:rgba(230,173,92,.03);--fm-shadow:0,0,0;--fm-ease:cubic-bezier(.16,1,.3,1)}
html[data-theme="light"] .mk-films{--bg:#f5efe4;--bg2:#ece3d3;--bg3:#e1d5c0;--fg:#211b14;--fg2:#5d5444;--fg3:#8b7f6c;--line:#dcd0bb;
  --sig:#e2a14b;--sigtx:#93561a;--on-sig:#1b1208;--grid:rgba(60,42,20,.04);--fm-shadow:70,46,20;--fm-ease:cubic-bezier(.16,1,.3,1)}
/* the warm pool of a projector beam over the title */
.mk-films .fm-hero{background:radial-gradient(60% 120% at 18% 0%,color-mix(in srgb,var(--sig) 9%,transparent),transparent 70%);border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent)}

/* ---- typography ---- */
.mk-films .fm-h1{font:500 168px/.9 "Source Serif 4",serif;letter-spacing:-.04em;font-stretch:normal;font-optical-sizing:auto;margin-top:18px}
.mk-films .fm-h1 .zh{font:600 120px/1.05 "Noto Serif SC",serif;letter-spacing:.06em}
.mk-films .fm-k{font:600 15px/1 "Source Serif 4","Noto Serif SC",serif;letter-spacing:.1em;font-variant-caps:all-small-caps;text-transform:lowercase;color:var(--sigtx)}
.mk-films .fm-k .zh{text-transform:none;letter-spacing:.2em;font-size:13px}
.mk-films .fm-lede{font:italic 400 24px/1.5 "Source Serif 4",serif;color:var(--fg2);max-width:30ch}
.mk-films .fm-lede.zh{font:400 19px/1.9 "Noto Serif SC",serif}
.mk-films .fm-txt h2{font-weight:480;letter-spacing:-.018em;text-wrap:balance}
.mk-films .fm-n{font:italic 500 22px/1 "Source Serif 4",serif;color:var(--sigtx);letter-spacing:0}
.mk-films .fm-meta{font-size:12.5px;color:var(--fg3);gap:6px 14px}
.mk-films .fm-meta>span:not(.fm-n)+span::before{content:"·";margin-right:14px;color:color-mix(in srgb,var(--fg3) 60%,transparent)}
.mk-films .fm-txt li{font-variant-numeric:oldstyle-nums;text-wrap:pretty}
.mk-films .fm-txt li::before{background:var(--sigtx);opacity:.7;width:10px}
.mk-films .fm-role .k{color:var(--sigtx)}
.mk-films .fm-more h2{font:480 56px/1.05 "Source Serif 4","Noto Serif SC",serif;font-stretch:normal;letter-spacing:-.02em}
.mk-films .fm-more h2 .zh{font-weight:600}
/* the perforation between films, in warm amber */
.mk-films .fm-it::before{background:radial-gradient(circle,color-mix(in srgb,var(--sig) 38%,transparent) 1.6px,transparent 2px) 0 50%/16px 6px repeat-x;opacity:.8}

/* ---- surfaces: the still as a lit print ---- */
.mk-films .fm-still{border-radius:6px;isolation:isolate;box-shadow:0 2px 6px rgba(var(--fm-shadow),.12),0 34px 70px -34px rgba(var(--fm-shadow),.6)}
html[data-theme="dark"] .mk-films .fm-still{box-shadow:inset 0 0 0 1px rgba(255,236,205,.06),0 2px 8px rgba(0,0,0,.45),0 40px 80px -34px rgba(0,0,0,.8)}
.mk-films .fm-still::after{content:"";position:absolute;inset:-20% -60%;z-index:1;pointer-events:none;opacity:0;transform:translateX(-60%);
  background:linear-gradient(100deg,transparent 36%,rgba(255,224,170,.22) 48%,rgba(255,236,200,.08) 54%,transparent 64%)}
.mk-films .fm-play,.mk-films .fm-dur{z-index:2}
.mk-films .fm-play{transition:transform .35s var(--fm-ease),background-color .25s,color .25s}

/* ---- interactions ---- */
@media (hover:hover){
  .mk-films .fm-still:hover img{transform:scale(1.03)}
  .mk-films .fm-still:hover::after{animation:fmBeam 1.15s var(--fm-ease) forwards}
  .mk-films .fm-still:hover .fm-play{transform:scale(1.1);background:var(--sig);color:var(--on-sig);border-color:transparent}
}
.mk-films .fm-still:active{transform:scale(.985)}
/* Watch: a tungsten-lit button; hover glows a little, press dims it */
.mk-films .fm-watch{border-radius:999px;transition:transform .22s var(--fm-ease),box-shadow .3s var(--fm-ease),filter .2s}
@media (hover:hover){.mk-films .fm-watch:hover{filter:brightness(1.05);box-shadow:0 12px 28px -14px color-mix(in srgb,var(--sig) 75%,transparent),0 2px 4px rgba(var(--fm-shadow),.15)}}
.mk-films .fm-watch:active{transform:scale(.98);filter:brightness(.9);box-shadow:none}
/* channel links: soft fills instead of outlines (one border at most along any line of sight) */
.mk-films .fm-ch .btn-s{border-color:transparent;background:color-mix(in srgb,var(--fg) 6%,transparent);border-radius:999px}
@media (hover:hover){.mk-films .fm-ch .btn-s:hover{background:color-mix(in srgb,var(--fg) 11%,transparent);border-color:transparent}}
.mk-films .fm-ch .btn-s:active{transform:scale(.97);background:color-mix(in srgb,var(--fg) 15%,transparent)}
/* focus: gap, amber ring, soft lamp glow */
.mk-films a:focus-visible,.mk-films button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--sig),0 0 14px 2px color-mix(in srgb,var(--sig) 35%,transparent)}
.mk-films .fm-still:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--sig),0 0 18px 4px color-mix(in srgb,var(--sig) 35%,transparent)}

/* ---- keyframes ---- */
@keyframes fmBeam{0%{opacity:0;transform:translateX(-60%)}25%{opacity:1}100%{opacity:0;transform:translateX(60%)}}
@keyframes fmResolve{from{opacity:0;filter:blur(10px);letter-spacing:-.02em}to{opacity:1;filter:none}}
@keyframes fmRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* the title resolves out of soft focus, like a projector being focused */
html.hx-in .mk-films .fm-hero .fm-k{animation:fmRise .8s var(--fm-ease) .05s both}
html.hx-in .mk-films .fm-hero .fm-h1{animation:fmResolve 1.4s var(--fm-ease) .1s both}
html.hx-in .mk-films .fm-hero .fm-lede{animation:fmRise .9s var(--fm-ease) .5s both}
html.hx-in .mk-films .fm-hero .fm-ch{animation:fmRise .9s var(--fm-ease) .62s both}
/* stills develop as they enter: from a pale, soft exposure to the final print (replaces the wipe on this page) */
html.hx-rv .mk-films .fm-still img[data-rv-mask]{transition:opacity 1s var(--fm-ease),filter 1.8s var(--fm-ease),transform .6s var(--fm-ease)}
html.hx-rv .mk-films .fm-still img[data-rv-mask]:not(.in){clip-path:none;opacity:0;filter:brightness(1.7) saturate(0) blur(8px)}
/* the hero title is animated on load, so the line-by-line reveal is not doubled on it */
html.hx-in .mk-films .fm-h1[data-rv-line] .ln>span{transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  html.hx-in .mk-films *{animation:none!important}
  .mk-films .fm-still:hover::after{animation:none}
  .mk-films .fm-still:hover img,.mk-films .fm-still:active,.mk-films .fm-watch:active,.mk-films .fm-ch .btn-s:active{transform:none}
}
@media (max-width:899px){
  .mk-films .fm-h1{font-size:96px}
  .mk-films .fm-h1 .zh{font-size:68px}
  .mk-films .fm-lede{font-size:19px}
  .mk-films .fm-lede.zh{font-size:16.5px}
  .mk-films .fm-more h2{font-size:40px}
  .mk-films .fm-n{font-size:19px}
}