/*
 * 作者: 陈涛 (Alan Chen) <1315333@qq.com>
 * 06 幕「开始」的样式（§二十四.2：选择器全部以 .act06 作用域，id 全部 a06- 前缀，
 * 禁止 position:fixed，禁止全局 id）。
 *
 * 色只用 §一 色板里的十条（页面 :root 已经定义），派生色一律 color-mix，不再发明 hex。
 * 每帧只动 transform / opacity / filter / stroke-dashoffset（§十五.2）——
 * 所以这里凡是会被 JS 每帧改的属性，都只有 transform 与 opacity 两种。
 * 全页 backdrop-filter 预算 ≤ 2（顶栏 + 手机壳已占满），这一幕**一处都不用**：
 * 玻璃卡走预烘半透明白 + 噪声纹理（§十五.2）。
 */

/* ── 根：铺满上级 .lay，absolute 不是 fixed ────────────────────────── */
.act06 {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;                 /* 只有按钮接指针，见 .act06.a06-live */
  --a06-sunx: 46%;                      /* 光源横向落点；由 JS 按照片里太阳的真实坐标写 */
  --a06-suny: 33%;
  --a06-textw: 46%;                     /* 文字块宽度；由 JS 按人物左沿收窄，保证不压躯干 */
  --a06-x0: 8%;                         /* 金线左端 */
  --a06-x1: 66%;                        /* 金线右端（桌面：停在人物左侧） */
  --a06-liney: 63vh;                    /* 金线的 y，由 JS 按 CTA 的真实盒子推出来 */
  /* 照片下面的暮色。A7 底部实测 rgb(65,54,42)，用 --ink / --gold 在 oklab 里兑出同一族 */
  --a06-dusk-1: color-mix(in oklab, var(--ink) 56%, var(--gold) 44%);
  --a06-dusk-2: color-mix(in oklab, var(--ink) 90%, var(--gold) 10%);
}

.act06 .a06-layer { position: absolute; inset: 0; pointer-events: none; }
/* 指针 2.5D 视差的外壳：只由指针驱动，与滚动进度无关（桌面限定） */
.act06 .a06-px { position: absolute; inset: 0; will-change: transform; }

/* opacity:0 是刻意的：幕层由页面用 visibility 一刀开关（home-v4.html 的 GATE 表），
   没有第二层淡入，所以这一块满屏暮色要是从第一帧就实心，cross05 的第一帧就把 05 幕盖没了。
   由 act06.js 的 B.baseIn 跟着开场照片一起淡入；静态/无 JS 两条退化流在文末补回 1。 */
#a06-base {
  opacity: 0;
  will-change: opacity;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--a06-dusk-1) 72%, var(--ink)) 0%,
      var(--a06-dusk-1) 26%,
      var(--a06-dusk-2) 78%,
      color-mix(in oklab, var(--a06-dusk-2) 82%, var(--ink)) 100%);
}

/* ── 照片两层：C13（空）在下，A7（有人）在上，一次溶解 ─────────────────
   §二十五：满幅照片用 inset:0 + object-fit:cover，**不许负位移**。
   原来是 `inset:-2%` 再给容器挂 scale(1.13→1)：两笔都把盒子推出视口
   （390 实测左沿 −17px，五档 5–17px 全红）。推镜保留，但改成
   「外层裁切、内层缩放」：
     · 外层 .a06-shot 恒等于视口（手机端恒等于那条宽银幕带），overflow:hidden 裁掉溢出；
     · 推镜的 scale 打在内层 <picture> 上，溢出的部分被外层裁掉，画面一模一样。
   外层还补一层不透明暮色底，两个作用：① 溶解时图还没解码也不会露出下一层；
   ② 它自己「画了一块面」，量盒子时用的就是这块布局盒，不会被内层放大的图撑大。 */
.act06 .a06-shot {
  position: absolute; inset: 0;
  overflow: hidden;
  /* 用色板里的 --ink 本色，不用 --a06-dusk-2：后者是 color-mix(in oklab,…)，
     计算值序列化成 `oklab(…)` 而不是 `rgb(…)`。这一层被照片整块盖住，两者在画面上
     没有任何差别；但量盒子的那一侧是按「有没有真的上色」判断要不要用布局盒的，
     它只认 rgb/rgba —— 写 oklab 等于这层没上色，盒子又退回去按内层放大的图算，
     §二十五 那条「不许越出视口」等于没修（1728 实测量到 [-48,-27,1761,989]）。 */
  background-color: var(--ink, #0F1F3D);
  will-change: opacity;
  contain: paint;
}
.act06 .a06-shot picture {
  display: block; width: 100%; height: 100%;
  will-change: transform;
  transform-origin: 50% 50%;
}
.act06 .a06-shot img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
#a06-fam { opacity: 0; }

/* 云海横带：远层，慢漂。screen 混合让它只加光不压暗 */
#a06-band {
  position: absolute; left: -30%; top: -8%; width: 170%; height: 46%;
  object-fit: cover;
  mix-blend-mode: screen; opacity: 0; filter: blur(3px);
  will-change: transform, opacity;
}

/* 近层云絮 */
.act06 .a06-wisp { position: absolute; opacity: 0; mix-blend-mode: screen; will-change: transform, opacity; }
#a06-w1 { left: -16%; top: 2%;  width: 70%; }
#a06-w2 { left: -26%; top: 54%; width: 72%; }
#a06-w3 { left: 2%;  bottom: -20%; width: 96%; }

/* ── 光：中心一律读 --a06-sunx/--a06-suny（JS 按两张照片里太阳的真实像素标定） ── */
#a06-lightGrp { position: absolute; inset: 0; will-change: transform; }
#a06-bloom {
  position: absolute; left: var(--a06-sunx); top: var(--a06-suny);
  width: min(74vw, 1080px); aspect-ratio: 1;
  /* 归中靠 transform 不靠 margin：margin 会参与布局，改一次就是一次 layout */
  transform: translate(-50%, -50%) scale(.9);
  background: radial-gradient(circle at 50% 50%,
      rgba(255, 244, 222, .78) 0%, rgba(255, 226, 178, .42) 26%,
      rgba(255, 208, 150, .16) 46%, transparent 68%);
  filter: blur(14px); opacity: 0; will-change: transform, opacity;
}
#a06-shaft {
  position: absolute; left: var(--a06-sunx); top: calc(var(--a06-suny) - 42%);
  width: min(96vw, 1360px); height: 132%;
  transform: translateX(-50%) scaleY(.55); transform-origin: 50% 0;
  background: radial-gradient(118% 96% at 50% 22%,
      rgba(255, 250, 238, .60) 0%, rgba(255, 236, 205, .30) 30%,
      rgba(255, 224, 186, .12) 52%, transparent 76%);
  filter: blur(22px); opacity: 0; will-change: transform, opacity;
}
#a06-ray1, #a06-ray2 {
  position: absolute; top: -10%; height: 120%; width: 5vw;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 232, .42) 50%, transparent);
  filter: blur(20px); opacity: 0; will-change: transform, opacity;
}
#a06-ray1 { left: calc(var(--a06-sunx) - 16vw); transform: rotate(7deg); }
#a06-ray2 { left: calc(var(--a06-sunx) + 9vw);  transform: rotate(-5deg); }

/* ── 溶解白洗：见 frag 里那段注释。normal 混合不是 screen —— 要的是「把对比度按
      (1-opacity) 压下去」，screen 只提亮、暗边缘照样留在画面里（实测 screen 版
      边缘能量只掉 7%）。峰值由 act06.js 给，这里只给形状与中心。 ── */
#a06-flash {
  opacity: 0; will-change: opacity;
  background: radial-gradient(circle at var(--a06-sunx) var(--a06-suny),
    rgb(255, 250, 238) 0%, rgb(255, 244, 224) 30%,
    rgb(255, 236, 208) 58%, rgb(252, 228, 200) 100%);
}

/* ── scrim：文字在左就只压左边一柱，人脸不进 scrim（§二十.1 / §二十二.7.5） ──
      实测白字压在夕照天空上只有 1.9:1；侧向 scrim 把左半压到 6:1 以上，
      右边那一家三口一个像素没动。 */
#a06-scrimSide {
  opacity: .34;
  background: linear-gradient(97deg,
    rgba(15, 31, 61, .84) 0%, rgba(15, 31, 61, .78) 22%, rgba(15, 31, 61, .66) 40%,
    rgba(15, 31, 61, .42) 54%, rgba(15, 31, 61, .16) 68%, transparent 84%);
}
#a06-scrimBot {
  inset: auto 0 0 0; height: 46%;
  background: linear-gradient(0deg, rgba(15, 31, 61, .62), rgba(15, 31, 61, .18) 58%, transparent);
}

/* ── 金线的辉光条（线本身是共享元素③的 <path>，这一条只是垫在它下面的 bloom） ── */
#a06-rule {
  position: absolute;
  left: var(--a06-x0); width: calc(var(--a06-x1) - var(--a06-x0));
  top: var(--a06-liney); height: 3px; margin-top: -1.5px;
  border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--glow) 0%, transparent), var(--glow) 12%,
    var(--gold) 58%, color-mix(in srgb, var(--gold) 92%, white));
  box-shadow: 0 0 18px rgba(242, 200, 121, .85), 0 0 44px rgba(242, 200, 121, .5),
              0 0 96px rgba(242, 200, 121, .22);
  will-change: opacity;
}

/* ── 计划三件事：骑在金线上的玻璃卡 ───────────────────────────────── */
#a06-plan { position: absolute; inset: 0; }
.act06 .a06-chip {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 15px 9px 9px; border-radius: 14px;
  background-color: var(--glass); background-image: var(--noise);
  border: 1px solid var(--glass-line);
  box-shadow: 0 14px 34px rgba(15, 31, 61, .16);
  transform: translate(-50%, -50%) scale(.72); opacity: 0;
  will-change: transform, opacity;
}
.act06 .a06-th { display: block; width: 38px; height: 38px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.act06 .a06-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.act06 .a06-chip b { display: block; font: 500 13.5px/1.25 var(--sans); color: var(--ink); }
.act06 .a06-chip s { display: block; font: 400 11.5px/1.35 var(--sans); color: var(--muted); text-decoration: none; white-space: nowrap; }
.act06 .a06-chip s i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); margin-right: 5px; vertical-align: 1px; }

/* 窄桌面的降级：人物左边放不下三张完整卡时，act06.js 会挂上 .a06-tight，
   卡收成线上的圆点 —— 与手机端 (max-width:900px) 那段是同一种样子，不是第三种。
   什么时候挂由真几何决定（见 act06.js 的 limOf），这里只管长什么样。 */
.act06.a06-tight .a06-chip {
  padding: 0; gap: 0; border: 0; box-shadow: none;
  background-color: transparent; background-image: none;
}
.act06.a06-tight .a06-tx { display: none; }
.act06.a06-tight .a06-th {
  width: 26px; height: 26px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 0 16px rgba(242, 200, 121, .7);
}

/* ── 内容层 ─────────────────────────────────────────────────────── */
#a06-content { position: absolute; inset: 0; }
#a06-content > * { position: absolute; margin: 0; }

#a06-eyebrow {
  left: var(--a06-x0); top: 17.5vh; width: var(--a06-textw); opacity: 0;
  font: 400 12px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .94); text-shadow: 0 1px 10px rgba(15, 31, 61, .6);
  will-change: transform, opacity;
}
#a06-h1 {
  left: var(--a06-x0); top: 22vh; width: var(--a06-textw);
  font-family: var(--serif); font-weight: 400; color: #fff;
  /* 字号跟着文字栏走，不只跟着视口走：窄桌面上栏宽被人物挤到 250px，
     只按 4.6vw 给字号会把两句话拗成六行、盒子高得离谱。1728 上 4.6vw 仍是短板，
     所以宽屏一个像素都没变。 */
  font-size: clamp(30px, min(4.6vw, calc(var(--a06-textw) * .155)), 78px);
  line-height: 1.04; letter-spacing: -.4px;
  text-shadow: 0 2px 20px rgba(15, 31, 61, .62), 0 1px 2px rgba(15, 31, 61, .42);
}
.act06 .a06-l { display: block; opacity: 0; will-change: transform, opacity; }
#a06-l2 { font-style: italic; }
/* 光点从主句下面走过时只有这两个词退下去 —— 「等待名单」那件事我们不做 */
.act06 .a06-wl { font-style: inherit; will-change: opacity; }

#a06-sub {
  left: var(--a06-x0); top: 41.5vh; width: min(var(--a06-textw), 40%); opacity: 0;
  font: 400 17px/1.6 var(--sans); color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 12px rgba(15, 31, 61, .62); will-change: transform, opacity;
}

/* max-width 与 wrap 是必须的：这一行是 flex 横排，natural width 不受 --a06-textw 管，
   窄一点的桌面（实测 1200×760）上第二个按钮会整个探进人物躯干（3785px²）。
   收进文字块宽度里、装不下就折行 —— 折行之后 CTA 行变高，金线的 y 由 measure()
   按 ctaWrap 的真实盒子重算，不用回来改数字。 */
#a06-ctaWrap {
  left: var(--a06-x0); top: 53vh; display: flex; align-items: center; gap: 18px;
  max-width: var(--a06-textw); flex-wrap: wrap;
  opacity: 0; will-change: transform, opacity;
}
.act06.a06-live #a06-ctaWrap { pointer-events: auto; }
#a06-cta {
  position: relative; overflow: hidden; display: inline-block; text-decoration: none;
  background: var(--brand); color: #fff; border-radius: 999px;
  padding: 17px 34px; font: 500 16px/1 var(--sans); letter-spacing: .2px;
  box-shadow: 0 18px 44px rgba(29, 78, 216, .36), 0 2px 0 rgba(255, 255, 255, .16) inset;
  will-change: transform;
}
.act06 .a06-lab { position: relative; z-index: 1; }
.act06 .a06-lab b { font-weight: 500; }
.act06 .a06-gloss {
  position: absolute; top: -40%; left: 0; width: 34%; height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent);
  transform: translateX(-170%) skewX(-18deg); pointer-events: none; will-change: transform;
}
#a06-cta2 {
  display: inline-block; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .62); color: #fff; border-radius: 999px;
  padding: 16px 26px; font: 400 15px/1 var(--sans); will-change: transform;
}

/* 顾问④的空锚点：只用来量位置，页面的 shared.lin 摆过来 */
#a06-linslot { left: var(--a06-x0); top: 74vh; width: min(360px, var(--a06-textw)); height: 64px; visibility: hidden; }

#a06-note {
  left: var(--a06-x0); top: 88vh; width: min(var(--a06-textw), 46%); opacity: 0;
  font: 400 12.5px/1.5 var(--sans); color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 10px rgba(15, 31, 61, .6); will-change: transform, opacity;
}

/* ══ 手机端：§十六.2 三槽 + §二十 一主一次一辅 ══════════════════════
   最要紧的一条是 §二十四.3 的「手机端 CTA 与节点不压人物躯干」。
   竖屏满幅根本做不到：390×844 的窗口在 2.33:1 的 A7 上只能看到 0.198 宽的一条 u，
   而「太阳 + 一家三口」这一段是 0.357 宽 —— 满幅时人挤满整屏，任何一条通栏按钮
   都会横穿躯干，而且太阳直接出画，「同一束光」这个隐喻在手机上当场消失。
   所以手机端照片走**一条宽银幕带**（§十六.2 的中槽本来就是给 media 的）：
   带子 22–68svh，上下两端各羽化 6svh 融进暮色底；人物只存在于带子里，
   金线 / 节点 / 两个按钮 / Lin 全在 71svh 以下 —— 重叠量恒为 0，不是「看着没压到」。
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .act06 {
    --a06-x0: 5vw; --a06-x1: 95vw;
    --a06-textw: 88vw;
    --a06-liney: 71svh;
    --a06-band-top: 18svh; --a06-band-h: 46svh;
  }
  .act06 .a06-shot {
    inset: var(--a06-band-top) 0 auto 0; height: var(--a06-band-h);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6svh, #000 40svh, transparent 46svh);
    mask-image: linear-gradient(180deg, transparent 0, #000 6svh, #000 40svh, transparent 46svh);
  }
  #a06-band { top: 12svh; height: 30svh; }
  #a06-w2 { display: none; }

  /* 眉题在照片带子**下面**（带子 18–64svh，金线 71svh），既不压主句也不压人，
     而且它就贴着那次溶解 —— 它解释的正是上面那张画。t≈31 就退场，让位给 CTA。 */
  #a06-eyebrow { left: var(--a06-x0); top: 66svh; width: 90vw; font-size: 11px; letter-spacing: .18em; }
  #a06-h1 { left: var(--a06-x0); top: 10svh; width: var(--a06-textw);
    font-size: clamp(34px, 10.26vw, 40px); line-height: 1.05; }
  #a06-sub, #a06-note { display: none; }

  #a06-ctaWrap {
    left: var(--a06-x0); right: var(--a06-x0); top: 74.5svh;
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  #a06-cta  { padding: 15px 18px; text-align: center; font-size: 15.5px; }
  #a06-cta2 { padding: 14px 18px; text-align: center; font-size: 14px; border-color: rgba(255, 255, 255, .5); }

  /* 手机上金线只剩线与节点，不出卡片（§二十.4「同一屏最多一张卡」，这里是零张） */
  .act06 .a06-chip {
    padding: 0; gap: 0; border: 0; box-shadow: none;
    background-color: transparent; background-image: none;
  }
  .act06 .a06-tx { display: none; }
  .act06 .a06-th {
    width: 26px; height: 26px; border-radius: 50%;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 0 16px rgba(242, 200, 121, .7);
  }

  #a06-linslot { left: var(--a06-x0); right: var(--a06-x0); width: auto; top: 87.5svh; height: 34px; }

  /* 主句压在照片上半（天空那一段），侧向 scrim 换成顶部梯度才过 4.5:1 */
  #a06-scrimSide {
    background: linear-gradient(180deg, rgba(15, 31, 61, .86) 0%, rgba(15, 31, 61, .70) 24%,
      rgba(15, 31, 61, .30) 40%, transparent 56%);
  }
  #a06-scrimBot { height: 40%; background: linear-gradient(0deg, rgba(15, 31, 61, .74), rgba(15, 31, 61, .30) 54%, transparent); }
  #a06-h1 { text-shadow: 0 2px 16px rgba(15, 31, 61, .7), 0 1px 2px rgba(15, 31, 61, .5); }
}

/* ══ reduced-motion / 无 JS：静态可读的终态（§十五.1.8） ═══════════════
   两个选择器同义：.a06-static 由 act06.js 在 prefers-reduced-motion 下加；
   html:not(.motion) 是页面自己的退化流（JS 没跑起来时 CSS 直接兜住）。 */
.act06.a06-static #a06-fam, .act06.a06-static #a06-base,
html:not(.motion) .act06:not(.a06-js) #a06-fam,
html:not(.motion) .act06:not(.a06-js) #a06-base { opacity: 1; }
.act06.a06-static #a06-eyebrow, .act06.a06-static .a06-l,
.act06.a06-static #a06-sub, .act06.a06-static #a06-ctaWrap,
.act06.a06-static #a06-note, .act06.a06-static #a06-rule, .act06.a06-static #a06-bloom,
html:not(.motion) .act06:not(.a06-js) #a06-eyebrow, html:not(.motion) .act06:not(.a06-js) .a06-l,
html:not(.motion) .act06:not(.a06-js) #a06-sub, html:not(.motion) .act06:not(.a06-js) #a06-ctaWrap,
html:not(.motion) .act06:not(.a06-js) #a06-note, html:not(.motion) .act06:not(.a06-js) #a06-rule,
html:not(.motion) .act06:not(.a06-js) #a06-bloom { opacity: 1; transform: none; }
.act06.a06-static #a06-shaft,
html:not(.motion) .act06:not(.a06-js) #a06-shaft { opacity: .5; transform: translateX(-50%) scaleY(1); }
.act06.a06-static #a06-band, html:not(.motion) .act06:not(.a06-js) #a06-band { opacity: .12; }
.act06.a06-static .a06-wisp, html:not(.motion) .act06:not(.a06-js) .a06-wisp { opacity: .14; }
.act06.a06-static #a06-scrimSide, html:not(.motion) .act06:not(.a06-js) #a06-scrimSide { opacity: 1; }
/* 静态态下三张卡由 JS 的 layout() 摆好（.a06-static 仍然会 mount + layout 一次）；
   完全没有 JS 时给一组与 JS 同源的百分比落点：x0 + (x1-x0)×{.12,.5,.88} */
html:not(.motion) .act06:not(.a06-js) .a06-chip { opacity: 1; transform: translate(-50%, -50%) scale(1); top: 63vh; }
html:not(.motion) .act06:not(.a06-js) .a06-chip:nth-child(1) { left: calc(var(--a06-x0) + (var(--a06-x1) - var(--a06-x0)) * .12); }
html:not(.motion) .act06:not(.a06-js) .a06-chip:nth-child(2) { left: calc(var(--a06-x0) + (var(--a06-x1) - var(--a06-x0)) * .5); }
html:not(.motion) .act06:not(.a06-js) .a06-chip:nth-child(3) { left: calc(var(--a06-x0) + (var(--a06-x1) - var(--a06-x0)) * .88); }
html:not(.motion) .act06:not(.a06-js) { pointer-events: auto; }
.act06.a06-static .a06-chip { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.act06.a06-static { pointer-events: none; }
.act06.a06-static #a06-ctaWrap { pointer-events: auto; }
@media (max-width: 900px) {
  html:not(.motion) .act06:not(.a06-js) .a06-chip { top: 71svh; }
}

/* 量尺寸的那一帧：把会影响盒子的 transform 清掉再读（只在 mount / resize 时用一帧）。
   照片两层必须一起清 —— 它们身上挂着 scale(1.07~1.13) 的推镜，getBoundingClientRect
   会把缩放算进去，用带缩放的盒子去反算 cover 就会把太阳算偏（实测偏 8.5px，
   而且随进度一直在变）。这是这一版真出过的 bug，别把这两个选择器删了。 */
.act06.a06-measuring #a06-ctaWrap, .act06.a06-measuring #a06-h1,
.act06.a06-measuring #a06-linslot,
.act06.a06-measuring #a06-sky, .act06.a06-measuring #a06-fam,
/* 推镜从容器搬到了内层 <picture>（§二十五），量尺寸时要清的是它 */
.act06.a06-measuring #a06-sky picture,
.act06.a06-measuring #a06-fam picture { transform: none !important; }
.act06.a06-measuring #a06-ctaWrap, .act06.a06-measuring #a06-h1,
.act06.a06-measuring #a06-linslot { opacity: 0 !important; }