@font-face{font-family:"SJGrotesk";src:url("../assets/fonts/SJGrotesk-Regular.ttf?v=1642388378") format("truetype");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-024F}
@font-face{font-family:"SJGrotesk";src:url("../assets/fonts/SJGrotesk-Medium.ttf?v=1642124872") format("truetype");font-style:normal;font-weight:500 600;font-display:swap;unicode-range:U+0000-024F}
@font-face{font-family:"SJGrotesk";src:url("../assets/fonts/SJGrotesk-Bold.ttf?v=1642388382") format("truetype");font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-024F}
@font-face{font-family:"SJGrotesk";src:url("../assets/fonts/SJGrotesk-Black.ttf?v=1642124874") format("truetype");font-style:normal;font-weight:800 900;font-display:swap;unicode-range:U+0000-024F}

/* ============ 影院版 · 参考 wolverineworldwide.com 的摄影叙事风 ============ */
:root{
  --cbg:#f7f5f1;
  --cink:#1d1b18;
  --cdim:rgba(29,27,24,.55);
  --caccent:#F5A100;              /* 全站强调色：手册封面主黄 RGB(245,161,0)，按钮/进度条/角标/时间轴/文字 */
  --ctext-accent:#F5A100;         /* 与 --caccent 同色，文字强调沿用此变量 */
  --cline:rgba(29,27,24,.14);
  --cfont:"SJGrotesk","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --ease:cubic-bezier(.22,.9,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--cbg);color:var(--cink);font-family:var(--cfont);overflow-x:hidden}
img{display:block}
/* 覆盖微信/iOS 内置浏览器对 :link/:visited 的默认蓝色 */
a,a:link,a:visited,a:hover,a:active,a:focus{color:inherit;text-decoration:none}

/* ---------- 文字/元素动效基元 ---------- */
/* 逐字遮罩浮现 */
.w{display:inline-block;overflow:hidden;vertical-align:bottom}
.w>i{display:inline-block;font-style:normal;transform:translateY(115%);
  transition:transform 1s var(--ease)}
.play .w>i{transform:none}
/* 整行遮罩浮现 */
[data-lines]>span{display:block;overflow:hidden}
[data-lines]>span>span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
[data-lines].play>span>span{transform:none}
/* 淡入上浮 */
[data-fade]{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s var(--ease)}
[data-fade].play{opacity:1;transform:none}
/* 图片揭示：容器裁切 + 图片回缩 */
.rimg{overflow:hidden}
.rimg img,.rimg .rbg{transform:scale(1.22);transition:transform 1.5s var(--ease)}
.rimg.play img,.rimg.play .rbg{transform:scale(1)}
/* 移动端片头黄线分隔：桌面默认不渲染 */
.chero-rule{display:none}

@media (prefers-reduced-motion:reduce){
  .w>i,[data-lines]>span>span,[data-fade],.rimg img,.rimg .rbg{transition:none!important;transform:none!important;opacity:1!important}
  .scene-poster .rbg,.scene-poster::after{animation:none!important}
  .chero-characters,.chero-duo,.chero-duo img{
    animation:none!important;transition:none!important}
  .chero-rule,.chero-rule-seg,.chero-rule::before,.chero-rule::after{transition:none!important;animation:none!important}
  .chero-rule-seg{width:var(--rule-end)!important;transform:none!important}
  .chero-rule::before,.chero-rule::after{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
  .mtrack{will-change:auto}
  .mani-ch{transform:none!important;color:inherit!important}
  .magnet{transform:none!important;transition:none!important}
}

/* ---------- 导航 ---------- */
/* 固定实体暖黑色，不再随背景反色或叠加；链接必须全状态继承，避免 UA 蓝链 */
.cnav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;
  align-items:center;padding:18px 34px;color:var(--cink)}
.cnav a,.cnav a:link,.cnav a:visited,.cnav a:hover,.cnav a:active,.cnav a:focus{
  color:inherit;-webkit-text-fill-color:currentColor;text-decoration:none;
  -webkit-tap-highlight-color:transparent}
.cnav-logo{font-weight:900;letter-spacing:.14em;font-size:15px}
.cnav-logo span{font-weight:400;opacity:1;color:inherit;-webkit-text-fill-color:currentColor}
.cnav-right{display:flex;gap:26px}
.cnav-right a{font-size:13px;letter-spacing:.06em}
.cnav-right a i{font-style:normal;display:inline-block;transition:transform .3s;color:inherit}
.cnav-right a:hover i{transform:translateX(5px)}

/* 顶部进度细线 */
.cprogress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70}
.cprogress i{display:block;height:100%;width:0;background:var(--caccent)}

/* ---------- 片头：视频弹出 + 左下角排版 ---------- */
.chero{position:relative;height:100svh;overflow:hidden;background:var(--cbg)}
.chero-media{position:absolute;inset:0;cursor:pointer;
  transform:scale(.24);opacity:0;border-radius:26px;overflow:hidden;
  transition:transform 1.15s cubic-bezier(.2,1.12,.3,1),opacity .5s ease,
    border-radius 1.15s cubic-bezier(.2,1.12,.3,1)}
.chero-media.pop{transform:scale(1);opacity:1;border-radius:0}
.chero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chero-video-bg{display:none;pointer-events:none}
.chero-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(15,14,12,.25),rgba(15,14,12,.05) 40%,rgba(15,14,12,.62))}
/* 移动端片头合成角色：桌面不展示；picture source 仅 max-width:720px，桌面不请求 GIF/poster */
.chero-characters{display:none}
/* 桌面：右下仅 CTA；移动端会把 foot 改成声音+英文+CTA 居中信息组 */
.chero-foot{position:absolute;right:26px;bottom:26px;z-index:3;display:flex;flex-direction:column;
  align-items:flex-end;gap:0;pointer-events:none}
.chero-sub-m{display:none;margin:0;pointer-events:none}
.chero-cta{position:static;background:rgba(247,245,241,.94);
  color:var(--cink);font-size:12px;font-weight:700;letter-spacing:.08em;padding:10px 18px;
  border-radius:0;outline:1px solid transparent;outline-offset:0;opacity:0;transform:translateY(8px);
  transition:opacity .35s,transform .35s,outline-color .25s,outline-offset .25s}
.chero-media:hover .chero-cta{opacity:1;transform:none}
/* 移动端声音小入口：默认隐藏，≤720px 再显示；仅此按钮可点 */
.chero-sound-m{display:none;pointer-events:none;position:static;align-items:center;gap:6px;
  border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:8px 14px;
  background:rgba(29,27,24,.36);backdrop-filter:blur(10px);color:#fff;cursor:pointer;
  font-family:var(--cfont);font-size:11px;letter-spacing:.1em;
  transition:background .3s var(--ease),opacity .3s var(--ease)}
.chero-sound-m span{font-size:13px;line-height:1}
.chero-sound-m b{font-weight:700}
.chero-sound{position:absolute;top:72px;right:34px;z-index:4;display:flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.48);border-radius:0;padding:9px 15px;
  outline:1px solid transparent;outline-offset:0;
  background:rgba(29,27,24,.3);backdrop-filter:blur(10px);color:#fff;cursor:pointer;
  font-family:var(--cfont);font-size:11px;letter-spacing:.12em;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),outline-color .25s,outline-offset .25s}
.chero-sound span{font-size:15px;line-height:1}
.chero-sound b{font-weight:700}
.chero-sound:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);outline-color:currentColor;outline-offset:4px}
.chero-sound.on{background:rgba(247,245,241,.94);border-color:transparent;color:var(--cink)}
.chero-copy{position:absolute;left:5vw;bottom:11vh;z-index:3;color:#fff;pointer-events:none}
.chero-title{font-size:clamp(46px,8.4vw,118px);font-weight:900;line-height:1.1;
  letter-spacing:.04em}
.chero-sub{margin-top:34px;letter-spacing:.34em;font-size:13px;opacity:.8}
.chero-scroll{position:absolute;right:5vw;bottom:11vh;z-index:3;
  color:#fff;font-size:11px;letter-spacing:.3em;display:flex;flex-direction:column;
  align-items:center;gap:10px}
.chero-scroll i{width:1px;height:46px;background:#fff;display:block;
  animation:cscroll 1.7s ease-in-out infinite;transform-origin:top}
@keyframes cscroll{0%{transform:scaleY(0)}50%{transform:scaleY(1)}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 宣言 ---------- */
/* 桌面默认浅灰，邻近/悬停回到暖黑；移动端恢复黑字 +「好片子」黄 */
.manifesto{padding:22vh 7vw 18vh;max-width:1500px;margin:0 auto;color:rgba(29,27,24,.32)}
.mani-kicker{letter-spacing:.3em;font-size:12px;color:inherit;font-weight:700;
  margin-bottom:26px;transition:color .35s var(--ease)}
.mani-title{font-size:clamp(40px,6.6vw,96px);font-weight:900;line-height:1.22;letter-spacing:.03em;
  color:inherit}
.mani-title em{font-style:normal;color:inherit}
/* 直角引号「 字形左侧留白使强调行视觉偏右；只拉最后一行，句号相对位置与字号不变；全尺寸生效 */
/* 1440 实测 -.32em 仍右偏约 20px，改为 -.55em（em 随字号缩放，桌面/移动同一规则） */
.mani-title[data-lines] > span:last-child{margin-left:-.55em}
/* 光标邻近：逐字 span（仅桌面 fine pointer 由 JS 注入）；默认浅灰，邻近再插值到暖黑 */
.mani-title .mani-ch{display:inline-block;transform-origin:center bottom;color:inherit;
  will-change:transform,color}
.mani-sub{margin-top:34px;font-size:16px;color:inherit;transition:color .35s var(--ease)}
.mani-sub b{color:inherit;transition:color .35s var(--ease)}
/* 桌面：kicker / sub 各自被指到才回到暖黑；标题由 JS 邻近插值 */
@media (hover:hover) and (pointer:fine){
  .mani-kicker:hover,.mani-kicker:focus-visible,
  .mani-sub:hover,.mani-sub:focus-visible{color:var(--cink)}
}

/* ---------- 蒙太奇图墙（双轨反向跑马灯） ---------- */
.montage{padding:4vh 0 10vh;overflow:hidden}
.mrow{overflow:hidden;margin-bottom:16px}
.mtrack{display:flex;width:max-content;will-change:transform}
.mitem{flex:0 0 auto;margin-right:16px;border-radius:6px;overflow:hidden;cursor:pointer;
  position:relative}
.mitem img{height:min(30vh,300px);width:auto;transition:transform .6s var(--ease);
  pointer-events:none}
.mitem:hover img{transform:scale(1.06)}
.mitem::after{content:"";position:absolute;inset:0;background:rgba(29,27,24,0);transition:.3s}
.mitem:hover::after{background:rgba(29,27,24,.14)}

/* ---------- 场景章节（编辑式版式） ---------- */
.scene{padding:12vh 0 10vh}
.scene-head{max-width:1500px;margin:0 auto;padding:4vh 7vw 5vh;
  border-top:1px solid var(--cline);display:grid;
  grid-template-columns:auto 1fr auto;gap:5vw;align-items:end}
.scene-ix{font-size:clamp(60px,9vw,130px);font-weight:900;line-height:.85;
  color:transparent;-webkit-text-stroke:2px var(--cink);letter-spacing:.02em}
.scene-title{font-size:clamp(34px,5.2vw,74px);font-weight:900;letter-spacing:.04em;line-height:1.08}
.scene-sub{margin-top:14px;letter-spacing:.22em;color:var(--cdim);font-size:13px}
.scene-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.scene-right b{font-size:clamp(26px,3vw,40px);font-weight:900;line-height:1}
.scene-right small{letter-spacing:.3em;font-size:11px;color:var(--cdim)}
/* Banner 海报：整块可点进固定详情页（无角标文案） */
.scene-poster{position:relative;display:block;height:min(80vh,780px);overflow:hidden;cursor:pointer;
  clip-path:inset(9% 5% round 18px);transition:clip-path 1.25s var(--ease);
  text-decoration:none;color:inherit;outline:none}
.scene-poster:focus-visible{outline:2px solid var(--ctext-accent);outline-offset:4px}
.scene-poster.play{clip-path:inset(0% 0% round 0px)}
.scene-poster .rbg{position:absolute;inset:-14% 0;background-image:var(--scene-bg);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  will-change:transform;animation:sceneBreathe 7s ease-in-out infinite alternate}
.scene-poster::after{content:"";position:absolute;inset:-20%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.2) 48%,transparent 61%);
  transform:translateX(-85%) skewX(-10deg);animation:sceneSweep 9s ease-in-out infinite}
@keyframes sceneBreathe{from{filter:saturate(1) brightness(1)}to{filter:saturate(1.08) brightness(1.045)}}
@keyframes sceneSweep{0%,55%{transform:translateX(-85%) skewX(-10deg);opacity:0}70%{opacity:.8}100%{transform:translateX(85%) skewX(-10deg);opacity:0}}
/* 绝地求生主体较高，第一幕单独上移取景，避免超宽横幅裁掉头盔顶部 */
#scene-0 .scene-poster .rbg{background-position:center 20%}
/* 用户按 2560×816 实际显示区排版的横幅：桌面完整展示整张画布，不再二次裁切 */
@media (min-width:721px){
  #scene-1 .scene-poster,
  #scene-2 .scene-poster,
  #scene-5 .scene-poster,
  #scene-6 .scene-poster{height:auto;aspect-ratio:160/51}
  #scene-1 .scene-poster .rbg,
  #scene-2 .scene-poster .rbg,
  #scene-5 .scene-poster .rbg,
  #scene-6 .scene-poster .rbg{inset:0;background-size:100% 100%;background-position:center}
}
.scene-poster-ix{position:absolute;right:4vw;bottom:3vh;z-index:2;color:#fff;
  font-weight:900;letter-spacing:.3em;font-size:13px;opacity:.9;
  text-shadow:0 2px 18px rgba(0,0,0,.5);pointer-events:none}
/* 胶片横滑画廊 + 拖动气泡 */
.strip-wrap{position:relative;padding:6vh 0 2vh}
.filmstrip{display:flex;justify-content:safe center;gap:18px;overflow-x:auto;padding:8px 7vw 22px;cursor:grab;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filmstrip::-webkit-scrollbar{display:none}
.filmstrip.dragging{cursor:grabbing}
.drag-pill{position:absolute;z-index:5;pointer-events:none;background:var(--cink);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.14em;padding:11px 16px;border-radius:0;
  opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .25s,transform .25s;
  white-space:nowrap}
.strip-wrap.hovering .drag-pill{opacity:1;transform:translate(-50%,-50%) scale(1)}
.swipe-hint{display:none}
.frame{flex:0 0 auto;position:relative;border-radius:8px;overflow:hidden;background:#e9e5dd;
  opacity:0;transform:translateY(46px);
  transition:opacity .7s ease,transform .7s var(--ease),box-shadow .4s}
.frame.fin{opacity:1;transform:none}
.frame:hover{box-shadow:0 24px 50px rgba(29,27,24,.18)}
.frame img,.frame video{display:block;height:40vh;min-height:250px;max-height:420px;width:auto;
  object-fit:contain;pointer-events:none;
  transition:transform .6s var(--ease)}
.frame:hover img,.frame:hover video{transform:scale(1.05)}
@media (min-width:721px){.filmstrip.compact .frame img,.filmstrip.compact .frame video{height:34vh;max-height:360px}}
.frame-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;
  background:linear-gradient(transparent,rgba(15,14,12,.82));display:flex;
  align-items:baseline;gap:8px;opacity:0;transition:.35s;color:#fff}
.frame:hover .frame-cap{opacity:1}
.frame-cap b{font-size:14px}
.frame-cap span{font-size:10px;letter-spacing:.14em;opacity:.75}
.frame-cut{position:absolute;top:10px;left:10px;font-size:10px;letter-spacing:.16em;
  background:rgba(247,245,241,.9);padding:4px 10px;border-radius:3px;color:var(--cink);
  font-weight:700}
.frame-badge{position:absolute;top:10px;right:10px;font-size:10px;font-weight:700;
  letter-spacing:.08em;background:var(--caccent);color:#fff;padding:4px 9px;border-radius:3px}

/* ---------- 片尾 ---------- */
.credits{background:#17150f;color:#f2ede4;text-align:center;padding:16vh 6vw 16vh;margin-top:10vh}
.credits-end{font-size:clamp(44px,8vw,110px);font-weight:900;letter-spacing:.08em}
.credits-sub{margin-top:18px;letter-spacing:.3em;font-size:12px;opacity:.55}
.credits-roll{display:grid;gap:16px;max-width:560px;margin:8vh auto 7vh}
.credits-roll .cr{display:flex;justify-content:space-between;gap:30px;font-size:14px;
  border-bottom:1px dashed rgba(242,237,228,.16);padding-bottom:10px}
.credits-roll .cr span{opacity:.55;letter-spacing:.16em;font-size:12px}
.credits-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cbtn{border:1.5px solid #f2ede4;border-radius:0;padding:13px 26px;font-size:14px;
  outline:1px solid transparent;outline-offset:0;font-weight:700;
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s,outline-color .25s,outline-offset .25s;
  display:inline-block;will-change:transform}
.cbtn:hover{background:#f2ede4;color:#17150f;outline-color:currentColor;outline-offset:4px}
.cbtn.solid{background:var(--caccent);border-color:var(--caccent);color:#fff}
.cbtn.solid:hover{background:#e09200;color:#fff;box-shadow:0 10px 28px rgba(245,161,0,.28)}
/* 磁吸按钮：桌面鼠标跟随，回弹用 --ease；触屏/减少动态由 JS 不绑定 */
.magnet{touch-action:manipulation}
.credits-copy{margin-top:9vh;font-size:12px;opacity:.4;letter-spacing:.2em}
.credits-icp{display:inline-block;margin-top:16px;color:inherit;font-size:11px;
  letter-spacing:.08em;opacity:.55;transition:opacity .2s,color .2s}
.credits-icp:hover,.credits-icp:focus-visible{color:var(--caccent);opacity:1}

/* ---------- 底部时间轴 ---------- */
.timeline{position:fixed;left:0;right:0;bottom:0;z-index:65;display:flex;align-items:center;
  gap:16px;padding:12px 22px;pointer-events:none}
.timeline>*{pointer-events:auto}
.tl-scene{background:rgba(247,245,241,.92);border:1px solid var(--cline);color:var(--cink);
  font-family:var(--cfont);font-size:11px;letter-spacing:.16em;padding:7px 14px;font-weight:700;
  border-radius:0;cursor:pointer;white-space:nowrap;outline:1px solid transparent;outline-offset:0;
  transition:color .2s,outline-color .2s,outline-offset .2s;
  box-shadow:0 4px 18px rgba(29,27,24,.12)}
.tl-scene:hover{color:var(--ctext-accent);outline-color:currentColor;outline-offset:3px}
.tl-bar{position:relative;flex:1;height:22px;cursor:pointer;display:flex;align-items:center}
.tl-bar::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  transform:translateY(-50%);background:rgba(29,27,24,.18);border-radius:2px}
.tl-fill{position:absolute;left:0;top:50%;height:2px;transform:translateY(-50%);width:0;
  background:var(--caccent)}
.tl-mark{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);background:#f7f5f1;border:2px solid rgba(29,27,24,.4);
  transition:.2s;z-index:2}
.tl-mark:hover,.tl-mark.on{background:var(--caccent);border-color:#fff;
  transform:translate(-50%,-50%) scale(1.3)}
.tl-mark i{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  background:#1d1b18;color:#f7f5f1;font-style:normal;font-size:11px;white-space:nowrap;
  padding:5px 10px;border-radius:4px;opacity:0;pointer-events:none;transition:.2s;
  letter-spacing:.1em}
.tl-mark:hover i{opacity:1}
.tl-time{font-size:11px;letter-spacing:.12em;color:var(--cdim);font-variant-numeric:tabular-nums;
  background:rgba(247,245,241,.92);padding:6px 10px;border-radius:0;border:1px solid var(--cline)}

/* ---------- 灯箱 ---------- */
.clightbox{position:fixed;inset:0;z-index:100;background:rgba(20,18,15,.95);display:none;
  flex-direction:column}
.clightbox.open{display:flex}
.clb-scroll{flex:1;overflow:auto;display:flex;padding:50px 20px 16px}
.clb-scroll img{margin:auto;max-width:min(1200px,94vw)}
#clbClose{position:fixed;top:16px;right:20px;z-index:101;background:var(--caccent);border:none;
  color:#fff;font-size:14px;font-weight:700;padding:10px 20px;border-radius:0;
  outline:1px solid transparent;outline-offset:0;cursor:pointer;font-family:var(--cfont);
  transition:outline-color .2s,outline-offset .2s,transform .2s var(--ease)}
#clbClose:hover{outline-color:#fff;outline-offset:4px;transform:translateY(-2px)}
.clb-title{padding:12px;text-align:center;font-size:13px;color:rgba(242,237,228,.7)}

@media (max-width:720px){
  html{scrollbar-width:none}
  html::-webkit-scrollbar{display:none;width:0;height:0}

  /* 移动端恢复原首屏：全屏媒体、原导航/标题/底部信息；只保留角色与视频上沿构图 */
  .cnav{padding:14px 18px}
  .cnav-logo{font-size:13px}
  .cnav-right{gap:14px}
  .cnav-right a{font-size:12px}
  .chero{height:100svh;padding:0;background:var(--cbg);overflow:hidden}
  .chero-media{inset:0;border-radius:18px;background:#1d1b18}
  .chero-media.pop{transform:scale(1);opacity:1;border-radius:0}
  /* 原同步模糊背景：填满全屏，前景继续完整保留横向信息 */
  .chero-media .chero-video-bg{
    display:block;z-index:0;inset:-12%;width:124%;height:124%;
    object-fit:cover;filter:blur(24px);transform:scale(1.12);opacity:.72;pointer-events:none;
  }
  .chero-media .chero-video-fg{
    z-index:2;inset:0;width:100%;height:100%;object-fit:contain;
    object-position:center center;transform:scale(1.08);pointer-events:none;
  }
  .chero-shade{z-index:3}
  /* 黄线：左右两段 + 侧点；--rule-end 对齐角色两侧起点；压住视频可见上边框 */
  .chero-rule{
    --rule-end:36.5%;
    display:block;position:absolute;left:0;right:0;z-index:5;
    top:calc(50% - 30.375vw - 1px);bottom:auto;height:3px;pointer-events:none;
    transform:none;
  }
  .chero-rule-seg{
    position:absolute;top:0;height:100%;width:0;
    background:var(--caccent);
    box-shadow:none;
    transition:width .85s var(--ease) .55s;
  }
  .chero-rule-seg-l{left:0}
  .chero-rule-seg-r{right:0}
  .chero-media.pop .chero-rule-seg{width:var(--rule-end)}
  .chero-rule::before,.chero-rule::after{
    content:"";position:absolute;top:50%;z-index:1;width:7px;height:7px;
    border-radius:50%;background:var(--caccent);opacity:0;
    transform:translate(-50%,-50%) scale(0);
    transition:opacity .25s ease .95s,transform .45s cubic-bezier(.2,1.12,.3,1) .95s;
  }
  /* 黄点贴在线段内端（靠人物一侧） */
  .chero-rule::before{left:var(--rule-end)}
  .chero-rule::after{left:calc(100% - var(--rule-end))}
  .chero-media.pop .chero-rule::before,.chero-media.pop .chero-rule::after{
    opacity:1;transform:translate(-50%,-50%) scale(1);
  }

  /* 标题恢复 pre-image2 原位置与字号 */
  .chero-copy{
    left:5vw;right:5vw;top:clamp(88px,13.5svh,126px);bottom:auto;
    display:flex;flex-direction:column;align-items:center;text-align:center;
    color:#fff;z-index:3;padding:0;pointer-events:none;
  }
  .chero-title{
    font-size:clamp(34px,10.4vw,46px);line-height:1.08;letter-spacing:.025em;
    font-weight:900;text-shadow:none;
  }
  .chero-title[data-lines] > span:first-child{transform:translateX(-.4em)}
  .chero-sub{display:none}
  .chero-sound{display:none;pointer-events:none}
  .chero-scroll{display:none}
  /* 合成角色 GIF：更小更下，全过程不挡主标题；藏在前景视频后方探出 */
  .chero-characters{
    display:flex;position:absolute;left:50%;right:auto;
    bottom:calc(50% + 30.375vw - 4px);top:auto;
    width:clamp(96px,27vw,128px);max-width:40%;height:auto;
    transform:translate3d(-50%,0,0);
    align-items:flex-end;justify-content:center;
    z-index:1;pointer-events:none;
    opacity:0;transition:opacity .45s .28s ease;
  }
  .chero-media.pop .chero-characters{opacity:1}
  .chero-duo{display:block;width:100%;height:auto;pointer-events:none}
  .chero-duo img{
    display:block;width:100%;height:auto;
    filter:drop-shadow(0 4px 8px rgba(15,14,12,.24));
    user-select:none;pointer-events:none;
  }

  /* 底部信息组恢复 pre-image2 原样 */
  .chero-foot{
    left:50%;right:auto;bottom:clamp(64px,9svh,96px);transform:translateX(-50%);
    display:flex;align-items:center;gap:10px;width:max-content;max-width:90vw;text-align:center;
  }
  .chero-sub-m{
    display:block;color:#fff;font-size:10px;line-height:1.45;letter-spacing:.22em;
    opacity:.85;text-align:center;max-width:90vw;
  }
  .chero-cta{
    display:block;width:max-content;max-width:88vw;text-align:center;opacity:1;transform:none;
    padding:10px 14px;font-size:10px;letter-spacing:.06em;background:rgba(247,245,241,.9);
  }
  .chero-media:hover .chero-cta{opacity:1;transform:none}
  .chero-sound-m{
    display:inline-flex;pointer-events:auto;margin-bottom:2px;padding:7px 13px;
    font-size:10px;letter-spacing:.08em;background:rgba(29,27,24,.42);
    border-color:rgba(255,255,255,.38);
  }
  .chero-sound-m:active{background:rgba(247,245,241,.2)}
  .chero-sound-m.is-on,.chero-sound-m.done{display:inline-flex!important;pointer-events:auto}
  .chero-sound-m.on{background:rgba(247,245,241,.94);border-color:transparent;color:var(--cink)}

  .manifesto{padding:16vh 6vw 13vh;color:var(--cink)}
  .mani-title em{color:var(--ctext-accent)}
  .mitem img{height:20vh}
  .scene-head{grid-template-columns:1fr;gap:14px;padding:4vh 6vw}
  .scene{padding:11vh 0 8vh}
  .scene-ix{font-size:52px}
  .scene-right{text-align:left;align-items:flex-start}
  .scene-poster{height:46vh;clip-path:inset(6% 4% round 12px)}
  /* 四幕移动端专用 Banner（1300×1000 → 13:10）：完整显示，不裁切、不用 cover/视差 */
  .scene-poster.scene-poster-mobile-fit{
    height:auto;
    width:100%;
    max-width:none;
    margin-left:0;margin-right:0;
    aspect-ratio:13 / 10;
    clip-path:inset(0% 0% round 12px);
  }
  .scene-poster.scene-poster-mobile-fit.play{clip-path:inset(0% 0% round 0px)}
  .scene-poster.scene-poster-mobile-fit .rbg{
    inset:0;
    background-image:var(--scene-bg-m, var(--scene-bg));
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    will-change:auto;
    transform:none!important;
  }
  .frame img,.frame video{height:32vh;min-height:200px}
  .filmstrip{padding:8px 5vw 18px}
  .frame-cut,.frame-badge{display:none}
  .drag-pill{display:none}
  /* 向左滑动提示：始终显示，保留左右微动画；不再用 .used 隐藏 */
  .swipe-hint{display:flex;align-items:center;width:max-content;margin:6px 0 0 5vw;
    color:var(--cink);font-size:11px;font-weight:700;letter-spacing:.16em;pointer-events:none;
    opacity:.72}
  /* 弧形回勾箭头（封面黄）：水平粗箭杆 + 上方弧线汇入左端尖端 */
  .swipe-hint i{font-style:normal;display:inline-flex;align-items:center;gap:10px;
    animation:swipe-left 1.35s var(--ease) infinite}
  .swipe-hint i::before{content:"";width:34px;height:14px;flex-shrink:0;display:block;
    background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 22' fill='none'%3E%3Cpath d='M52 18H4M18 3C17 9 11 15 4 18' stroke='%23F5A100' stroke-width='2.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E")}
  /* 移动端隐藏整条底部播放进度栏：不占空间、不拦截触摸 */
  .timeline{display:none;pointer-events:none}
}

@keyframes swipe-left{
  0%,100%{transform:translateX(5px);opacity:.55}
  45%{transform:translateX(-5px);opacity:1}
}

@media (prefers-reduced-motion:reduce){.swipe-hint i{animation:none}}

/* 更窄手机：角色再略缩小并微调下沉，不改标题/视频/底部信息 */
@media (max-width:390px){
  .chero-characters{
    width:clamp(92px,26vw,106px);
    max-width:38%;
    bottom:calc(50% + 30.375vw - 3px);
  }
  .chero-rule{--rule-end:37%}
}