/* 心宿输入法 产品页专属样式：首屏候选框、整句纠错演示、两种候选框外观（公共模板见 product.css） */

/* ---------- 首屏作品图 ---------- */
.hh-bigcand.ime-bigcand { position: relative; right: auto; top: auto; transform: none; max-width: 100%; text-align: left; }

/* ---------- 演示 1：英文补全、自动纠正、轻量 ---------- */
.ime-window { transform-origin: 50% 100%; }
.pp-js .ime-window { will-change: transform, opacity; }
.ime-window-body { padding: 32px 32px 176px; }
.ime-line { position: relative; height: 29px; }
.ime-commit { position: absolute; left: 0; top: 0; white-space: nowrap; }
/* 组字串：和 .hh-pinyin 一样写在文字里、实线下划线；打错的字母照原样显示，纠正只体现在候选上 */
.ime-typed { position: absolute; left: 0; top: 0; white-space: nowrap; text-decoration: underline 1px; text-underline-offset: 4px; }
.ime-typed span { display: inline-block; text-decoration: inherit; text-underline-offset: inherit; }
/* 光标：外层由 ime.js 写位置和显隐，内层 ::before 负责闪烁（只在场景可见时运行） */
.ime-caret { position: absolute; left: 0; top: 5px; width: 2px; height: 19px; }
.pp-js .ime-caret { will-change: transform, opacity; }
.ime-caret::before { content: ""; position: absolute; inset: 0; background: var(--text-primary); border-radius: 1px; animation: ime-blink 1.06s steps(1) infinite; animation-play-state: paused; }
.pp-scene.is-on .ime-caret::before { animation-play-state: running; }
.ime-cand { top: 125px; left: 32px; }
.ime-fixnote { position: absolute; left: 32px; top: 175px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--success-soft); color: var(--success-text); font-family: var(--font-mono); font-size: 12px; }
.ime-fixnote b { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* 有脚本时初始状态由 ime.js 每帧写入；先藏起来避免闪一下 */
.pp-js .ime-commit, .pp-js .ime-cand, .pp-js .ime-fixnote, .pp-js .ime-typed span { opacity: 0; }
.pp-js .ime-cand, .pp-js .ime-fixnote, .pp-js .ime-commit { will-change: transform, opacity; }
/* 英文补全：打出的字母后面是浅色提示，按 Tab 后实色版本淡入覆盖（只动 opacity） */
.ime-enline { height: 29px; white-space: nowrap; }
.ime-en { position: relative; display: inline-block; }
.ime-en-typed span { display: inline-block; }
.ime-en-rest { position: relative; display: inline-block; }
.ime-en-ghost { color: var(--text-tertiary); }
.ime-en-solid { position: absolute; left: 0; top: 0; }
.ime-tab { display: inline-block; margin-left: 10px; height: 20px; padding: 0 6px; box-sizing: border-box; vertical-align: 2px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); font-family: var(--font-mono); font-size: 11px; line-height: 18px; color: var(--text-secondary); }
/* 轻量：三个小指标 */
.ime-lite { position: absolute; left: 32px; bottom: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.ime-lite span { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 12px; color: var(--text-secondary); }
.ime-lite b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pp-js .ime-en-typed span, .pp-js .ime-en-ghost, .pp-js .ime-en-solid, .pp-js .ime-tab, .pp-js .ime-lite { opacity: 0; }
.pp-js .ime-en-ghost, .pp-js .ime-en-solid, .pp-js .ime-tab, .pp-js .ime-lite { will-change: transform, opacity; }
/* 左侧三项：字号放大，当前一项略大、其余略缩小 */
.pp-steps.ime-steps { margin-top: 32px; gap: 32px; }
.ime-steps .hh-cap-num { font-size: 13px; margin-bottom: 6px; }
.ime-steps .hh-cap-t { font-size: 30px; line-height: 1.25; letter-spacing: -.01em; }
.ime-steps .hh-cap-b { margin-top: 8px; max-width: 28em; font-size: 17px; line-height: 1.7; }
.pp-js .ime-steps li { transform: scale(.92); transform-origin: 0 50%; transition: transform .5s var(--pp-ease); }
.pp-js .ime-steps li.is-on { transform: none; }
@keyframes ime-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ---------- 演示 2：默认 ↔ 液态玻璃 ---------- */
.ime-look-stage { justify-content: center; background: var(--bg); }
.ime-look-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ime-look-bg i { position: absolute; width: 56vmax; height: 56vmax; border-radius: 50%; will-change: transform; }
.ime-look-bg i:nth-child(1) { left: -12vmax; top: -18vmax; background: radial-gradient(circle, rgba(56, 120, 216, .42) 0%, rgba(56, 120, 216, 0) 62%); }
.ime-look-bg i:nth-child(2) { right: -16vmax; top: 4vmax; background: radial-gradient(circle, rgba(103, 197, 106, .34) 0%, rgba(103, 197, 106, 0) 62%); }
.ime-look-bg i:nth-child(3) { left: 18vmax; bottom: -30vmax; background: radial-gradient(circle, rgba(240, 173, 78, .36) 0%, rgba(240, 173, 78, 0) 62%); }
.ime-look-inner { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 56px; text-align: center; }
.ime-look-box { position: relative; width: min(480px, 100%); height: 104px; text-align: left; }
.pp-js .ime-look-box { will-change: transform; }
/* 从候选框后面缓缓经过的色块：默认主题完全挡住，液态玻璃下透出模糊的颜色 */
.ime-look-under { position: absolute; left: -30%; right: -30%; top: 50%; height: 72px; margin-top: -36px; display: flex; justify-content: center; gap: 28px; will-change: transform; }
.ime-look-under i { flex: none; width: 112px; height: 72px; border-radius: 36px; }
.ime-look-under i:nth-child(1) { background: var(--warning); }
.ime-look-under i:nth-child(2) { background: var(--primary); }
.ime-look-under i:nth-child(3) { background: var(--success); width: 72px; }
.ime-look-under i:nth-child(4) { background: var(--danger); }
.ime-look-under i:nth-child(5) { background: var(--primary-hover); width: 72px; }
.ime-look-card.hh-bigcand { right: auto; left: 50%; transform: translate(-50%, -50%); max-width: none; }
/* 液态玻璃：输入法默认通透度 80 —— 染色很淡、只轻微模糊（饱和度 ×1.4），大而淡的环境阴影 + 小而实的接触阴影；
   选择框是一小块有色玻璃；没选中的字外面描一圈淡淡的反色光晕。边缘折射网页画不出来，用内高光示意 */
.ime-look-glass { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(255, 255, 255, .2), 0 8px 24px rgba(0, 0, 0, .13), 0 1px 3px rgba(0, 0, 0, .2);
  -webkit-backdrop-filter: blur(3px) saturate(1.4); backdrop-filter: blur(3px) saturate(1.4); }
.ime-look-glass .hh-cand-row span:not(.is-on) { text-shadow: -1px 0 rgba(255, 255, 255, .55), 1px 0 rgba(255, 255, 255, .55), 0 -1px rgba(255, 255, 255, .55), 0 1px rgba(255, 255, 255, .55); }
.ime-look-glass .hh-cand-row .is-on { background: rgba(56, 120, 216, .62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
:root[data-theme="dark"] .ime-look-glass { background: rgba(43, 47, 54, .31); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 24px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .ime-look-glass .hh-cand-row span:not(.is-on) { text-shadow: -1px 0 rgba(0, 0, 0, .3), 1px 0 rgba(0, 0, 0, .3), 0 -1px rgba(0, 0, 0, .3), 0 1px rgba(0, 0, 0, .3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ime-look-glass { background: rgba(43, 47, 54, .31); border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 24px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .45); }
  :root:not([data-theme="light"]) .ime-look-glass .hh-cand-row span:not(.is-on) { text-shadow: -1px 0 rgba(0, 0, 0, .3), 1px 0 rgba(0, 0, 0, .3), 0 -1px rgba(0, 0, 0, .3), 0 1px rgba(0, 0, 0, .3); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ime-look-glass { background: rgba(255, 255, 255, .82); } }
.pp-js .ime-look-glass, .pp-js .ime-look-float, .pp-js .ime-look-label[data-look="1"], .pp-js .ime-look-label[data-look="2"] { opacity: 0; }
.ime-look-scene { height: 320vh; }
/* 浮光（V2）：几乎不着色的玻璃，没有选中框；选中候选用深色粗字，其余为白字加柔和投影 */
.ime-look-float { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 28px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .16);
  -webkit-backdrop-filter: blur(6px) saturate(1.5); backdrop-filter: blur(6px) saturate(1.5); }
/* 浮光的外框是胶囊形：输入法里横排时圆角 = 候选框高度的一半（见 candidate_painter.cpp），不沿用默认外观的 12 圆角 */
.ime-look-card.ime-look-float { corner-shape: round; border-radius: 999px; }
.ime-look-float .hh-cand-row span { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .38); }
.ime-look-float .hh-cand-row span i { color: rgba(255, 255, 255, .8); }
.ime-look-float .hh-cand-row .is-on { background: none; box-shadow: none; color: #0A0A0A; font-weight: 600; text-shadow: 0 0 6px rgba(255, 255, 255, .6); }
.ime-look-float .hh-cand-row .is-on i { color: rgba(10, 10, 10, .7); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ime-look-float { background: rgba(120, 128, 140, .55); } }
.ime-look-labels { display: grid; }
.ime-look-label { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 4px; }
.ime-look-label b { font-size: 18px; font-weight: 600; }
.ime-look-label span { color: var(--text-secondary); }

/* ---------- 静态模式（减少动态效果）：直接给出关键画面 ---------- */
.hh-static .ime-typed span, .hh-static .ime-cand, .hh-static .ime-fixnote { opacity: 1; }
.hh-static .ime-en-typed span, .hh-static .ime-en-ghost, .hh-static .ime-tab, .hh-static .ime-lite { opacity: 1; }
.hh-static .ime-en-solid { opacity: 0; }
.hh-static .ime-steps li { transform: none; }
.hh-static .ime-caret { opacity: 0; }
.hh-static .ime-look-box { height: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hh-static .ime-look-card.hh-bigcand { position: relative; left: auto; top: auto; transform: none; opacity: 1; }
.hh-static .ime-look-under { display: none; }
.hh-static .ime-look-scene { height: auto; }
.hh-static .ime-look-labels { display: flex; gap: 48px; }
.hh-static .ime-look-label { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .ime-caret::before { animation: none; }
  .ime-steps li { transition: none; }
}

/* ---------- 移动端 ---------- */
@media (max-width: 760px) {
  .hh-bigcand.ime-bigcand { --k: 1.125; }
  .hh-bigcand.ime-bigcand .hh-cand-row span:nth-child(n+6) { display: none; }
  .ime-window-body { padding: 20px 16px 196px; font-size: 15px; }
  .ime-cand { left: 16px; top: 107px; }
  .ime-cand .hh-cand-row span:nth-child(n+4) { display: none; }
  .ime-fixnote { left: 16px; top: 155px; }
  .ime-lite { left: 16px; bottom: 20px; }
  .ime-steps .hh-cap-t { font-size: 20px; }
  .pp-steps.ime-steps { margin-top: 20px; gap: 14px; }
  .ime-look-inner { gap: 40px; }
  .ime-look-card.hh-bigcand { --k: 1.25; }
  .ime-look-under i { width: 80px; height: 56px; }
  .ime-look-under { height: 56px; margin-top: -28px; gap: 20px; }
}