/* ── 首屏第三版：图卡随滚动铺满 ─────────────────────────────────────
   照所里给的「Hero 改版 v3」的 3a 做。机制拆开看是三件事：

   1. 一段两屏高的滚动区，里面放一层 position:sticky 的舞台。
      滚过这两屏的过程中舞台不动，图卡在舞台里从悬浮小卡插值到铺满整屏——
      这就是"上滑图片变大"的来源，不需要任何滚动劫持。

   2. 图卡的矩形用 inset 插值，不用 transform:scale。
      scale 会把圆角和阴影一起缩放，放大后圆角变成夸张的大弧；
      inset 则是真的改变矩形，圆角保持恒定，铺满时归零，观感才对。

   3. 铺满之后，事务所简介以玻璃面板浮在图上。
      原设计这里是一段毛笔字动效（v3 里的 aInk，靠一款 908 KB 的中文毛笔
      字体实现），按所里要求去掉；面板取代了原先那张前台照片。

   标题逐字浮现保留——那是入场节奏，不是笔画动效。字符跨度由脚本生成，
   避免中英两套文案在 HTML 里各写一遍几十个 span。

   配色仍走既有变量，深浅两套主题都成立。                              */

.hero3 { position: relative; }

/* 滚动区高度决定"放大"这一段有多长。两屏是舒服的节奏：
   一屏用来读标题，一屏用来看图铺开。 */
.hero3-track { height: 200svh; position: relative; }
.hero3-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: var(--bg);
}

/* 顶部那层柔光，让深色底不至于死板 */
.hero3-glow {
  position: absolute; inset: -18% -10% auto -10%; height: 66%;
  pointer-events: none;
  background: radial-gradient(58% 70% at 50% 0%,
    color-mix(in srgb, var(--blue-400) 26%, transparent), transparent 70%);
}

/* ── 文字 ─────────────────────────────────────────────────────── */
.hero3-text {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  padding: clamp(84px, 11vh, 116px) var(--gut) 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  will-change: transform, opacity;
}
.hero3-eyebrow {
  font-size: clamp(12px, 1.1vw, 13px); font-weight: 500; letter-spacing: .14em;
  color: var(--text-dim);
}
.hero3 h1 {
  margin: 16px 0 0; font-family: var(--sans); font-weight: 600;
  font-size: clamp(34px, 5.2vw, 66px); line-height: 1.14; letter-spacing: -.03em;
  color: var(--text);
}
/* 第二行用渐变裁字。background-clip:text 必须同时给 -webkit- 前缀，
   否则 Safari 上整行会变成不透明色块。 */
.hero3 h1 .grad {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--text) 96%, #fff) 0%, var(--blue-400) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="light"] .hero3 h1 .grad {
  background: linear-gradient(180deg, var(--navy-700) 0%, var(--blue-400) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero3-lede {
  margin: 20px 0 0; max-width: 620px;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.72; color: var(--text-soft);
  text-wrap: pretty;
}
.hero3-acts { display: flex; align-items: center; gap: 26px; margin-top: 26px; flex-wrap: wrap;
  justify-content: center; }
/* 胶囊按钮是这一版的标志性元素之一：980px 圆角 + 悬停微抬 */
.hero3-acts .pill {
  font-size: 15px; font-weight: 500; color: #fff; background: var(--blue-500);
  padding: 13px 26px; border-radius: 980px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--blue-500) 32%, transparent);
  transition: transform .3s var(--ease3), box-shadow .3s ease, background .3s ease;
}
.hero3-acts .pill:hover {
  background: var(--blue-400); transform: scale(1.045) translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue-500) 45%, transparent);
}
.hero3-acts .quiet { font-size: 15px; font-weight: 500; color: var(--blue-400);
  padding: 13px 4px; transition: color .25s ease, transform .3s var(--ease3); }
.hero3-acts .quiet:hover { color: var(--gold); transform: translateX(3px); }
html[data-theme="light"] .hero3-acts .quiet { color: var(--blue-600); }

/* ── 图卡 ─────────────────────────────────────────────────────── */
/* 位置全部走 inset，由脚本按滚动进度插值；圆角与阴影随之收敛。 */
.hero3-card {
  position: absolute; z-index: 2; overflow: hidden;
  inset: 458px 140px 68px 140px;      /* 初值，脚本会接管 */
  border-radius: 18px;
  box-shadow: 0 50px 90px rgba(0, 0, 0, .55);
  will-change: inset, border-radius;
}
.hero3-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; will-change: transform; }
/* 底部压深，让图卡上的说明文字站得住 */
.hero3-veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,22,39,.18) 0%, rgba(6,22,39,0) 34%,
                                      rgba(6,22,39,.72) 100%); }
.hero3-cap {
  position: absolute; left: 28px; bottom: 22px; display: flex; align-items: baseline;
  gap: 12px; color: rgba(255,255,255,.78); font-size: 13px; letter-spacing: .06em;
  will-change: left, bottom;
}
.hero3-cap span:last-child { color: rgba(255,255,255,.45); }

/* ── 铺满后浮出的简介面板 ──────────────────────────────────────── */
/* 玻璃质感的关键仍是 backdrop-filter 真把身后的图糊掉；
   纯半透明色块只会显得像蒙了层塑料。 */
.hero3-about {
  position: absolute; z-index: 4; left: 50%; bottom: clamp(48px, 8vh, 96px);
  transform: translateX(-50%) translateY(28px);
  width: min(760px, calc(100% - 2 * var(--gut)));
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: 18px;
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255,255,255,.22);
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease3), transform .6s var(--ease3);
}
.hero3-about.on { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
/* 面板压在照片上，文字一律用浅色——两套主题都是如此，
   因为它的背景是照片而不是页面底色。 */
.hero3-about .kicker { color: var(--gold-soft); }
.hero3-about h2 {
  margin: 12px 0 14px; font-family: var(--serif); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.35; color: #fff;
}
.hero3-about p { margin: 0 0 10px; font-size: clamp(14px, 1.4vw, 15.5px);
  line-height: 1.85; color: rgba(255,255,255,.82); }
.hero3-about .tenet {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.2);
  font-family: var(--serif); font-size: clamp(15px, 1.6vw, 18px); color: var(--gold-soft);
}

.hero3-cue {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: var(--text-soft); pointer-events: none;
}
.hero3-cue span { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.hero3-cue i { display: block; width: 1px; height: 26px;
  background: linear-gradient(180deg, currentColor, transparent);
  animation: hero3cue 2.2s ease-in-out infinite; }
@keyframes hero3cue { 0%,100%{transform:translateY(0);opacity:.55} 50%{transform:translateY(5px);opacity:1} }

/* ── 入场 ─────────────────────────────────────────────────────── */
:root { --ease3: cubic-bezier(.22, 1, .36, 1); }
@keyframes hero3char { from { transform: translateY(108%); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes hero3rise { from { opacity: 0; transform: translateY(16px); filter: blur(8px) }
                       to   { opacity: 1; transform: none;            filter: blur(0) } }
/* 逐字：外层裁切、内层上移，字才像从一条线下面升起来 */
.hero3 h1 .ch { display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .1em; margin-bottom: -.1em; }
.hero3 h1 .ch > i { display: inline-block; font-style: inherit;
  animation: hero3char .95s var(--ease3) both; animation-delay: var(--d, 0s); }
.hero3 [data-rise] { animation: hero3rise 1s var(--ease3) both; animation-delay: var(--d, 0s); }
.hero3-card { animation: hero3rise 1.2s var(--ease3) .8s both; }

@media (prefers-reduced-motion: reduce) {
  .hero3 h1 .ch > i, .hero3 [data-rise], .hero3-card { animation: none }
  .hero3-cue i { animation: none }
}

/* 矮屏手机（iPhone SE 一类：Safari 工具栏展开时视口只剩 548px 高）。
   面板按底边定位往上长，英文简介又比中文长出一半多，结果顶进 72px 的顶栏
   底下，360×560 时上沿干脆被舞台裁掉。收紧留白、字号与行距，让它落回顶栏以下；
   中文本就放得下，一并收紧也无妨。 */
@media (max-width: 480px) and (max-height: 640px) {
  .hero3-about { bottom: 20px; padding: 18px 20px; }
  .hero3-about h2 { margin: 8px 0; font-size: 20px; }
  .hero3-about p { margin-bottom: 6px; font-size: 13.5px; line-height: 1.6; }
}

@media (max-width: 720px) {
  .hero3-card { border-radius: 14px }
  .hero3-cap { left: 16px; bottom: 14px; font-size: 12px }
  .hero3-cap span:last-child { display: none }
}