/**
 * MythosX 官网首页的页面样式。
 *
 * 业务定位：首页是全站品牌语言的母版，视觉以 Owner 认可的原型 design-proposal/hero-proto/site.css 为准。
 * 令牌、顶栏、页脚、按钮、进场等共用部分全部来自 mx/mx.css，这里只放首页独有的版式，
 * 以及 mx.css 里和原型取值不同、首页必须按原型来的几条覆盖（每条注明覆盖的是哪条共享规则）。
 * 本文件只被 index.html 引用，覆盖不会波及其它页面；mx.css 不为首页改动。
 *
 * 维护注意：
 *   - 规则按原型 site.css 的顺序和写法搬来，改首页视觉时两边对照着改；
 *   - url() 相对于本文件（mx/）解析，素材在站点的 img/home/，所以写成 ../img/home/…；
 *   - 首屏 X 的尺寸公式（--x-body、--stage-*）和 mx/page-home-stage.js、frames.json 的 bbox0 绑在一起，单改一边会错位。
 */

/* 顶栏：菜单打开时面板必须盖住 X；平时 X 要飞进顶栏，层级比顶栏高 */
.bar.is-menu ~ .fly { z-index: 40; }

/* 首屏 ------------------------------------------------------------------ */
/* 首屏高度和 X 的尺寸都写成变量。舞台要按 X 本体（不是整帧）定尺寸、对齐文字块，必须在 CSS 里就算得出，
   首帧才不会先画在一处再被脚本挪走。比例来自 frames.json 的 bbox0：本体约占帧高 59.7%，中心在帧高 34.4% 处。
   Owner 11-02：X 原来太大、偏右上。原因是舞台高度跟着首屏走而文字列有上限，屏幕越高越失衡，
   所以本体高度按视口给并封顶，中心对齐文字块中心（文字块在首屏里居中，内边距让它下移 8px） */
.hero {
  --hero-h: clamp(680px, 100svh, 1360px);   /* 上限盖住 2560×1440 屏的可视高度，首屏底部不留一截空黑 */
  --x-body: clamp(320px, min(44svh, 26vw), 500px);   /* 宽屏随宽度略放大；上限按文字块高度的 1.2 倍以内定，再大就回到 Owner 说的「太大」 */
  --stage-h: calc(var(--x-body) / .597);
  --stage-w: calc(var(--stage-h) * 560 / 860);
  --stage-top: calc(var(--hero-h) / 2 + 8px - var(--stage-h) * .344);
  position: relative; height: var(--hero-h); overflow: clip;
}
/* 底光把左右两半连成一个空间，不是黑页面右边贴一张图；颗粒只铺在这一层，用来打散暗部渐变的色带，不碰文字 */
.hero-light { position: absolute; inset: 0; pointer-events: none; background:
  url("../img/home/grain.png") 0 0 / 128px 128px,
  radial-gradient(80% 64% at 72% 24%, rgba(150, 140, 124, .085), transparent 72%); }
/* 首屏版心声明为尺寸容器：口号字号按版心宽度（cqw）算，X 的位置也按版心宽度算，
   两者同比例缩放，「Mythos」和右侧 X 的间距在任何屏宽下都一样，不会一宽一窄地撞上 */
.hero-in { position: relative; height: 100%; display: flex; align-items: center; container-type: inline-size; }
/* 宽度按口号较长那一行在最大字号时的实际宽度留足，窄了会折成三行 */
.hero-copy { position: relative; z-index: 2; width: min(58%, 860px); padding-top: calc(var(--bar-h) - 48px); }
/* 首个元素的上外边距不会折叠出盒子（盒子有内边距），留着会让文字块比舞台公式假设的位置低半个边距 */
.hero-copy > :first-child { margin-top: 0; }
/* 口号是英文衬线，两行。字距略收，大字号下拉丁字母才不松散；行高收紧到 1.04，两行读起来是一个整体。
   渐变字只画在元素盒子以内，行高小于字体的下伸部，末行 y 的尾巴会被切掉（实测 Myth 显示成 Mvth），
   所以底部补 .14em 内边距，外边距相应减掉 */
h1 { margin: 28px 0 14px; padding-bottom: .14em; font: 500 clamp(46px, calc(36px + 2.6vw), 112px) / 1.04 var(--display); letter-spacing: -.014em; background: linear-gradient(168deg, #fff 30%, #b9b4aa 96%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 第二行「we are a Mythos」（Mythos 放大 1.2 倍）约 8.5 个字号宽，取 5.9cqw 时收在版心 50% 以内，
   离 X 本体左缘约 6% 版心宽 */
.hero h1 { font-size: clamp(44px, 5.9cqw, 104px); margin-bottom: 22px; }   /* 放大的 Mythos 下伸更深，和中文副标题多留一点 */
/* 首屏 H1 自己不裁文字背景：父元素用 background-clip: text、子元素是行内块时，Chrome 会把子元素的字形
   画到父元素左上角，实测出现一个和第一行叠在一起的幽灵 Mythos。渐变挪到内层 span，
   box-decoration-break: clone 让每一行各自从白到浅灰，像两条拉丝金属，Mythos 另行处理 */
.hero h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); }
.h1-lines { background: linear-gradient(180deg, #fff 38%, #c4bfb5 100%); -webkit-box-decoration-break: clone; box-decoration-break: clone; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* 口号末尾的 Mythos：和右侧的 3D X 连读成 MythosX，所以单独强调（Owner 11-02 要求）。
   放大两成；填充做成拉丝钢：底层是由亮到暗再回亮的银色渐变，模拟顶光落在金属上；
   中层是分形噪声拉成的横向长丝（SVG feTurbulence，横向频率极低、纵向高），深浅不一才像拉丝，
   原来 1px 一道的规则细纹在 Owner 的屏上读成了扫描线；最上层是一道高光。
   不用金色：Owner 否过鎏金。行高 .96：这一行只比上一行高约 0.1em，M 的顶不会顶到上一行 p 的尾巴 */
/* inline-block：Chrome 对行内元素的 mask 不生效（实测显影动画整词一直可见）。
   改成行内块后背景只画在盒子里，y 的下伸部会被裁掉，所以底部补 .2em 内边距、再用等量负外边距抵消，行高不变 */
.mythos {
  display: inline-block; padding-bottom: .2em; margin-bottom: -.2em;
  font-style: normal; font-size: 1.2em; line-height: .96;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .72) 50%, transparent 60%) 130% 0 / 260% 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='160'%3E%3Cfilter id='s' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.6' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.42 0 0 0 -0.1'/%3E%3C/filter%3E%3Crect width='480' height='160' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 480px 160px,
    linear-gradient(176deg, #ffffff 8%, #dcd8d0 40%, #8e8a82 66%, #c9c5bc 88%, #f2efe9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
/* 入场：一道软边从左往右把字显影出来，同时由虚到实（遮罩位置 100% → 0，软边宽约半个字）；
   字成形后高光从左往右扫过一次（背景位置 130% → -30%，起止都在字外，不会闪）。
   只动遮罩、模糊和高光位置，不位移、不缩放：克制，也不会引起版面跳动 */
.js .mythos {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  filter: blur(6px);
  animation: mythos-in 1.1s cubic-bezier(.3, 0, .2, 1) .45s forwards, mythos-glint 1.3s cubic-bezier(.3, 0, .2, 1) 1.4s both;
}
@keyframes mythos-in { to { -webkit-mask-position: 0 0; mask-position: 0 0; filter: blur(0); } }
@keyframes mythos-glint { from { background-position: 130% 0, 0 0, 0 0; } to { background-position: -30% 0, 0 0, 0 0; } }
/* 覆盖 mx.css 的 .lead（38em、1.85）和 .lead b（行内）：首屏文字块的高度决定 X 的纵向对齐，必须按原型取值 */
.lead { max-width: 34em; font-size: clamp(16px, calc(12px + .25vw), 18px); line-height: 1.8; color: #8c8a83; }
.lead b { display: block; margin-bottom: 8px; font-size: clamp(18px, calc(14px + .3vw), 21px); font-weight: 400; color: var(--text); }
/* 导语的 .nw 是给中文里「独占 L0 的 Anvil」这类中英混排词组防腰斩的；英文按单词自然折行就够，
   保留 nowrap 会让整个短语只能整体换行，窄屏上出现「Anvil holding L0,」独占一行的参差 */
:lang(en) .lead .nw { white-space: normal; }

/* 舞台盒子：比例和序列帧一致，图片到达前位置就占好，这是 CLS 不超标的前提。
   水平方向把 X 放在版心 72% 处：Owner 11-02 说偏右，宽屏上再往右就离文字太远 */
.stage { position: absolute; z-index: 1; top: var(--stage-top); left: calc(var(--gutter) + (100% - var(--gutter) * 2) * .72 - var(--stage-w) / 2); width: var(--stage-w); height: var(--stage-h); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: -8px; }
.stage.is-drag { cursor: grabbing; }
/* 光束自带透明通道，只加光不盖底。不用 mix-blend-mode：舞台自成层叠上下文，混合够不到页面底色。
   顶端必须够到首屏顶部，否则光束在半空截出一道硬边；舞台下移多少，光束就向上补多少 */
.stage-beam { position: absolute; top: calc(-1 * var(--stage-top)); left: 50%; width: 250%; max-width: none; height: calc(100% + var(--stage-top)); transform: translateX(-50%); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 92%); mask-image: linear-gradient(to bottom, #000 62%, transparent 92%); }
.stage-poster, .stage-intro, .stage-refl { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; -webkit-user-drag: none; }

/* 进场：page-home-stage.js 播放 Cycles 渲的布光序列（X 不动、灯在动），这里只管脚本接手之前和兜底的静帧。
   开场的静帧是序列第一帧：暗钢上只有轮廓光和两成补光，X 的轮廓第一时间就在，不是黑屏
   （Owner 11-02：刚打开纯黑有点丑）。它在 HTML 里，不等脚本，也不再用 CSS 滤镜压暗：第一帧本身就是暗的。
   只在有脚本、允许动效时出现；无脚本和减弱动效下直接是默认帧海报。
   .js 由 index.html 头部的内联脚本最先加上（不等 defer 的 mx-shell.js），首帧就按有脚本的样子画，不闪。
   光束开场只留一点，由脚本按扫光灯的节奏点亮 */
.stage-intro { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .stage-intro { display: block; }
  .js .stage-poster { opacity: 0; }
  .js .stage-beam { opacity: .18; }
}
/* 定格光：进场播完、被用户打断，或兜底时，光束和海报都回到终态 */
.stage.is-lit .stage-intro { opacity: 0; }
.stage.is-lit .stage-poster, .stage.is-lit .stage-beam { opacity: 1; }
/* 兜底：进场帧没在截止时间内到齐（或省流模式），第一帧淡到默认帧，时长和脚本的 FADE_MS 一致 */
.stage.is-fade .stage-intro, .stage.is-fade .stage-poster, .stage.is-fade .stage-beam { transition: opacity .6s var(--ease); }
.stage.is-live .stage-intro, .stage.is-live .stage-poster { visibility: hidden; }
.js .hero-copy > * { animation: rise .7s var(--ease) both; }
.js .hero-copy > :nth-child(2) { animation-delay: .05s; }
.js .hero-copy > :nth-child(3) { animation-delay: .1s; }
.js .hero-copy > :nth-child(4) { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.fly { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; transform-origin: 0 0; visibility: hidden; will-change: transform; }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 2; }
.trust { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1; color: var(--text-3); transition: color .2s var(--ease); }
.trust:hover { color: var(--text-2); }
.trust b { font-weight: 500; color: var(--text-2); }
.trust em { font-style: normal; font-family: var(--mono); color: var(--text-2); }
.trust-more::before { content: "·"; margin-right: 10px; color: var(--text-3); }
.trust-go { font-style: normal; color: var(--text-3); transition: transform .25s var(--ease), color .2s var(--ease); }
/* 悬停按全站规范：箭头提到 --text、不位移不变暖金；加粗字加 .5 下划线 */
.trust:hover .trust-go { color: var(--text); }
.trust:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--ink-rgb), .5); text-underline-offset: 4px; }

/* 通用段落 --------------------------------------------------------------- */
/* 覆盖 mx.css 的 .sec + .sec { padding-top: 0 }：内页章节首尾相接，首页各节之间要按原型留满段距。
   需要贴紧的两处（Janus 紧跟 Anvil、产品卡紧跟 Janus）在下面单独归零 */
.sec + .sec { padding-top: clamp(80px, 8vw, 128px); }
/* 覆盖 mx.css 的 h2、h3 字号：首页标题比内页大一档，按原型 */
h2 { margin-top: 16px; font: 500 clamp(36px, 4vw, 56px) / 1.2 var(--display); letter-spacing: .005em; color: var(--text); }
h3 { font: 500 clamp(26px, 2.5vw, 34px) / 1.25 var(--display); }
/* 覆盖 mx.css 的 .sub 宽度（38em） */
.sub { max-width: 36em; }

/* 进场的错峰：同一组里后一项晚一点，读起来是一行一行落下来的 */
.depth-list li:nth-child(2) { transition-delay: .06s; }
.depth-list li:nth-child(3) { transition-delay: .12s; }
.depth-list li:nth-child(4) { transition-delay: .18s; }
.lines-in .card:nth-child(2) { transition-delay: .08s; }

/* 产品四行 --------------------------------------------------------------- */
.depths { padding-top: clamp(72px, 8vw, 120px); }
.depth-list { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.depth-list li { border-bottom: 1px solid var(--line); }
.depth-list a { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1.1fr) minmax(0, 1fr) 24px; align-items: baseline; gap: 24px; padding: 30px 0; }
/* 去油：原先悬停时整行扫过一道暖金渐变光，已删；悬停只靠名字和箭头变色 */
.depth-tag { font: 500 13px/1 var(--mono); letter-spacing: .02em; color: var(--text-3); }
.depth-list strong { font: 500 clamp(24px, 2.6vw, 36px) / 1.2 var(--display); transition: color .25s var(--ease); }
.depth-line { font-size: 15px; color: var(--text-2); }
.depth-list i { justify-self: end; font-style: normal; color: var(--text-3); transition: transform .3s var(--ease), color .25s var(--ease); }
/* 悬停按全站规范：名字加 .5 下划线、箭头提到 --text；不变暖金、不位移 */
.depth-list a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--ink-rgb), .5); text-underline-offset: 6px; }
.depth-list a:hover i { color: var(--text); }

/* 旗舰章节：Anvil 文左图右，Janus 图左文右（.chapter-in 在 mx.css）。两节之间不再留段距 */
.chapter + .chapter { padding-top: 0; }
/* Anvil 三层图（mx/viz-planes.js 画在 #planes 上，#trace 是事件链） */
.planes { position: relative; aspect-ratio: 7 / 6; min-width: 0; }
.planes::before { content: ""; position: absolute; inset: 8% 12% -6% -6%; background: radial-gradient(50% 42% at 50% 66%, rgba(232, 196, 147, .10), transparent 72%); pointer-events: none; }
.planes canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Janus 启动时间线（mx/viz-boot.js 画在 #boot 上）：比 Anvil 的板子扁，时间是横向的 */
.boot { position: relative; aspect-ratio: 8 / 5; min-width: 0; }
.boot::before { content: ""; position: absolute; inset: 20% 30% 10% 4%; background: radial-gradient(50% 50% at 40% 60%, rgba(232, 196, 147, .07), transparent 72%); pointer-events: none; }
.boot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 产品卡 ----------------------------------------------------------------- */
.sec.lines { padding-top: 0; }
.lines-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
/* 覆盖 mx.css 的卡片内距、卡头下距、卡底上距和 .card h3 的下外边距，按原型 */
.card { padding: clamp(24px, 3vw, 40px); }
.card-head { margin-bottom: 28px; }
.card h3 { margin-bottom: 0; }
/* mx.css 的 .card p 把段落统一成次级灰；卡片的定位句按原型是正文白，所以要比它更具体 */
.card .card-role { margin: 6px 0 16px; color: var(--text); }
.branches { margin-top: 20px; border-top: 1px solid var(--line); }
.branches div { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.branches dt { font-family: var(--mono); font-size: 12.5px; line-height: 21px; color: var(--text); }
.branches dd { color: var(--text-2); }
.branches a { font-family: var(--mono); font-size: 12.5px; line-height: 21px; color: var(--text-2); transition: color .2s var(--ease); }
.branches a:hover { color: var(--accent); }
.branches .is-off dt, .branches .is-off dd { color: var(--text-3); }
.card-foot { padding-top: 28px; }

/* 团队 ------------------------------------------------------------------- */
.team-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.team-head h2 { margin: 0; font-size: clamp(40px, 5.6vw, 80px); line-height: 1.08; letter-spacing: -.012em; }
.glint { background: linear-gradient(100deg, #fff 8%, var(--accent) 60%, #8f8676 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sign { margin-top: 18px; font: 500 13px/1 var(--mono); color: var(--text-3); }
/* 覆盖 mx.css 的 .table（左栏 180px、行距 18px）：按原型 160px、20px，并和标题区拉开距离 */
.table { margin-top: clamp(40px, 5vw, 72px); }
.table div { grid-template-columns: 160px minmax(0, 1fr); padding: 20px 0; }

/* 购买 ------------------------------------------------------------------- */
.buy { position: relative; overflow: clip; }
.buy::before { content: ""; position: absolute; inset: 0 0 0 50%; width: 1400px; margin-left: -700px; background: url("../img/home/beam.webp") center top / 100% 100% no-repeat; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 46%, transparent 92%); mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 46%, transparent 92%); pointer-events: none; }
.buy-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.buy .sub { max-width: 40em; }
.actions-center { justify-content: center; gap: 24px; }

/* 窄屏 ------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero { height: auto; max-height: none; min-height: 0; padding-top: calc(var(--bar-h) + 36px); }
  .hero-in { display: block; height: auto; }
  .hero-copy { width: 100%; padding-top: 0; }
  h1, .hero h1 { font-size: clamp(40px, 11cqw, 72px); }
  .stage { position: relative; inset: auto; left: auto; top: auto; width: min(100%, 460px); height: auto; aspect-ratio: 560 / 860; margin: 24px auto 0; }
  .stage-beam { top: -42px; height: calc(100% + 42px); }
  .hero-foot { position: static; padding-block: 12px 28px; }
  .trust { flex-wrap: wrap; line-height: 1.6; }
  .trust-more { display: none; }
  .depth-list a { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px 16px; padding: 22px 0; }
  .depth-tag, .depth-line { grid-column: 1; }
  .depth-list strong { grid-column: 1; grid-row: 2; }
  .depth-list i { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .team-head, .lines-in { grid-template-columns: minmax(0, 1fr); }
  .team-head { align-items: start; }
  .table div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* 手机不显示首屏 X（Owner 11-04）：序列帧在手机上要下 8MB、逐帧解码，拖动和滚动都卡；竖屏里 X 排在按钮下面，
   首屏一半是它，正文被挤到第二屏。舞台和飞入画布一起收掉，首屏只留文字和按钮，品牌由顶栏字标承担。
   641～960px 的平板照旧显示（不飞入，见上一段）。断点和 index.html 的预载、page-home-stage.js 的 PHONE 是同一个数 */
@media (max-width: 640px) {
  .stage, .fly { display: none; }
  .hero-foot { padding-top: 40px; }   /* 原来和按钮之间隔着舞台，收掉后补一段间距，状态条不贴着按钮 */
}
@media (max-width: 520px) {
  .boot { aspect-ratio: 1 / 1; }    /* 手机上时间线太扁，泳道之间放不下检测说明 */
  .actions { flex-wrap: wrap; }
  .branches div { grid-template-columns: minmax(0, 1fr) auto; }
  .branches dd { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .js .mythos { animation: none; -webkit-mask-image: none; mask-image: none; filter: none; }
}

/* 11-11 第十三轮孤字：产品线的一句话、分支表说明、要点列表折行后末行只剩一两个字（中文 360 / 390 / 1024）或一个词（英文 360 / 1024）。
   分支表说明用 pretty（只在末行只剩一个词时重排）；短句和小标签见下面两条 */
.branches dd { text-wrap: pretty; }
/* 中文的两字孤行 pretty 不处理（它只管末行只剩一个「词」，而每个汉字都算一个词）：一两行的短句改用 balance 按行平衡 */
.depth-line, .ticks li { text-wrap: balance; }
/* 卡片头右侧的小标签在 360 宽被拆成两行、末行只剩半个词：不折行，让左边的标题去折 */
.lines .card-head em { white-space: nowrap; }