/* 首页动效层：接在模板内联样式之后，覆盖统一的上浮淡入，加接线舞台、光门结尾和纸面颗粒。
   脚本见 /js/home-motion.js；关闭动效（prefers-reduced-motion）时一切直接显示。 */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); }

/* 纸面颗粒：极淡的一层噪点，压掉纯色平涂的数码感 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.045;
  background-image: url("/assets/motion/grain.svg");
}

/* 标题不再一律半句染金：只留首屏口号 */
#lines h2 .gold, #origin h2 .gold, #prod-hos .gold, #talk h2 .gold { color: inherit; }

/* ── 进场：标题从遮罩里升起，正文带一点失焦后对焦 ── */
.js .reveal, .js .reveal-l, .js .reveal-r {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.js h2.reveal, .js h3.reveal, .js #hero h1.reveal {
  opacity: 1; filter: none; transform: translateY(0.6em);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease-io), transform 0.7s var(--ease-out);
}
.js .reveal.in, .js .reveal-l.in, .js .reveal-r.in, .js #hero h1.reveal.in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 -0.3em 0); }

/* 首屏大标题：英文名缩成标签，中文口号放大 */
#hero h1 { font-size: clamp(2.6rem, 4.8vw, 4.6rem); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 1.8rem; max-width: 9.5em; word-break: keep-all; }
#hero h1 br { display: none; }
#hero .h1-en { display: block; font-size: max(0.82rem, 0.2em); letter-spacing: 0.32em; color: var(--navy); margin-bottom: 1.4rem; }
#hero .lede { font-size: 1.1rem; max-width: 28rem; }
/* 首屏：口号升起后，说明和按钮依次对焦 */
.js #hero .lede.reveal.in { transition-delay: 0.12s; }
.js #hero .ctas.reveal.in { transition-delay: 0.2s; }


/* ── 随滚动逐字变亮的段落 ── */
.scrub-text { color: var(--navy); }
.js .scrub-text.ready .ch { opacity: 0.16; transition: opacity 0.25s linear; }
.js .scrub-text.ready .ch.lit { opacity: 1; }

/* ── 底层判断：三句主张，编号 + 大字 ── */
#values { padding: 18vh 0 16vh; background: transparent; }
#values .shell { max-width: 72rem; }
#values > .shell > h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 0 0 6vh; }
.beliefs { list-style: none; margin: 0; padding: 0; }
.belief { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 4.2rem 0; border-top: 1px solid var(--line); }
.belief:last-child { border-bottom: 1px solid var(--line); }
.belief-no { font-size: 0.95rem; letter-spacing: 0.2em; color: var(--gold-deep); padding-top: 0.9rem; }
.belief h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 1.2rem; max-width: 22em; word-break: keep-all; overflow-wrap: anywhere; }
.belief p { font-size: 1.05rem; line-height: 2; color: var(--navy-soft); max-width: 34em; margin: 0; word-break: keep-all; overflow-wrap: anywhere; }

/* ── H.OS：右侧影片进入视口后播一次，停在末帧；四边羽化融进底色 ── */
.hos-film {
  /* 原片 16:9，酒店在画面右侧：裁成方形对准酒店，边缘柔化成圆，不留矩形边 */
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; max-width: 34rem; margin-left: auto;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.film-still, .film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.film-canvas { opacity: 0; transition: opacity 0.4s ease; }
.hos-film.live .film-canvas { opacity: 1; }
.hos-film.live .film-still { visibility: hidden; }
/* 三步：汇到 H.OS → 看清 → 派人，编号一行一句 */
.hos-flow { list-style: none; counter-reset: flow; margin: 1.6rem 0 1.4rem; padding: 0; display: grid; gap: 0.9rem; }
.hos-flow li {
  counter-increment: flow; display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline;
  font-size: 1.02rem; line-height: 1.8; color: var(--navy); word-break: keep-all; overflow-wrap: anywhere;
}
.hos-flow li::before { content: "0" counter(flow); font-family: "Cinzel", serif; font-size: 0.8rem; letter-spacing: 0.15em; color: var(--gold-deep); }

/* 中文断行：只在标点和空格处换行，标题两行尽量等长 */
#hero .lede, .door-text, .product-copy p, .pscreen .psub { word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
#lines h2, #origin h2, #values > .shell > h2, .pscreen h2, .belief h3 { text-wrap: balance; }

/* ── 进入视口播一次的动画：JS 先加 .armed（停在第一帧），进入视口再加 .play。
   没有 JS 或关闭动效时两个类都不加，直接是终态 ── */
.armed, .armed * { animation-play-state: paused !important; }
.armed.play, .armed.play * { animation-play-state: running !important; }

/* 首屏口号：逐字从遮罩里升起 */
#hero h1 .hc { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform 0.8s var(--ease-out), opacity 0.5s ease; transition-delay: calc(var(--i) * 60ms + 150ms); }
#hero h1.in .hc { transform: none; opacity: 1; }

/* 公司：通用大模型接不上业务流程，Tévo 把它一条条接进去 */
#origin .origin-grid { max-width: 74rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.flow-map { width: 100%; height: auto; overflow: visible; }
.flow-map text { font-size: 13px; fill: var(--navy); text-anchor: middle; }
.fm-flow { stroke: rgba(26, 34, 56, 0.22); stroke-width: 1; }
.fm-node rect, .fm-model rect { fill: #f7f5ef; stroke-width: 1; }
.fm-node rect { stroke: var(--gold-deep); }
.fm-model rect { stroke: rgba(26, 34, 56, 0.4); }
.fm-try { fill: none; stroke: rgba(26, 34, 56, 0.45); stroke-width: 1.2; stroke-dasharray: 4 5; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.fm-gold { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fm-tevo circle { fill: var(--navy); }
.fm-tevo text { fill: #f2efe8; font-family: 'Cinzel', Georgia, serif; font-size: 12px; letter-spacing: 0.04em; }
.fm-tevo { transform-box: fill-box; transform-origin: center; }

.flow-map.armed .fm-node { animation: fm-rise 0.5s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms); }
.flow-map.armed .fm-node rect { animation: fm-lit 0.4s ease both; animation-delay: calc(2.3s + var(--i) * 0.15s); }
.flow-map.armed .fm-model { animation: fm-rise 0.5s var(--ease-out) 0.3s both; }
.flow-map.armed .fm-try { animation: fm-try 1.5s ease 0.6s both; }
.flow-map.armed .fm-tevo { animation: fm-pop 0.5s var(--ease-out) 1.5s both; }
.flow-map.armed .fm-trunk { animation: fm-draw 0.45s ease-in 1.6s both; }
.flow-map.armed .fm-branch { animation: fm-draw 0.6s ease-out both; animation-delay: calc(1.95s + var(--i) * 0.15s); }
@keyframes fm-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fm-lit { from { stroke: rgba(26, 34, 56, 0.35); } }
@keyframes fm-try { 0% { opacity: 1; transform: scaleY(0); } 45% { opacity: 1; transform: scaleY(1); } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fm-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes fm-draw { from { stroke-dashoffset: 1; } }

/* 底层判断：分隔线从左画到右，编号随后淡入 */
.belief { position: relative; border-top: 0; }
.belief::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.belief.armed::before { animation: line-draw 0.9s var(--ease-io) both; }
.belief.armed .belief-no { animation: fm-rise 0.5s var(--ease-out) 0.45s both; }
@keyframes line-draw { from { transform: scaleX(0); } }

/* 四层金字塔：放在三条主张之后，从塔基往上逐层搭起 */
.vmod-pyr { margin-top: 12vh; }
.pyr-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; line-height: 1.4; margin: 0 0 0.8rem; text-wrap: balance; }
.pyr-lede { font-size: 1rem; line-height: 1.9; color: var(--navy-soft); max-width: 36em; margin: 0 0 3rem; word-break: keep-all; overflow-wrap: anywhere; }
.pyr.armed .layer { animation: pyr-build 0.6s var(--ease-out) both; }
.pyr.armed .layer-1 { animation-delay: 0.1s; }
.pyr.armed .layer-2 { animation-delay: 0.4s; }
.pyr.armed .layer-3 { animation-delay: 0.7s; }
.pyr.armed .layer-4 { animation-delay: 1s; }
@keyframes pyr-build { from { opacity: 0; transform: translateY(22px) scaleX(0.9); } }

/* 前置部署三步：左侧金线从 01 画到 03，每到一步点亮一个点 */
.door-steps { position: relative; }
.door-steps::before { content: ""; position: absolute; left: -1rem; top: 1.45rem; bottom: 1.6rem; width: 1px; background: var(--gold); transform-origin: 50% 0; }
.door-steps li { position: relative; }
.door-steps li::after { content: ""; position: absolute; left: calc(-1rem - 3px); top: 1.3rem; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.door-steps.armed::before { animation: rail-draw 1.3s var(--ease-io) 0.2s both; }
.door-steps.armed li::after { animation: fm-pop 0.35s var(--ease-out) both; }
.door-steps.armed li:nth-child(1)::after { animation-delay: 0.2s; }
.door-steps.armed li:nth-child(2)::after { animation-delay: 0.75s; }
.door-steps.armed li:nth-child(3)::after { animation-delay: 1.35s; }
@keyframes rail-draw { from { transform: scaleY(0); } }

/* ── 结尾：暗场光门 ── */
#talk { padding: 0; }
#talk .talk-stage { position: relative; overflow: hidden; background: #0f0e0c; color: #f2efe8; padding: 26vh 0 22vh; isolation: isolate; }
.talk-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.9; }
#talk .talk-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, #0f0e0c 0, #0f0e0c 34%, rgba(15, 14, 12, 0.5) 52%, rgba(15, 14, 12, 0) 72%);
}
#talk .talk-stage h2 { color: #f6f3ec; }
#talk .talk-stage .pitch { color: rgba(242, 239, 232, 0.86); }
#talk .talk-stage .contact-note { color: rgba(242, 239, 232, 0.78); }
#talk .talk-stage .btn-talk { background: #e0c591; color: #1a2238; border-color: #e0c591; }
#talk .talk-stage .btn-talk:hover { background: #ead39f; }
#talk footer { margin-top: 0; border-top: 0; }

@media (min-width: 761px) {
  /* 光门让到右侧，文字压在左边的暗处 */
  .talk-video { left: 30%; width: 70%; }
}
@media (max-width: 900px) {
  #origin .origin-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .flow-map { max-width: 26rem; margin: 0 auto; }
  .door-steps::before { left: -0.7rem; }
  .door-steps li::after { left: calc(-0.7rem - 3px); }
}
@media (max-width: 760px) {
  .belief { grid-template-columns: 1fr; gap: 0.6rem; padding: 2.8rem 0; }
  .belief-no { padding-top: 0; }
  .belief h3 { font-size: 1.5rem; }
  .belief p { font-size: 1rem; }
  .hos-flow li { font-size: 0.98rem; }
  .hos-film { max-width: 22rem; margin: 0 auto; }
  #talk .talk-stage { padding: 18vh 0 16vh; }
  #talk .talk-stage::before { background: rgba(15, 14, 12, 0.72); }
  .talk-video { object-position: 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-l, .js .reveal-r { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; }
  .js h2.reveal, .js h3.reveal, .js #hero h1.reveal { clip-path: none; transform: none; transition: none; }
}