/* ============================================
   hero-film.css — 首页 Hero 电影胶片轮播
   独立功能：数据来自后台「首页轮播胶片」
   上下两排 · 上排向右 / 下排向左 · 无缝循环
   ============================================ */

/* 尺寸随屏幕等比缩放：以 1920 宽（300px 帧）为基准，齿孔/边距/字号同步缩放 */
.hero-film{--sprocket:clamp(6px,.55vw,12px);--sprocket-gap:clamp(5px,.45vw,10px);--frame-w:clamp(200px,22vw,430px);
  position:absolute;left:-4%;width:108%;top:50%;transform:translateY(-50%) rotate(-2deg);
  z-index:5;display:flex;flex-direction:column;gap:clamp(10px,1vw,20px);pointer-events:none}
.hero-film.hidden{display:none}

/* ---- 胶片排（黑底 + 上下齿孔） ---- */
.film-row{position:relative;overflow:hidden;background:#0d0d0d;border:3px solid #000;
  box-shadow:8px 8px 0 rgba(0,0,0,.85)}
.film-row::before,.film-row::after{content:"";position:absolute;left:0;right:0;height:var(--sprocket);z-index:2;pointer-events:none;
  background:repeating-linear-gradient(90deg,#fff 0 var(--sprocket),transparent var(--sprocket) calc(var(--sprocket)*2.9))}
.film-row::before{top:var(--sprocket-gap)}
.film-row::after{bottom:var(--sprocket-gap)}

/* ---- 跑马灯轨道 ---- */
.film-track{display:flex;width:max-content;padding:calc(var(--sprocket) + var(--sprocket-gap)*2) 0;animation:filmL 58s linear infinite}
.film-row--right .film-track{animation-name:filmR}
.film-row:hover .film-track{animation-play-state:paused}
@keyframes filmL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes filmR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---- 胶片帧 ---- */
.film-frame{position:relative;flex:0 0 auto;width:var(--frame-w);height:calc(var(--frame-w)*.65);margin-right:clamp(8px,.75vw,18px);
  background:#222 center/cover no-repeat;
  cursor:pointer;pointer-events:auto}
.film-no{position:absolute;top:6px;left:6px;background:#000;color:#fff;
  font-size:clamp(8px,.6vw,14px);font-weight:800;letter-spacing:1px;padding:2px 7px;font-family:monospace}
.film-cap{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.82);color:#fff;
  font-size:clamp(9px,.65vw,15px);font-weight:700;letter-spacing:1px;padding:4px 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- 帧预览灯箱（独立，不依赖画廊 lightbox） ---- */
.hf-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.hf-lightbox img{max-width:88vw;max-height:78vh;border:4px solid #fff;outline:4px solid #000;background:#000}
.hf-lb-title{color:#fff;font-size:15px;font-weight:900;letter-spacing:2px;text-shadow:2px 2px 0 #000}
.hf-lb-count{color:#bbb;font-size:12px;font-family:monospace;letter-spacing:2px}
.hf-lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  background:#fff;border:3px solid #000;color:#000;font-size:22px;font-weight:900;
  display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;
  box-shadow:4px 4px 0 #000;transition:all .15s}
.hf-lb-arrow:hover{background:#000;color:#fff}
.hf-lb-prev{left:4vw}
.hf-lb-next{right:4vw}
.hf-lb-close{position:absolute;top:24px;right:24px;width:44px;height:44px;background:#fff;
  border:3px solid #000;color:#000;font-size:24px;font-weight:900;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:4px 4px 0 #000}
.hf-lb-close:hover{background:#000;color:#fff}

/* ---- 跑马灯（紧贴胶片下方，一体化样式） ---- */
.hero-film .fx-ticker{margin-top:1px;border:3px solid #000;box-shadow:8px 8px 0 rgba(0,0,0,.85)}
.hero-film .fx-ticker-track{padding:10px 0}

/* ---- 响应式 ---- */
@media (max-width:768px){
  .hero-film{left:-6%;width:112%;gap:10px;--sprocket:6px;--sprocket-gap:5px;--frame-w:200px}
  .hero-film .fx-ticker{margin-top:10px}
  .hero-film .fx-ticker-track{padding:8px 0}
  .film-track{animation-duration:32s}
  .film-no{font-size:8px;padding:1px 5px}
  .film-cap{font-size:9px;padding:2px 7px}
}
@media (prefers-reduced-motion:reduce){
  .film-track{animation:none}
}