/* ============================================================
   z11z361（老板 2026-10-23 18:03 定：原 6 种「字排得正」太简单太丑，
   照他发的参考视频（TTTISE 极简 3D 滑块）+ 剪影手法重做）
   中间大图正中的英文浮字：后台可填、也可留空；6 种样式任选。
   · 前台 /anli（cases.html）与后台成功案例表单共用这一份，保证「后台样卡 = 前台效果」
   · 字号一律按卡宽 --mw 等比缩放（中间大图在各视口下宽约 490~1150px，写死 px 在高分屏会变得很小）
   · 位置统一在正中，避让卡片四角已有的 ①②③ 三处文字

   ★ 定位铁律：用 `translate` 属性做居中，不要用 `transform: translate(-50%,-50%)`——
     这样 transform 才是空的，入场动画和样卡循环动效可以自由用 transform，不用每帧重复补一半移。
   ★ 字距铁律：每种样式自带 --ls，入场动画从 `var(--ls) + 额外字距` 收到 --ls；
     text-indent 必须跟着走（否则末字后的字距会把整行视觉重心往左带）。
   ============================================================ */
.mid-en {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  z-index: 3; pointer-events: none;
  max-width: 88%; text-align: center; overflow-wrap: break-word;
  font-family: "Helvetica Neue", "Inter", "Segoe UI", Helvetica, Arial, "PingFang SC", sans-serif;
  line-height: 1.06; color: #fff;
  font-style: normal;                 /* 后台选择器用 <i> 做样卡，别让它变斜体 */
  /* ★ 只能写兜底、不能在这里声明 --mw：本规则 (0,1,0) 会盖掉 #colMain 内联的 --mw（卡宽），
     英文就永远按 640px 算、跟卡宽无关（z11z361 修） */
  --ls: .004em;
  letter-spacing: var(--ls); text-indent: var(--ls);
  /* ★ z11z376：把「样式自带的滤镜」收进 --en-f，入场动画的 filter 用 var(--en-f) 打底。
     原来入场动画最后一帧直接写 `filter: blur(0)`，会把描边/剪影/衬线的 drop-shadow 整条冲掉
     （实测跑完 computed filter 就是 blur(0px)，亮照片上的托底暗影全没了）。 */
  --en-f: ;
  filter: var(--en-f);
}

/* ① 居中 · 光影 —— 参考视频同款：Title Case、中等字重、紧字距；
   区别是加了「近轮廓 + 中景压暗 + 远景柔光」三层影，产品照再亮也能立住 */
.mid-en.s-center {
  --ls: .004em;
  font-size: calc(var(--mw, 640px) * .072);
  font-weight: 500;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .45),
    0 4px 14px rgba(0, 0, 0, .38),
    0 16px 44px rgba(0, 0, 0, .42);
}

/* ② 大写 · 宽字距 —— 时装牌路数：细字重、夸张字距，底下压一条短细线当「落款」 */
.mid-en.s-caps {
  --ls: .30em;
  font-size: calc(var(--mw, 640px) * .040);
  font-weight: 400;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .97);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .42), 0 8px 26px rgba(0, 0, 0, .40);
}
.mid-en.s-caps::after {
  content: ""; position: absolute; left: 50%; bottom: -.72em;
  translate: -50% 0;
  width: calc(var(--mw, 640px) * .086); height: 2px;      /* 跟着卡宽缩放，样卡里不会被放大成一团白 */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 26%, #fff 74%, rgba(255, 255, 255, 0) 100%);
  /* 白线压到亮底（案例照中间常是亮屏）就彻底看不见：2px 高 + 紧贴的暗影才立得住 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .78), 0 0 1px rgba(0, 0, 0, .6);
  transform-origin: 50% 50%;
}

/* ③ 描边 · 流光 —— 空心描边打底，一道亮光沿字内扫过（background-clip:text 只染字形）
   ★ 必须 -webkit-text-fill-color 透明，只写 color 在带 text-stroke 时填色不一定被抠掉 */
.mid-en.s-outline {
  --ls: .06em;
  font-size: calc(var(--mw, 640px) * .072);
  font-weight: 800;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  -webkit-text-stroke-color: rgba(255, 255, 255, .92);
  -webkit-text-stroke-width: calc(var(--mw, 640px) * .0028);
  background-image: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 43%,
    rgba(255, 255, 255, .95) 50%,
    rgba(255, 255, 255, 0) 57%);
  background-size: 260% 100%; background-position: 160% 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  /* 描边在花底上会「断」，压一层暗影兜住轮廓（text-shadow 画的是字形轮廓，与填充色无关） */
  --en-f: drop-shadow(0 2px 9px rgba(0, 0, 0, .52));
}

/* ④ 衬线 · 斜体 —— 画册/杂志感，字比无衬线再大一点点才压得住 */
.mid-en.s-serif {
  --ls: .012em;
  font-family: Georgia, "Times New Roman", "Songti SC", SimSun, serif;
  font-size: calc(var(--mw, 640px) * .076);
  font-style: italic; font-weight: 400;
  /* 银色流光：字本身是一道从暗银到亮银的渐变，光带慢慢扫过（比纯白静止高级） */
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  background-image: linear-gradient(104deg,
    rgba(255, 255, 255, .60) 0%,
    rgba(255, 255, 255, .74) 34%,
    #ffffff 50%,
    rgba(255, 255, 255, .74) 66%,
    rgba(255, 255, 255, .60) 100%);
  background-size: 230% 100%; background-position: 0% 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  --en-f: drop-shadow(0 2px 10px rgba(0, 0, 0, .50)) drop-shadow(0 10px 30px rgba(0, 0, 0, .38));
}

/* ⑤ 剪影 · 镂空（新增）—— 近黑实心「剪影」，只留一圈白细描边 + 外圈柔光。
   ★ 为什么不用 difference 反色混合：实测在真实案例照片（中间亮、四周暗）上，
     反色后字与背景同为中间调，整行变成灰绿色糊块，根本看不清 —— 已弃用。
     现在这版：亮照片上出深色剪影（最像「剪影」）、暗照片上靠白描边 + 柔光守住轮廓。 */
.mid-en.s-silhouette {
  --ls: .02em;
  font-size: calc(var(--mw, 640px) * .078);
  font-weight: 600;
  color: rgba(8, 11, 16, .88);
  text-shadow: none;
  /* ★ 不用 -webkit-text-stroke：浅色照片上白描边会变成「双重字」。
     改成白色柔光包边 —— 亮底上自然消失（只剩干净的深色剪影），暗底上把字形托出来 */
  --en-f:
    drop-shadow(0 0 calc(var(--mw, 640px) * .004) rgba(255, 255, 255, .55))
    drop-shadow(0 0 calc(var(--mw, 640px) * .028) rgba(255, 255, 255, .30))
    drop-shadow(0 calc(var(--mw, 640px) * .012) calc(var(--mw, 640px) * .03) rgba(0, 0, 0, .38));
}

/* ⑥ 玻璃 · 吊牌 —— 原来是死白底牌，改成磨砂玻璃胶囊，跟本站侧栏的玻璃语言一致 */
.mid-en.s-boxed {
  --ls: .14em;
  font-size: calc(var(--mw, 640px) * .032);
  font-weight: 600;
  text-transform: uppercase;
  color: #fff; text-shadow: none;
  padding: .64em 1.25em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .17);
  border: 1px solid rgba(255, 255, 255, .52);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .38);
}

/* —— 旧样式 s-tagline（小字双细线）已从选择器撤下，留着只为老数据还能正常显示 —— */
.mid-en.s-tagline {
  --ls: .34em;
  font-size: calc(var(--mw, 640px) * .030);
  font-weight: 500;
  text-transform: uppercase; color: rgba(255, 255, 255, .92);
  padding: .95em 0;
}
.mid-en.s-tagline::before,
.mid-en.s-tagline::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: rgba(255, 255, 255, .6);
}
.mid-en.s-tagline::before { top: 0; }
.mid-en.s-tagline::after { bottom: 0; }

/* ============================================================
   前台入场：切到下一张时英文「字幕式」浮出 —— 轻微放大 + 去模糊 + 淡入，
   取参考视频里旧词缩小淡出、新词由小长开的那口气。
   ★ 只在 .en-in 上跑一次（cases.html 的 mountSlide 切图时挂），尺寸重排不重放。
   ============================================================ */
.mid-en.en-in {
  /* ★ 缓动别用 (.16,.82) 那种前段极快的曲线：实测 220ms 就已经到位，肉眼等于「闪一下」。
     这里改成中段发力，动作能看清，同时整段 ≤ .95s，不会拖住切图节奏。 */
  animation: enEnter .95s cubic-bezier(.22, .68, .22, 1) both;
}
@keyframes enEnter {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.90);
    filter: var(--en-f) blur(9px);
    letter-spacing: calc(var(--ls) + .22em);
    text-indent: calc(var(--ls) + .22em);
  }
  38% { opacity: 1; }
  100% {
    opacity: 1;
    transform: none;
    filter: var(--en-f) blur(0px);      /* ★ 必须带 var(--en-f)：写死 blur(0) 会冲掉各样式自带的 drop-shadow */
    letter-spacing: var(--ls);
    text-indent: var(--ls);
  }
}

/* ============================================================
   z11z376（老板 2026-10-23 19:53 定）前台英文切图后要有一段 2 秒动效；
   19:57 追加口径：**动完这 2 秒就定住，不许再循环**（`1 both`，100% 帧就是静止态，收尾无缝）。跟后台样卡那 6 段动效同手感，但起步/收尾对齐各自的 --ls，
   这样入场动画结束时（正好也是 --ls）能无缝接手，不会看到字距「跳一下」。
   ★ 只作用在 #stage 内（后台样卡有自己那套 #page-cases 规则，互不干扰）。
   ★ 用 transform 做位移是安全的：居中靠的是 translate 属性，transform 是空的。
   ============================================================ */
#stage .mid-en.s-center     { animation: enLoopGlow  2s ease-in-out 1 both; }
#stage .mid-en.s-silhouette { animation: enLoopCut   2s ease-in-out 1 both; }
#stage .mid-en.s-outline    { animation: enLoopSweep 2s linear 1 both; }
#stage .mid-en.s-caps       { animation: enLoopTrack 2s ease-in-out 1 both; }
#stage .mid-en.s-serif      { animation: enLoopShine 2s ease-in-out 1 both; }
#stage .mid-en.s-boxed      { animation: enLoopLift  2s ease-in-out 1 both; }

/* 入场那位要跟循环并存：同一个 `animation` 属性只能有一条声明，
   所以在 .en-in 状态下把两个动画写成一张列表 —— 循环排在后面 + .95s 延迟，
   正好接在入场结束那一刻（同一属性冲突时，列表里靠后的动画优先）。 */
#stage .mid-en.en-in.s-center     { animation: enEnter .95s cubic-bezier(.22,.68,.22,1) both, enLoopGlow  2s ease-in-out 0s 1 both; }
#stage .mid-en.en-in.s-silhouette { animation: enEnter .95s cubic-bezier(.22,.68,.22,1) both, enLoopCut   2s ease-in-out 0s 1 both; }
#stage .mid-en.en-in.s-outline    { animation: enEnter .95s cubic-bezier(.22,.68,.22,1) both, enLoopSweep 2s linear      0s 1 both; }
#stage .mid-en.en-in.s-caps       { animation: enEnter .95s cubic-bezier(.22,.68,.22,1) both, enLoopTrack 2s ease-in-out 0s 1 both; }
#stage .mid-en.en-in.s-serif      { animation: enEnter .95s cubic-bezier(.22,.68,.22,1) both, enLoopShine 2s ease-in-out 0s 1 both; }
#stage .mid-en.en-in.s-boxed      { animation: enEnter .95s cubic-bezier(.22,.68,.22,1) both, enLoopLift  2s ease-in-out 0s 1 both; }

/* ① 居中 · 光影：呼吸式明暗 + 极轻的上下浮（0% 与 100% 都等于「静止态」，入场结束不跳） */
@keyframes enLoopGlow {
  0%, 100% { opacity: 1;   transform: none; }
  50%      { opacity: .86; transform: translateY(-2px); }
}
/* ② 大写 · 宽字距：字距慢慢放开再收（时装牌那种吸气感） */
@keyframes enLoopTrack {
  0%, 100% { letter-spacing: var(--ls);             text-indent: var(--ls); }
  50%      { letter-spacing: calc(var(--ls) + .10em); text-indent: calc(var(--ls) + .10em); }
}
/* ③ 描边 · 流光：一道亮光每 2 秒沿字内扫过一遍
   ★ 别学后台样卡那样「扫完停在 -60% 干等 0.76 秒」——老板一眼就看成「静止」，
     这里改成来回扫（扫到左端再扫回右端），整 2 秒一直在动。
   ★ 末帧必须等于样式自身的静态 background-position（outline=160% / serif=0%），
     这样 2 秒跑完被 .en-still 拿掉动画时不会「跳一下」把光带闪回字面。 */
@keyframes enLoopSweep {
  0%, 100% { background-position: 160% 0; }
  50%      { background-position: -60% 0; }
}
/* ④ 衬线 · 斜体：银色流光在字里左右走（同样来回扫，末帧回 0%） */
@keyframes enLoopShine {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* ============================================================
   z11z377b（老板 2026-10-23 20:08「这个渐变为什么 2 秒后不停止」）
   ★ 硬锁：动画跑完由 JS（cases.html 的 mountSlide）给元素打 .en-still，
     直接把 animation 去掉 —— 不再靠 `1 both` 的末帧 keep 住。
     原因：`both` 只是让 100% 帧继续生效，元素一旦被重排/重绘/换层
     （拖窗口、切型号、图片 late load 触发的 reflow、GPU 层重建），
     浏览器的动画时间轴就可能把同一段 keyframes 再放一遍，观感就是「扫光停不下来」。
     拿掉 animation 后元素回到纯静态声明（= 末帧的视觉效果），彻底锁死。
   ★ 末帧与静态值必须完全一致（outline 160%、serif 0%、其余无位移），否则这里会看到跳变。
   ============================================================ */
.mid-en.en-still { animation: none !important; }
/* ⑤ 剪影 · 镂空：字距微张 + 明暗轻呼吸 */
@keyframes enLoopCut {
  0%, 100% { letter-spacing: var(--ls);              text-indent: var(--ls); opacity: 1; }
  50%      { letter-spacing: calc(var(--ls) + .03em); text-indent: calc(var(--ls) + .03em); opacity: .9; }
}
/* ⑥ 玻璃 · 吊牌：整块胶囊轻轻上浮 + 影子加深（离开桌面） */
@keyframes enLoopLift {
  0%, 100% { transform: none;  box-shadow: 0 10px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.38); }
  50%      { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.46); }
}

@media (prefers-reduced-motion: reduce) {
  .mid-en.en-in { animation: none !important; }
  #stage .mid-en.s-center, #stage .mid-en.s-silhouette, #stage .mid-en.s-outline,
  #stage .mid-en.s-caps, #stage .mid-en.s-serif, #stage .mid-en.s-boxed { animation: none !important; }
}