@font-face { font-family:Corinthia; src:url('../assets/cinematic/Corinthia-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:Inter; src:url('../assets/cinematic/Inter-Variable.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; }
:root { color-scheme:dark; font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; background:#000; color:#fff; }
* { box-sizing:border-box; }
body { margin:0; }
[hidden] { display:none !important; }
a { color:inherit; }
a:focus-visible { outline:3px solid white; outline-offset:4px; }
/* 按 Figma 画布排版，再由本样式的脚本按窗口宽高等比适配；不裁掉正文来隐藏滚动。 */
/* 容器只收起未缩放的布局边界；实际内容须按完整高度缩入容器，不能裁掉页脚。 */
.cinematic-viewport { position:relative; width:100%; height:100svh; overflow:clip; }
.cinematic-frame { --cinematic-extra:0px; display:flex; flex-direction:column; position:absolute; top:0; left:50%; isolation:isolate; width:393px; min-height:var(--cinematic-height,762px); transform:translateX(-50%) scale(var(--cinematic-scale,1)); transform-origin:center top; background:#000; }
.cinematic-nav { position:absolute; top:max(15px,env(safe-area-inset-top)); left:20px; z-index:3; }
.cinematic-logo { display:flex; align-items:center; gap:3px; }
.cinematic-logo img { display:block; width:98px; height:42px; object-fit:contain; }
.cinematic-main { position:relative; display:flex; flex-direction:column; justify-content:flex-start; flex:none; }
.cinematic-art { position:relative; flex:none; height:371px; overflow:hidden; background:radial-gradient(ellipse at 45% 25%,#34241f,#0a0808 80%); }
/* 主图只填充已分配的视觉区域，不用图片固有高度撑大桌面网格。 */
.cinematic-art picture { position:absolute; inset:0; display:block; height:100%; }
/* 默认素材已经按设计裁切；高屏只分配区块间距，不再次放大裁掉人物和图片内文字。 */
.cinematic-art picture .hero-image { object-fit:contain; }
.hero-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
.hero-landscape { display:none; }
.cinematic-art::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#0008,transparent 24%,transparent 64%,#000); }
.hero-empty { position:absolute; z-index:1; inset:40% 18px auto; color:#aaa; text-align:center; line-height:1.7; font-size:13px; }
.cinematic-copy { position:relative; flex:none; width:100%; z-index:2; margin:-63px auto 0; padding:0 24px; max-width:600px; text-align:center; }
h1 { margin:0; font:700 40px/1.2 Corinthia,cursive; overflow-wrap:anywhere; white-space:pre-line; text-shadow:0 2px 14px #000; }
html[lang="zh"] h1 { font-family:"PingFang SC","Microsoft YaHei",sans-serif; font-size:28px; line-height:1.4; }
.landing-description { color:#b0a5a6; font-size:14px; line-height:24px; margin-top:calc(8px + var(--cinematic-extra) * .16); overflow-wrap:anywhere; white-space:pre-line; }
.landing-description p { margin:0; }
.actions { display:grid; gap:12px; margin:calc(16px + var(--cinematic-extra) * .24) auto 0; max-width:370px; }
.action { display:flex; align-items:center; justify-content:center; gap:12px; min-height:46px; padding:12px 22px; border-radius:32px; background:#ff4747; font-size:13px; line-height:22px; font-weight:600; text-decoration:none; overflow-wrap:anywhere; }
.action:hover { background:#ff6262; }
.action:active { background:#e63c3c; }
.action.secondary { background:#151515; border:1px solid #555; }
.cinematic-tagline { margin:calc(20px + var(--cinematic-extra) * .24) 0 0; font-size:20px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.cinematic-film { position:relative; flex:none; margin-top:calc(22px + var(--cinematic-extra) * .24); }
.selected-film::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#000b,transparent 4%,transparent 96%,#000b); }
.default-posters { display:block; }
.default-posters img { display:block; width:100%; height:auto; }
/* 只为实际选中的封面绘制胶片边框；不复制卡片凑数，少量图片居中。 */
.covers { display:flex; justify-content:safe center; gap:6px; padding:12px 10px; min-height:150px; overflow-x:auto; scrollbar-width:thin; background:linear-gradient(90deg,#3b3038,#68545b 50%,#3b3038); }
.covers::before,.covers::after { content:""; position:absolute; left:0; right:0; height:4px; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 4px,#090809 4px 11px,transparent 11px 14px); }
.covers::before { top:4px; }.covers::after { bottom:4px; }
.cover-tile { flex:0 0 71px; aspect-ratio:236/418; overflow:hidden; border:1px solid #bfa8ae55; background:#080808; }
.cover-tile img { display:block; width:100%; height:100%; object-fit:contain; }
.covers[data-count="0"] { display:none; }
.cover-empty { margin:0; padding:54px 20px; color:#aaa; text-align:center; font-size:13px; line-height:1.6; }
.cinematic-genres { display:flex; flex:none; justify-content:center; flex-wrap:wrap; margin-top:12px; padding:0 24px; color:#aaa; font-size:9px; line-height:11px; text-transform:uppercase; overflow-wrap:anywhere; }
.cinematic-genres span+span::before { content:"/"; margin:0 6px; }
@media(max-width:899px) { .cinematic-genres+.cinematic-footer { padding-top:calc(20px + var(--cinematic-extra) * .12); } }
.cinematic-footer { flex:none; margin-top:auto; text-align:center; color:#777; padding:calc(43px + var(--cinematic-extra) * .12) 24px max(8px,env(safe-area-inset-bottom)); font-size:10px; line-height:14px; }
.cinematic-footer p { margin:0; }.cinematic-footer a { display:inline-block; padding:12px; text-decoration:none; }
@media(min-width:900px) {
 .cinematic-frame { --layout-unit:1px; width:1920px; min-height:1080px; }
 .cinematic-genres { display:none; }
 .cinematic-nav { top:calc(38 * var(--layout-unit)); left:2.5%; }
 .cinematic-logo img { width:calc(239 * var(--layout-unit)); height:calc(55 * var(--layout-unit)); }
 .cinematic-main { display:block; min-height:642px; }
 /* 固定设计可见区 1060×642；窗口适配只整体缩放，不再随页面高度放大人物。 */
 .cinematic-art,.cinematic-art:has(picture) { position:absolute; top:0; right:117px; width:1060px; height:642px; overflow:visible; background:#000; }
 .cinematic-art picture { overflow:hidden; }
 .cinematic-art picture .hero-image { object-fit:contain; object-position:right top; }
 .hero-portrait { display:none; }.hero-landscape { display:block; }
 .cinematic-art::before { content:""; position:absolute; left:-9.433962%; right:0; top:0; bottom:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#080709,rgba(8,7,9,.902) 26%,rgba(8,7,9,.212) 56%,transparent); }
 .cinematic-art::after { inset:auto 0 0 5.283019%; height:31.464174%; background:linear-gradient(180deg,transparent,#080709); }
 .cinematic-copy { width:100%; max-width:none; padding:169px 0 47px 150px; margin:0; text-align:left; pointer-events:none; }
 .cinematic-copy h1 { max-width:calc(962 * var(--layout-unit)); font-size:calc(112 * var(--layout-unit)); line-height:1.12; }
 html[lang="zh"] h1 { font-size:58px; line-height:1.4; }
 .landing-description { font-size:calc(22 * var(--layout-unit)); line-height:1.5; max-width:calc(962 * var(--layout-unit)); margin-top:calc(10 * var(--layout-unit)); }
 .landing-description p+p { margin-top:calc(24 * var(--layout-unit)); }
 .actions { width:calc(345 * var(--layout-unit)); max-width:none; margin:calc(32 * var(--layout-unit)) 0 0; pointer-events:auto; }
 .action { min-height:max(46px,calc(64 * var(--layout-unit))); padding:calc(16 * var(--layout-unit)) 20px; font-size:max(13px,calc(20 * var(--layout-unit))); line-height:1.6; }
 .cinematic-tagline { margin:calc(60 * var(--layout-unit)) 0 0; font-size:calc(36 * var(--layout-unit)); line-height:calc(44 * var(--layout-unit)); }
 .cinematic-film { margin:0 6.09375%; }
 .covers { gap:calc(12 * var(--layout-unit)); padding:calc(20 * var(--layout-unit)) calc(14 * var(--layout-unit)); }
 .cover-tile { flex-basis:max(90px,calc(184 * var(--layout-unit))); }
 .covers::before,.covers::after { height:calc(8 * var(--layout-unit)); background:repeating-linear-gradient(90deg,transparent 0 calc(8 * var(--layout-unit)),#090809 calc(8 * var(--layout-unit)) calc(22 * var(--layout-unit)),transparent calc(22 * var(--layout-unit)) calc(28 * var(--layout-unit))); }
 .covers::before { top:calc(8 * var(--layout-unit)); }.covers::after { bottom:calc(8 * var(--layout-unit)); }
 .cinematic-footer { padding:max(16px,calc(24 * var(--layout-unit))) 24px max(16px,calc(24 * var(--layout-unit)),env(safe-area-inset-bottom)); font-size:max(10px,calc(11 * var(--layout-unit))); line-height:1.7; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }