/* 首屏：上半是大标题，下半是弹珠碗舞台（canvas + 角色 DOM 层叠在一起） */
/* 验证需要出现交互框时，文案区自然增高；舞台始终保留完整高度，不裁掉碗底。 */
.hero { position: relative; height: auto; min-height: max(700px, 100svh); display: flex; flex-direction: column; justify-content: center; padding: 64px 0 8px; overflow: hidden; isolation: isolate; }
/* 静态签名色晕：圆心落在碗底；顶部一层极淡的纸张渐变。放在伪元素上，入夜时跟着底色一起淡掉，不留矩形边 */
.hero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1000px 440px at 50% 104%, rgba(244,185,143,.20), rgba(233,198,217,.12) 38%, rgba(166,203,242,.08) 58%, transparent 76%),
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 60%);
}
.hero__copy { position: relative; z-index: 2; flex: none; text-align: center; padding: clamp(24px, 4svh, 72px) var(--pad-x) 0; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.2vh, 20px); }

.hero__title { font-size: clamp(40px, min(5.8vw, 8.6vh), 112px); line-height: 0.98; letter-spacing: -0.052em; font-weight: 660; font-variation-settings: 'wght' 660; }
html[lang='zh-CN'] .hero__title { font-size: clamp(34px, min(5vw, 7.4vh), 96px); line-height: 1.12; font-weight: 640; }
/* 每行一个遮罩，文字从遮罩下方升起（逐行错峰） */
.hero__title .line { display: block; overflow: hidden; padding: 0.04em 0.06em 0.1em; margin: -0.04em -0.06em -0.1em; }
.line__in { display: inline-block; }
.line--accent .line__in { background: linear-gradient(100deg, #E8875A 0%, #D67C9E 38%, #9A7BE0 66%, #4F8BE0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { max-width: 31em; font-size: clamp(16px, 1.35vw, 24px); line-height: 1.55; color: var(--text-2); letter-spacing: -0.008em; }
.hero__signup { width: min(440px, 100%); margin-top: 6px; }
/* 标题上方的一行小字：不用「内测 / Beta」胶囊和呼吸圆点那套通用写法，换成自己的语言——
   三颗弹珠挨着落进来（开场时一颗接一颗掉下、轻轻一弹），旁边一句「第一罐弹珠，正在装」，意思是名单正在收人 */
.badge { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 480; color: var(--text-2); letter-spacing: -0.005em; white-space: nowrap; }
.badge__jar { display: inline-flex; padding-top: 1px; }
.badge__jar .mb { --s: 12px; position: relative; }
.badge__jar .mb + .mb { margin-left: -3px; }
.is-ready .badge__jar .mb { animation: badge-drop 760ms var(--ease-bounce) both; }
.is-ready .badge__jar .mb:nth-child(2) { animation-delay: 140ms; }
.is-ready .badge__jar .mb:nth-child(3) { animation-delay: 280ms; }
@keyframes badge-drop { from { transform: translateY(-12px); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .is-ready .badge__jar .mb { animation: none; } }
.hero__copy .badge { margin-bottom: clamp(0px, 0.6vh, 6px); }
/* 闪光笔是彩蛋，不和等候名单抢主次：一行安静的文字按钮，触控高度仍够 44px */
.hero__actions { display: flex; align-items: center; justify-content: center; margin-top: -6px; }
.pen-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: none; color: var(--text-3); font-size: 13.5px; font-weight: 480; cursor: pointer; transition: color 200ms; }
.pen-link .btn__pen { width: 17px; height: 4px; }
.pen-link:hover { color: var(--text-1); }
.pen-link:hover span:last-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* 入场编排：标题 → 副标 → 等候名单，间隔 90ms。 */
.intro, .line__in { opacity: 0; }
.intro { transform: translateY(14px); }
.line__in { transform: translateY(105%) rotate(2deg); transform-origin: 0 100%; }
.is-ready .intro { animation: intro-up 1000ms var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 80ms); }
.is-ready .line__in { animation: line-up 1100ms var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 80ms); }
@keyframes intro-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes line-up { from { opacity: 0; transform: translateY(105%) rotate(2deg); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }

/* 大屏把标题与完整舞台作为一组居中，不能让满屏宽的碗把角色稀释到两端。 */
.hero__stage { position: relative; flex: none; width: min(1680px, 100%); height: clamp(270px, 34svh, 520px); min-height: 270px; margin: 12px auto 0; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.hero__bots { position: absolute; inset: 0; pointer-events: none; }
/* 命中区只在角色身体上：方形盒子里身体以外的空白、随身弹珠、气泡都让给画布，点下去照样出弹珠 */
.hero__bots .bot { pointer-events: none; }
.hero__bots .bot svg { pointer-events: none; }
.hero__bots .bot .b-body { pointer-events: visiblePainted; cursor: pointer; }
/* 「Mibs 留了备份」送回去的那颗：带一圈柔光，和碗里普通的弹珠区分开 */
.hero__fly { left: 0; top: 0; z-index: 5; pointer-events: none; will-change: transform;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.55), 0 0 16px 2px rgba(255,255,255,.75), 0 6px 10px -4px rgba(20,18,15,.3); }
/* 舞台整体在标题之后淡入，角色从下方升起一点 */
.hero__bots { opacity: 0; transform: translateY(18px); }
.is-ready .hero__bots { animation: intro-up 1200ms var(--ease-out) 420ms both; }

/* 计数：碗底的一行「刻字」——没有底板、没有描边，左右两根细线把它嵌进场景 */
.kept { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--text-3); white-space: nowrap; pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.kept::before, .kept::after { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong)); }
.kept::after { transform: scaleX(-1); }
.kept__label { text-transform: lowercase; }
.kept__odo { display: inline-flex; color: var(--text-1); font-weight: 520; font-variant-numeric: tabular-nums; height: 1.25em; line-height: 1.25em; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); mask: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); }
.odo__d { display: block; width: 1ch; height: 1.25em; overflow: hidden; }
.odo__d.is-lead { color: var(--text-3); opacity: .45; }
.odo__s { display: flex; flex-direction: column; transition: transform 900ms var(--ease-spring); will-change: transform; }
.odo__s > span { height: 1.25em; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 提示：页边批注的语气。位置由 JS 算到某位彩色 agent 的头顶左上方 */
.hint { position: absolute; left: 0; top: 0; margin: 0; display: flex; align-items: flex-start; gap: 2px; pointer-events: none; opacity: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--text-3); white-space: nowrap; transition: opacity 600ms var(--ease-out); }
.hint__t { transform: rotate(-3deg); transform-origin: 100% 50%; padding-top: 0; }
.hint__arrow { width: 46px; height: 32px; margin-top: 6px; overflow: visible; }
.hint__path, .hint__head { stroke: var(--text-3); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.hint__path { stroke-dasharray: 70; stroke-dashoffset: 70; }
.hint__head { stroke-dasharray: 20; stroke-dashoffset: 20; }
.hint.is-on { opacity: 1; }
.hint.is-on .hint__path { transition: stroke-dashoffset 900ms var(--ease-in-out) 250ms; stroke-dashoffset: 0; }
.hint.is-on .hint__head { transition: stroke-dashoffset 300ms var(--ease-out) 1050ms; stroke-dashoffset: 0; }
.hint.is-off { opacity: 0; transition-duration: 400ms; }
.hint--flip { flex-direction: row-reverse; }
.hint--flip .hint__arrow { transform: scaleX(-1); }
.hint--flip .hint__t { transform: rotate(3deg); transform-origin: 0 50%; }

@media (max-width: 720px) {
  .hint { display: none; }
  .hero { height: auto; min-height: 100svh; max-height: none; }
  .hero__copy { padding-top: 36px; }
  .hero__stage { flex: none; height: 44svh; min-height: 300px; }
  .btn { height: 48px; font-size: 14.5px; }
}