/* ═══════════════════════════════════════════════════════════════
   校园影像 · 视频板块 / 影像馆 / 滚动叙事 / 响应式加固
   与 portal.css、motion.css 共用设计令牌，类名统一 film- 前缀
   ═══════════════════════════════════════════════════════════════ */

.film-teaser{position:relative;padding:clamp(70px,9vw,128px) 0 clamp(60px,7vw,96px);
  background:var(--band);color:var(--on-dark);overflow:hidden;isolation:isolate}
.film-teaser::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(110% 80% at 12% 8%,rgba(181,52,42,.16),transparent 62%),
             radial-gradient(90% 70% at 92% 92%,rgba(62,124,166,.14),transparent 60%)}
.film-teaser__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);
  gap:clamp(32px,5vw,76px);align-items:center}
.film-teaser .title{color:var(--on-dark)}
.film-teaser .lead{color:var(--on-dim);max-width:44ch}
.film-teaser .label--light{color:var(--brass-hi)}

.film-metrics{display:flex;gap:clamp(18px,3vw,40px);margin:30px 0 34px;flex-wrap:wrap}
.film-metrics>div{display:flex;flex-direction:column;gap:2px;min-width:76px}
.film-metrics b{font-family:var(--mono);font-size:clamp(30px,3.4vw,46px);font-weight:400;
  line-height:1;color:var(--brass-hi);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.film-metrics span{font-size:11.5px;letter-spacing:.14em;color:var(--on-faint)}

/* ── 播放器 ────────────────────────────────────────── */
.film-player{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:#17140f;box-shadow:0 34px 90px rgba(0,0,0,.42);
  border:1px solid rgba(244,240,231,.14)}
.film-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-player__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,15,.34),transparent 34%,transparent 62%,rgba(20,18,15,.72));
  transition:opacity .5s var(--e-out)}
.film-player.is-playing .film-player__veil{opacity:.55}
.film-player__cap{position:absolute;left:clamp(14px,2vw,24px);top:clamp(12px,2vw,20px);
  font-family:var(--serif);font-size:clamp(15px,1.5vw,21px);letter-spacing:.12em;
  color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.7);pointer-events:none;
  transition:opacity .4s var(--e-out),transform .5s var(--e-spring)}
.film-player__cap.is-swap{opacity:0;transform:translateY(-8px)}
.film-player__big{position:absolute;left:50%;top:50%;width:76px;height:76px;
  transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.62);
  background:rgba(24,20,16,.42);backdrop-filter:blur(8px);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:transform .5s var(--e-spring),background .3s,opacity .3s}
.film-player__big:hover{transform:translate(-50%,-50%) scale(1.1);background:var(--red)}
.film-player__big svg{width:26px;height:26px;fill:currentColor}
.film-player.is-playing .film-player__big{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.7)}
/* 整段影片取回内存的加载态：中央细环 + 大按钮降级，避免重复点击 */
.film-player.is-loading .film-player__big{opacity:.32;pointer-events:none}
.film-player.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;
  margin:-19px 0 0 -19px;border-radius:50%;border:2px solid rgba(255,255,255,.24);
  border-top-color:var(--brass-hi);animation:film-spin .9s linear infinite;pointer-events:none}
@keyframes film-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.film-player.is-loading::after{animation-duration:2.4s}}

.film-player__ctrl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;
  padding:12px clamp(12px,2vw,20px) 14px;background:linear-gradient(180deg,transparent,rgba(16,14,11,.82));
  color:#fff;transform:translateY(0);transition:opacity .35s}
.film-player__ctrl button{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.38);
  background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:transform .45s var(--e-spring),background .3s}
.film-player__ctrl button:hover{background:var(--red);transform:scale(1.08)}
.film-player__ctrl button:active{transform:scale(.94)}
/* 未播放时中央大按钮是主入口，控制条的播放键退到次要层次 */
.film-player__ctrl button[data-film-play]{opacity:.55}
.film-player.is-playing .film-player__ctrl button[data-film-play]{opacity:1}
.film-player__ctrl svg{width:16px;height:16px;fill:currentColor}
.film-player__seek{flex:1;min-width:60px;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;
  background:rgba(255,255,255,.28);outline:none;cursor:pointer}
.film-player__seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--brass-hi);border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.film-player__seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--brass-hi);border:2px solid #fff}
.film-player__time{font:11px/1 var(--mono);letter-spacing:.06em;color:rgba(255,255,255,.82);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.film-player__err{position:absolute;inset:0;display:none;place-content:center;justify-items:center;gap:14px;
  text-align:center;padding:24px;font-size:13px;color:var(--on-dim);background:#17140f}
.film-player__err button{padding:9px 20px;border-radius:40px;border:1px solid rgba(244,240,231,.4);
  background:transparent;color:var(--paper);font-size:12px;letter-spacing:.1em;cursor:pointer;
  transition:background .3s,transform .45s var(--e-spring)}
.film-player__err button:hover{background:var(--red);border-color:var(--red);transform:scale(1.06)}
.film-player.is-error .film-player__err{display:grid}
.film-player.is-error .film-player__ctrl,.film-player.is-error .film-player__big{display:none}

/* ── 四季章节 ──────────────────────────────────────── */
.film-chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:clamp(26px,4vw,52px)}
.film-chapters button{position:relative;text-align:left;padding:14px 16px 15px;min-height:74px;
  border:1px solid rgba(244,240,231,.18);border-radius:4px;background:rgba(244,240,231,.04);
  color:var(--on-dark);cursor:pointer;overflow:hidden;
  transition:transform .55s var(--e-spring),background .35s,border-color .35s}
.film-chapters button:hover{transform:translateY(-5px);background:rgba(244,240,231,.1)}
.film-chapters button.is-on{border-color:var(--brass-hi);background:rgba(200,154,69,.14)}
.film-chapters button.is-on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brass-hi)}
.film-chapters b{display:block;font:11px/1 var(--mono);letter-spacing:.16em;color:var(--brass-hi);margin-bottom:7px}
.film-chapters span{font-family:var(--serif);font-size:clamp(14px,1.4vw,18px);letter-spacing:.06em}
.film-chapters i{display:block;font-style:normal;font-size:11px;color:var(--on-faint);margin-top:4px}

/* ── 影像馆页头（视频背景） ────────────────────────── */
.film-hero{position:relative;min-height:min(76svh,720px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--band);color:var(--on-dark);isolation:isolate}
.film-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  animation:filmHeroKen 26s ease-in-out infinite alternate}
.film-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,18,15,.66),rgba(20,18,15,.34) 38%,rgba(20,18,15,.92))}
@keyframes filmHeroKen{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.4%,-1%,0)}}
.film-hero .wrap{padding-top:150px;padding-bottom:clamp(48px,7vw,92px);text-shadow:0 2px 20px rgba(0,0,0,.55)}
.film-hero .crumb,.film-hero .crumb a{color:rgba(244,240,231,.9)}
.film-hero .crumb span{color:rgba(244,240,231,.72)}
.film-hero .ph__meta{color:rgba(244,240,231,.82)}
.film-hero .ph__meta b{color:var(--brass-hi)}
.film-hero p{color:rgba(244,240,231,.92)}
.film-hero h1{font-family:var(--serif);font-size:clamp(40px,6vw,86px);line-height:1.14;
  letter-spacing:.03em;font-weight:400;margin:18px 0 14px}
.film-hero p{max-width:52ch;color:var(--on-dim);font-size:clamp(14px,1.3vw,17px)}

/* ── 影像馆主舞台 ──────────────────────────────────── */
.film-stage{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(22px,3vw,44px);align-items:start;margin-top:34px}
.film-stage .film-player{aspect-ratio:16/9}
.film-stage__list{display:flex;flex-direction:column;gap:8px}
.film-stage__list button{display:flex;align-items:baseline;gap:12px;text-align:left;width:100%;
  padding:14px 16px;border:1px solid var(--line);border-radius:4px;background:var(--paper);
  color:var(--cream);cursor:pointer;transition:transform .5s var(--e-spring),border-color .3s,background .3s}
.film-stage__list button:hover{transform:translateX(5px);border-color:var(--brass)}
.film-stage__list button.is-on{background:rgba(200,154,69,.12);border-color:var(--brass)}
.film-stage__list b{font:11px/1 var(--mono);color:var(--red);letter-spacing:.12em}
.film-stage__list span{font-family:var(--serif);font-size:16px}
.film-stage__list small{margin-left:auto;color:var(--faint);font:11px/1 var(--mono)}

/* ── 四季时间轴 ────────────────────────────────────── */
.film-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin-top:38px}
.film-timeline article{border-top:1px solid var(--line);padding-top:16px}
.film-timeline__img{aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:var(--ink-2)}
.film-timeline__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--e-out)}
.film-timeline article:hover img{transform:scale(1.07)}
.film-timeline b{display:block;margin:14px 0 6px;font:11px/1 var(--mono);letter-spacing:.16em;color:var(--red)}
.film-timeline h3{font-family:var(--serif);font-size:20px;font-weight:400;margin:0 0 8px}
.film-timeline p{font-size:12.5px;color:var(--dim);line-height:1.8}

/* ── 幕后信息 ──────────────────────────────────────── */
.film-about{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:36px}
.film-about>div{background:var(--paper);padding:clamp(20px,3vw,34px)}
.film-about b{display:block;font:11px/1 var(--mono);letter-spacing:.16em;color:var(--red);margin-bottom:12px}
.film-about h3{font-family:var(--serif);font-size:clamp(18px,2vw,24px);font-weight:400;margin-bottom:10px}
.film-about p{font-size:12.5px;color:var(--dim);line-height:1.85}

/* ── 滚动叙事 / 视差 ───────────────────────────────── */
[data-parallax]{will-change:transform}
.film-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--e-out),transform .95s var(--e-spring)}
.film-reveal.is-in{opacity:1;transform:none}

/* ── 焦点可见（键盘可达） ──────────────────────────── */
.film-teaser :focus-visible,.film-hero :focus-visible,.film-stage :focus-visible,
.film-chapters :focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}

/* ── 响应式 ────────────────────────────────────────── */
@media(max-width:1080px){
  .film-teaser__in{grid-template-columns:1fr;gap:38px}
  .film-timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .film-stage{grid-template-columns:1fr}
  .film-stage__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .film-stage__list button{flex-direction:column;gap:7px;align-items:flex-start}
  .film-stage__list small{margin-left:0}
  .film-about{grid-template-columns:1fr}
}
@media(max-width:720px){
  .film-metrics{gap:20px;margin:24px 0 28px}
  .film-metrics b{font-size:32px}
  .film-player{border-radius:4px}
  .film-player__big{width:62px;height:62px}
  .film-player__ctrl{gap:8px;padding:10px 12px 12px}
  .film-player__ctrl button{width:44px;height:44px}
  .film-player__ctrl button[data-film-full]{display:none}
  .film-chapters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .film-chapters button{min-height:68px;padding:12px 13px}
  .film-hero{min-height:64svh}
  .film-hero .wrap{padding-top:118px}
  .film-stage__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .film-timeline{gap:22px 12px}
  .film-timeline h3{font-size:17px}
}
@media(max-width:420px){
  .film-player__time{font-size:10px}
  .film-chapters span{font-size:14px}
  .film-timeline{grid-template-columns:1fr}
}

/* ── 无障碍降级：降速而非关闭 ──────────────────────── */
@media(prefers-reduced-motion:reduce){
  .film-hero__bg{animation-duration:90s}
  .film-player__big,.film-player__ctrl button,.film-chapters button,
  .film-stage__list button,.film-timeline__img img{transition-duration:.16s}
  .film-reveal{opacity:1;transform:none}
  [data-parallax]{transform:none!important}
}