/* ================= 无忧传媒 · 赛事与运营长图 =================
   与游戏案例分开的一块：运营长图是"阅读型"素材（最高 12729px），
   塞进滚动舞台只会显得又细又长，所以这里用**卡片窗口 + 缓慢下移**的方式。

   长图卡的核心：
   · .ops-window 是固定高度的窗口，overflow:hidden；
   · 里面的图按原比例铺满宽度，默认停在顶部；
   · 鼠标移上去，图用一条很慢的 transition 往下平移（扫描感）；
   · 底部渐变收边 + "查看完整长图"，点开走查看层按宽度纵向滚动。

   只用 transform / opacity。尺寸集中在下面变量里。 */

/* 窗口高度由 aspect-ratio 决定，不再用固定高度变量 */

.ops-section{
  position:relative;
  padding:clamp(56px,8vh,110px) var(--gutter);
  background:var(--black-absolute);
  border-bottom:1px solid var(--border);
  z-index:4;
}
.ops-inner{max-width:1560px;margin:0 auto}

/* ---------- 抬头 ---------- */
.ops-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,44ch);
  gap:clamp(24px,4vw,72px);
  align-items:end;
  margin-bottom:clamp(32px,5vh,64px);
}
.ops-kicker{
  margin:0 0 10px;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--accent);
}
.ops-name{
  margin:0;
  font-family:var(--font-display-cn,'Noto Serif SC',serif);
  font-weight:700;
  font-size:clamp(26px,3vw,48px);
  line-height:1.16;
  letter-spacing:-.02em;
  color:var(--text-primary);
}
.ops-note{
  margin:0;
  font-size:14px;
  line-height:2;
  color:var(--text-secondary);
}
.ops-label{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:clamp(30px,4.6vh,58px) 0 clamp(18px,2.6vh,30px);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--text-secondary);
}
.ops-label::after{content:'';flex:1;height:1px;background:var(--border)}

/* ---------- 网格：4 × 1 横排 ----------
   用户要求"4 列横排、统一比例、下半部分隐藏起来统一尺寸"。
   4 列下每格约 340px 宽，文字仍然放得下；窄屏退到 2 列 / 1 列。 */
.ops-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,26px);
}
.ops-grid-events{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- 一张长图卡 ---------- */
.ops-card{
  display:block;
  margin:0;
  padding:0;
  border:0;
  background:none;
  text-align:left;
  /* 入场：逐张错峰（只播一次） */
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
  transition-delay:calc(var(--ops-i,0) * 60ms);
}
.ops-section.is-in .ops-card{opacity:1;transform:none}
.ops-card:nth-child(1){--ops-i:0}
.ops-card:nth-child(2){--ops-i:1}
.ops-card:nth-child(3){--ops-i:2}
.ops-card:nth-child(4){--ops-i:3}
.ops-card:nth-child(5){--ops-i:4}
.ops-card:nth-child(6){--ops-i:5}
.ops-card:nth-child(7){--ops-i:6}
.ops-card:nth-child(8){--ops-i:7}
.ops-card:nth-child(9){--ops-i:8}
.ops-card:nth-child(10){--ops-i:9}

/* 窗口：**统一比例**。长图只露顶部这一段，下半部分隐藏起来 ——
   这样十张卡尺寸一致，横向排开看着整齐，也"能多显示一些画面"（比竖条宽）。 */
.ops-window{
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  border-radius:3px;
  background:var(--graphite);
}
.ops-window img{
  display:block;
  width:100%;
  height:auto;
  /* 统一从顶部对齐：高的图下半部分被裁掉，矮的图底部留一点底色 */
  object-fit:cover;
  object-position:top center;
  transform:translate3d(0, 0, 0);
  will-change:transform;
}
/* 悬停：图扫过一遍。
   ⚠️ 原来用 7 秒的 linear transition —— 太慢，肉眼等于没动（用户反馈"放上去不自动滚动"）。
   改成 **3.4 秒的 animation**：起步就能看出在动，扫完停住；移开就回位。 */
.ops-card:hover .ops-window img,
.ops-card:focus-visible .ops-window img{
  animation:ops-scan 3.4s linear forwards;
}
@keyframes ops-scan{
  from{transform:translate3d(0, 0, 0)}
  to{transform:translate3d(0, calc(-1 * var(--ops-travel-px, 160px)), 0)}
}
/* 底部收边 + 提示 */
.ops-veil{
  position:absolute;
  left:0;right:0;bottom:0;
  height:38%;
  background:linear-gradient(180deg,rgba(5,5,6,0),rgba(5,5,6,.92));
  pointer-events:none;
}
.ops-more{
  position:absolute;
  left:clamp(12px,1.6vw,22px);
  bottom:clamp(10px,1.6vh,18px);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--accent);
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
  pointer-events:none;
}
.ops-more::before{content:'';width:20px;height:1px;background:currentColor}
.ops-card:hover .ops-more,
.ops-card:focus-visible .ops-more{opacity:1;transform:none}

.ops-meta{display:block;margin-top:12px}
.ops-meta i{
  display:block;
  font-style:normal;
  font-size:10px;
  letter-spacing:.18em;
  color:var(--text-secondary);
  margin-bottom:5px;
  opacity:.75;
}
.ops-meta b{
  display:block;
  font-size:14px;
  font-weight:400;
  color:var(--text-primary);
  transition:color .3s var(--ease-out);
}
.ops-card:hover .ops-meta b{color:var(--accent)}

/* ================= 窄屏 ================= */
@media(max-width:1100px){
  .ops-head{grid-template-columns:1fr;gap:20px;align-items:start}
  .ops-grid,.ops-grid-events{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .ops-grid,.ops-grid-events{grid-template-columns:1fr}
  .ops-window{aspect-ratio:4/3}
  /* 触屏没有 hover：改成常驻缓慢下移，一直是活的。
     ⚠️ 选择器要加 .ops-grid 提高优先级 —— 上面那条 `.ops-window img{animation:… forwards}`
     同样是 0,2,1 的权重，同权重下后者（上面那条在文件里更靠后？不，是更靠前但更具体）会赢，
     实测窄屏下根本没动。加一层类名压住它。 */
  .ops-grid .ops-window img{animation:ops-scan 7s ease-in-out infinite alternate}
  .ops-more{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .ops-card{opacity:1;transform:none;transition:none}
  .ops-window img{transition:none;animation:none}
  .ops-more{opacity:1;transform:none;transition:none}
}