/* 首屏 v3（2026-10-08 从 hero-split-bubble.html 试稿搬进来）
   一个人两面：中间是脑子，左「I design AI」右「I design with AI」；悬停哪边哪边亮，图片像气泡从那句话里冒出来。
   所有类名都带 h3- 前缀，只在 #hero3 里生效，不碰首页其他区块。 */

#hero3 {
  --ink: #141414; --gray: #61605D; --h3-bg: #FAFAFA; --h3-line: rgba(0,0,0,.032); --h3-c: #38D9FF;
  --pad: 64px;
  position: relative; height: 100vh; height: 100svh; overflow: hidden; color: var(--ink);
  font-family: "Inter", "Noto Sans SC", sans-serif;
  /* 网格照 nataliealmosa.ca 实测：底色 #FAFAFA，线约 3% 黑，格子 40px */
  background-color: var(--h3-bg);
  background-image: linear-gradient(0deg, var(--h3-line) 1px, transparent 1px), linear-gradient(90deg, var(--h3-line) 1px, transparent 1px);
  background-size: 100% 40px, 40px 100%;
}

/* 顶部一排：照 haoqi 实测规则——12 栏网格，内容离屏幕边固定 64px；左边名字 + 签名，右边导航（和第 9–12 栏对齐、两端撑开） */
#hero3 .h3-top { position: fixed; left: 0; right: 0; top: 38px; z-index: 100; pointer-events: none; display: grid; grid-template-columns: repeat(12, 1fr); padding: 0 56px; align-items: start; }
#hero3 .h3-top > * { padding: 0 8px; }
#hero3 .h3-name { grid-column: 1 / span 4; grid-row: 1; margin: 0; white-space: nowrap; font: 600 22px/24px "Inter", sans-serif; letter-spacing: -.02em; }
#hero3 .h3-motto { grid-column: 1 / span 4; grid-row: 2; margin: 6px 0 0; font: 400 16px/24px "Inter", "Noto Sans SC", sans-serif; color: var(--gray); }
#hero3 .h3-motto b { color: var(--ink); font-weight: 600; }
#hero3 .h3-nav { grid-column: 9 / span 4; grid-row: 1; display: flex; justify-content: space-between; }
#hero3 .h3-nav a { pointer-events: auto; font: 400 16px/24px ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: opacity .2s ease; }
#hero3 .h3-nav a:hover { opacity: .5; }
@media (max-width: 1279px) { #hero3 .h3-nav { grid-column: 7 / span 6; } }

/* 脑子：灰底 + 左半黄（原图黄块）+ 右半蓝（蓝、绿两块合并刷成蓝）；默认两半都亮，悬停一边只亮那边 */
#hero3 .h3-head { position: absolute; left: 50%; bottom: 0; width: min(48vw, 88vh); transform: translateX(-50%); z-index: 2; }
#hero3 .h3-head img { display: block; width: 100%; height: auto; }
#hero3 .h3-half { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
#hero3 .h3-half.l { -webkit-mask-image: url(../../assets/avatar/brain2-mask-y.png); mask-image: url(../../assets/avatar/brain2-mask-y.png); }
#hero3 .h3-half.r { background: var(--h3-c); mix-blend-mode: multiply; -webkit-mask-image: url(../../assets/avatar/brain2-mask-c.png), url(../../assets/avatar/brain2-mask-g.png); mask-image: url(../../assets/avatar/brain2-mask-c.png), url(../../assets/avatar/brain2-mask-g.png); }
#hero3[data-side="none"] .h3-half, #hero3[data-side="left"] .h3-half.l, #hero3[data-side="right"] .h3-half.r { opacity: 1; }

/* 两边：大字 + 一行说明。竖直对齐脑子中心（--by），水平放在「屏幕边 ↔ 头的轮廓」空地正中（--lc / --rc），块里左对齐（照 Adham） */
#hero3 .h3-side { position: absolute; top: var(--by, 50%); z-index: 4; transform: translateX(-50%); text-align: left; transition: opacity .35s ease; }
#hero3 .h3-side.l { left: var(--lc, 18%); }
#hero3 .h3-side.r { left: var(--rc, 82%); }
#hero3[data-side="left"] .h3-side.r, #hero3[data-side="right"] .h3-side.l { opacity: .22; }
#hero3 .h3-tag { margin: -.55em 0 0; font: 700 clamp(32px, 3.2vw, 68px)/1.1 "Inter", sans-serif; letter-spacing: -.04em; white-space: nowrap;
  transform-origin: left bottom; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
/* 选中的一边大字轻轻退一点（仍是黑字），没选中的一边整块浅灰、大字再小一圈 */
#hero3[data-side="left"] .h3-side.l .h3-tag, #hero3[data-side="right"] .h3-side.r .h3-tag { transform: scale(.96); opacity: .82; }
#hero3[data-side="left"] .h3-side.r .h3-tag, #hero3[data-side="right"] .h3-side.l .h3-tag { transform: scale(.84); }
#hero3 .h3-desc { margin: 14px 0 0; width: 0; min-width: 100%; text-wrap: pretty; font: 400 16px/24px "Inter", "Noto Sans SC", sans-serif; color: var(--gray); }
#hero3 .h3-side.r .h3-desc { width: max-content; min-width: 0; }   /* 右边说明放得下就一行，放不下只在逗号处断 */
#hero3 .h3-nb { white-space: nowrap; }
#hero3 .h3-lk { color: inherit; text-decoration: underline; text-decoration-color: rgba(20,20,20,.25); text-underline-offset: 3px; transition: text-decoration-color .2s ease, color .2s ease; }
#hero3 .h3-lk:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* 冒泡：悬停一边时，图从那句大字中间一个接一个冒出来，往上升、散开、淡掉，循环；泡在大字前面。路线由脚本算 */
#hero3 .h3-pop { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#hero3 .h3-pp { position: absolute; left: var(--tx); top: var(--ty); width: var(--s); height: var(--s); opacity: 0; pointer-events: none; text-decoration: none; }
#hero3[data-side="left"] .h3-pop.l .h3-pp, #hero3[data-side="right"] .h3-pop.r .h3-pp { pointer-events: auto; }
#hero3 .h3-ppi { display: block; width: 100%; height: 100%; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 14px 30px rgba(20,20,20,.2); transition: transform .25s ease; }
#hero3 .h3-ppi img { width: 100%; height: 100%; object-fit: contain; display: block; }
#hero3 .h3-ppi.icon { display: flex; align-items: center; justify-content: center; }
#hero3 .h3-ppi.icon img { width: 72%; height: 72%; }   /* 2026-10-09 换成 144px 的 Usar IA 图标，放到 72% 还清楚 */
#hero3 .h3-ppi.cover img { object-fit: cover; }
#hero3 .h3-pp:hover .h3-ppi { transform: scale(1.06); }
#hero3 .h3-bt { position: absolute; bottom: -12px; font: 600 12px/1 "Inter", "Noto Sans SC", sans-serif; font-style: normal; color: var(--ink); background: #fff; padding: 7px 11px; border-radius: 44px; white-space: nowrap; box-shadow: 0 4px 14px rgba(20,20,20,.12); }
#hero3 .h3-pop.l .h3-bt { left: 70%; } #hero3 .h3-pop.r .h3-bt { right: 70%; }

/* 窄屏（窄于 1100px）：两边挪到脑子上方并排 */
@media (max-width: 1100px) {
  #hero3 { --pad: 24px; }
  #hero3 .h3-top { padding: 0 16px; grid-template-columns: 1fr auto; }
  #hero3 .h3-nav { grid-column: 2; gap: 20px; }
  #hero3 .h3-name, #hero3 .h3-motto { grid-column: 1; }
  #hero3 .h3-side { top: 150px; transform: none; }
  #hero3 .h3-side.l { left: var(--pad); } #hero3 .h3-side.r { left: auto; right: var(--pad); }
  #hero3 .h3-tag { margin-top: 0; font-size: 26px; }
  #hero3 .h3-desc, #hero3 .h3-side.r .h3-desc { width: auto; max-width: 42vw; white-space: normal; font-size: 14px; line-height: 20px; }
  #hero3 .h3-head { width: min(620px, 64vh, 96vw); }
}
/* 手机（窄于 640px，2026-10-09）：导航不再隐藏，名字缩小、导航 11px，和名字同一行；两句大字上下叠放，各带说明 */
@media (max-width: 640px) {
  #hero3 .h3-top { top: 22px; }
  #hero3 .h3-name { font-size: 18px; line-height: 22px; white-space: nowrap; }
  #hero3 .h3-motto { grid-column: 1 / -1; font-size: 14px; line-height: 20px; margin-top: 4px; }
  #hero3 .h3-nav { display: flex; gap: 10px; }
  #hero3 .h3-nav a { font-size: 11px; line-height: 22px; }
  #hero3 .h3-top::before { top: -22px; height: 82px; }
  #hero3 .h3-side { top: 128px; }
  #hero3 .h3-side.l, #hero3 .h3-side.r { left: 16px; right: 16px; }
  #hero3 .h3-side.r { top: 236px; }
  #hero3 .h3-tag { font-size: 30px; }
  #hero3 .h3-desc, #hero3 .h3-side.r .h3-desc { max-width: none; margin-top: 8px; }
}

/* 2026-10-09 顶部常驻：名字 + 导航固定在屏幕上、透明无底（照 haoqi）；滚离首屏顶部后签名淡出 */
#hero3 .h3-name a { color: inherit; text-decoration: none; pointer-events: auto; }
#hero3 .h3-motto { transition: opacity .25s ease; }
#hero3.h3-scrolled .h3-motto { opacity: 0; }
/* 滚过首屏后作品会从导航底下穿过，加一条和页面同色的半透明磨砂底，字才看得清；首屏里不出现 */
#hero3 .h3-top::before { content: ""; position: absolute; left: 0; right: 0; top: -38px; height: 92px; z-index: -1; background: rgba(250,250,250,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0,0,0,.06); opacity: 0; transition: opacity .25s ease; }
#hero3.h3-past .h3-top::before { opacity: 1; }
#hero3 .h3-motto b { transition: opacity .25s ease; }
/* 2026-10-09 衔接：首屏底边一条静止的细黑条，头像落在上面。默认里面一行小字（名字 / 邮箱 / 往下看作品） */
#hero3 .h3-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 64px; background: #141414; color: #fff; font: 400 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; }
#hero3 .h3-bar a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
#hero3 .h3-bar a:hover { opacity: .6; }
#hero3 .h3-bar a[href^="mailto"] { text-transform: none; }
@media (max-width: 640px) { #hero3 .h3-bar { padding: 0 16px; font-size: 11px; } #hero3 .h3-bar > :first-child { display: none; } }