/* ===========================================================================
   wg-story.css —— about 页「Our Story」区块的入场编排
   ---------------------------------------------------------------------------
   动效语言 = 模板自身的 IX2 词汇，不引入任何新曲线/新量级：
     · 只动 opacity + transform(±15/20px, scale) + clip-path，**零布局位移**
     · 缓动统一 `ease`（模板 IX2 里除空值外只出现过 `ease`，116 次）
     · 时长取自模板常用值 500ms / 1000ms；延迟按模板自己的 100ms 步进编排
     · 位移量沿用 15px / 20px（a-11 = 15px，hero-anim-load-* = 20px）
   原型：js/webflow.schunk.4476c1bc8110b7f4.js → "a-11 ➡️ Fade In & Move From Left"
        （opacity 0→1 + translateX(-15px)，delay 100ms / duration 1000ms / easing ease）
        —— 这条动作原本就绑在本区块的 .fade-in-move-from-* 上，本文件即它的「编排版」。

   编排（总长约 1.2s，四个元素成阶梯落下）：
     ┌ #  元素                延迟     时长     位移            幕帘
     │ 1  kicker「Our Story」  0ms     500ms   x -15 → 0        —
     │ 2  第一段大字           100ms  1000ms   y +20 → 0       自上而下揭开
     │ 3  第二段大字           200ms  1000ms   y +20 → 0       自上而下揭开
     │ 4  CTA「View Full Timeline」 300ms 500ms x +15 → 0, scale .98 → 1  —
     └
     阅读方向 = 先「小标签」亮起 → 两段大字像被写出来 → 最后 CTA 落到右侧收束。

   三条安全约束（与站内既有验收口径一致）：
     1) 无 JS / 不支持 IntersectionObserver / 用户开「减弱动效」时，**内容直接可见** ——
        隐藏态只在 html.wg-story-armed 下生效，不存在「动画没跑起来、内容却没了」；
     2) **不改 DOM 结构**：不加包裹元素、不拆分文本节点，只加 data-* 与一个类 →
        i18n 的容器锚点切分、以及「切换语言前后元素计数不变」的验收口径均不受影响；
     3) 只动合成属性（opacity/transform/clip-path），不触发 reflow，不产生横向溢出。
   =========================================================================== */

/* ── 1. 各元素的编排参数 ──────────────────────────────────────────────── */
.wg-story [data-wg] {
  --wg-ease: ease;          /* 与模板 IX2 一致 */
  --wg-dur: 1000ms;
  --wg-delay: 0ms;
  --wg-x: 0px;
  --wg-y: 0px;
  --wg-s: 1;
}

.wg-story [data-wg="1"] {   /* kicker：最小元素，先亮 */
  --wg-dur: 500ms;
  --wg-delay: 0ms;
  --wg-x: -15px;
}

.wg-story [data-wg="2"] {   /* 大字一 */
  --wg-dur: 1000ms;
  --wg-delay: 100ms;
  --wg-y: 20px;
}

.wg-story [data-wg="3"] {   /* 大字二：与上一段错开 100ms，形成「波浪」而不是齐平 */
  --wg-dur: 1000ms;
  --wg-delay: 200ms;
  --wg-y: 20px;
}

.wg-story [data-wg="4"] {   /* CTA：最后落位，带一点点收束感 */
  --wg-dur: 500ms;
  --wg-delay: 300ms;
  --wg-x: 15px;
  --wg-s: .98;
}

/* ── 2. 隐藏态 + 过渡（仅在 JS 打上 wg-story-armed 后生效）────────────── */
html.wg-story-armed .wg-story [data-wg] {
  opacity: 0;
  transform: translate3d(var(--wg-x), var(--wg-y), 0) scale(var(--wg-s));
  transition:
    opacity   var(--wg-dur) var(--wg-ease) var(--wg-delay),
    transform var(--wg-dur) var(--wg-ease) var(--wg-delay),
    clip-path var(--wg-dur) var(--wg-ease) var(--wg-delay);
  will-change: opacity, transform;
}

/* 两段大字额外走一层「幕帘」：文字自首行向末行被揭开。
   收尾用 -3% 而不是 0，保证末行下缘（descender）绝不被切掉。 */
html.wg-story-armed .wg-story [data-wg-clip] {
  clip-path: inset(0 0 100% 0);
}

/* ── 3. 触发态（JS 看区块进入视口后加 .is-in）─────────────────────────── */
html.wg-story-armed .wg-story.is-in [data-wg] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

html.wg-story-armed .wg-story.is-in [data-wg-clip] {
  clip-path: inset(0 0 -3% 0);
}

/* ── 4. 播完收尾：撤掉 will-change，别让合成层长期挂着 ──────────────── */
html.wg-story-armed .wg-story.is-done [data-wg] {
  will-change: auto;
}

/* ── 5. 尊重系统「减弱动效」：直接给最终态，无过渡 ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.wg-story-armed .wg-story [data-wg] {
    opacity: 1;
    transform: none;
    transition: none;
    clip-path: none;
    will-change: auto;
  }
}