/* 十七 · 登录页开场动画（0.16.0）：印章落款 → 无限画布空间 → 镜头拉远成画布 → 标志与标语落到页面上。 html.intro-on：页面元素先藏起来等入场；html.intro-overlay：显示开场层。由 intro-boot.js 在 里决定。 */ html.intro-on, html.intro-on body { overflow: hidden; } html.intro-on .auth-shell .brand, html.intro-on .auth-shell .brand-tag { visibility: hidden; } html.intro-on .aside-copy > *, html.intro-on .flow > *, html.intro-on .aside-points li, html.intro-on .aside-foot, html.intro-on #authCard { opacity: 0; } #intro { display: none; position: fixed; inset: 0; z-index: 50; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; } html.intro-overlay #intro { display: block; } .intro-bg { position: absolute; inset: 0; background: var(--bg); } .intro-world { position: absolute; inset: 0; transform-origin: 50% 50%; } .intro-grid { position: absolute; inset: -170%; background-image: radial-gradient(circle, #d3cfc6 2.6px, transparent 3.1px); background-size: 56px 56px; background-position: center; } /* 品牌（按真实尺寸的 K 倍绘制，拉远到 1/K 时与页面上的品牌像素级重合） */ .intro-brand-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .intro-brand { --k: 2.8235; position: relative; display: flex; flex-direction: column; align-items: center; } .intro-row { position: relative; display: inline-flex; align-items: center; gap: calc(11px * var(--k)); } .intro-tag { position: relative; margin-top: calc(9px * var(--k)); font-size: calc(var(--tag-size) * var(--k)); white-space: nowrap; } html:not(.tag-seal) .intro-tag { padding-left: var(--tag-ls); } /* 抵消末字字距，视觉居中 */ .intro-tag .tg { display: inline-flex; align-items: center; font: 400 calc(var(--tag-size) * var(--k))/1 var(--tag-font); letter-spacing: var(--tag-ls); color: var(--tag-color); /* 边框用内阴影画：边框宽度会被取整，放大 K 倍后再缩回会差半像素 */ box-shadow: inset 0 0 0 calc(var(--tag-bw) * var(--k)) var(--tag-bc); border-radius: calc(var(--tag-radius) * var(--k)); background: var(--tag-bg); padding: calc((var(--tag-py) + var(--tag-bw)) * var(--k)) calc((var(--tag-pr) + var(--tag-bw)) * var(--k)) calc((var(--tag-py) + var(--tag-bw)) * var(--k)) calc((var(--tag-pl) + var(--tag-bw)) * var(--k)); } .intro-tag .tg span { display: inline-block; opacity: 0; } .intro-tag .tg i { display: var(--tag-dot); flex: none; width: calc(5px * var(--k)); height: calc(5px * var(--k)); margin-right: calc(9px * var(--k)); border-radius: 50%; background: var(--accent); opacity: 0; } .intro-frame { position: absolute; inset: calc(-12px * var(--k)) calc(-14px * var(--k)); border-radius: calc(14px * var(--k)); background: #fff; border: calc(1px * var(--k)) solid var(--line); box-shadow: 0 calc(1px * var(--k)) calc(2px * var(--k)) #18181b0a, 0 calc(10px * var(--k)) calc(28px * var(--k)) calc(-18px * var(--k)) #18181b55; opacity: 0; } .intro-frame i { position: absolute; top: 50%; width: calc(7px * var(--k)); height: calc(7px * var(--k)); margin-top: calc(-3.5px * var(--k)); border-radius: 50%; background: #fff; border: calc(1.2px * var(--k)) solid #b9b5ad; } .intro-frame i:first-child { left: calc(-3.5px * var(--k)); } .intro-frame i:last-child { right: calc(-3.5px * var(--k)); } .intro-frame.v i { top: auto; left: 50%; margin: 0 0 0 calc(-3.5px * var(--k)); } .intro-frame.v i:first-child { top: calc(-3.5px * var(--k)); } .intro-frame.v i:last-child { right: auto; bottom: calc(-3.5px * var(--k)); } .intro-slot { position: relative; display: block; width: calc(34px * var(--k)); height: calc(34px * var(--k)); flex: none; } .intro-bloom { position: absolute; inset: calc(-10px * var(--k)); border-radius: 50%; background: radial-gradient(closest-side, #18181b40, #18181b14 60%, transparent); opacity: 0; } .intro-mark { position: absolute; inset: 0; display: grid; place-items: center; border-radius: calc(10px * var(--k)); background: var(--ink); color: #fff; font: 600 calc(14px * var(--k))/1 var(--serif); letter-spacing: .02em; opacity: 0; } .intro-dot { position: absolute; top: calc(5px * var(--k)); right: calc(5px * var(--k)); width: calc(6px * var(--k)); height: calc(6px * var(--k)); border-radius: 50%; background: var(--accent); opacity: 0; } .intro-ripple { position: absolute; inset: 0; border-radius: 50%; border: calc(1px * var(--k)) solid var(--accent); opacity: 0; } .intro-word { font: 600 calc(20px * var(--k))/1 var(--serif); letter-spacing: .12em; color: var(--ink); white-space: nowrap; } .intro-word span { display: inline-block; opacity: 0; } /* 画布节点（按最终屏幕尺寸绘制，外层缩放） */ .intro-nodes { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: scale(var(--nk, 2.8)); } .intro-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; } .intro-edges path { fill: none; stroke: #c4c0b7; stroke-width: 1.5; stroke-linecap: round; } .intro-edges path.accent { stroke: #e2a58f; } .intro-edges path.streak { stroke: var(--accent); stroke-width: 2.4; opacity: 0; } .intro-edges circle { fill: #fff; stroke: #b9b5ad; stroke-width: 1.2; opacity: 0; } .nd { position: absolute; display: flex; flex-direction: column; padding: 6px; opacity: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px #18181b0a, 0 10px 28px -18px #18181b55; font-size: 11px; color: var(--ink-2); line-height: 1.5; } .nd-head { display: flex; align-items: center; gap: 6px; height: 18px; padding: 0 2px 4px; font-weight: 600; white-space: nowrap; } .nd-head svg { width: 13px; height: 13px; flex: none; color: var(--muted); } .nd-head .aa { font: 600 10px/1 var(--serif); color: var(--muted); } .nd-head small { margin-left: auto; font-weight: 400; color: var(--faint); font-size: 10px; } .nd-body { position: relative; flex: 1; min-height: 0; border-radius: 8px; overflow: hidden; } .nd-img.warm .nd-body { background: radial-gradient(38px 38px at 72% 30%, #fff6e8 0, #fff6e800 70%), linear-gradient(170deg, #efdcca 0%, #d7b597 48%, #8f735f 100%); } .nd-img.cool .nd-body { background: radial-gradient(30px 30px at 26% 34%, #f5f7fa 0, #f5f7fa00 70%), linear-gradient(170deg, #e2e7ec 0%, #a9b5c3 52%, #66748a 100%); } .nd-img.dusk .nd-body { background: radial-gradient(34px 34px at 60% 58%, #ffd9b8 0, #ffd9b800 70%), linear-gradient(180deg, #caa9b4 0%, #e3a887 55%, #6e5566 100%); } .nd-img .nd-body::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 60%; border-radius: 50% 50% 0 0; background: #18181b22; } .nd-aud .nd-body { display: flex; align-items: center; gap: 2px; padding: 0 4px; background: #f6f5f2; } .nd-aud .nd-body i { flex: 1; border-radius: 2px; background: #a9a39a; } .nd-prm .nd-body { padding: 2px 3px; color: var(--ink-2); font-size: 11.5px; line-height: 1.6; } .nd-prm em { font-style: normal; color: var(--accent-ink); background: var(--accent-soft); border-radius: 4px; padding: 0 3px; } .nd-vid { border-color: #efc7b8; } .nd-vid .nd-body { background: #2a2320; display: grid; place-items: center; } .nd-shot { position: absolute; inset: 0; background: radial-gradient(60px 50px at 70% 35%, #ffcfa9aa 0, transparent 70%), linear-gradient(165deg, #6b5446 0%, #3a2e28 60%, #231d1a 100%); filter: blur(7px) saturate(.6); transform: scale(1.12); } .nd-shim { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, #ffffff2e 50%, transparent 70%); transform: translateX(-100%); } .nd-prm.typing .ch { opacity: 0; } .nd-play { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px -6px #d4502a; opacity: 0; } .nd-play svg { width: 14px; height: 14px; margin-left: 2px; } .nd-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); } .intro-ctrl { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2; display: flex; gap: 8px; } .intro-ctrl button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: #18181b0d; color: var(--muted); font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; } .intro-ctrl button:hover { background: #18181b17; color: var(--ink-2); } .intro-ctrl button[hidden] { display: none; } .intro-sound svg { width: 14px; height: 14px; } .intro-sound b { font-weight: 500; } .intro-sound .on { display: none; } .intro-sound[data-state="on"] .on { display: block; } .intro-sound[data-state="on"] .off { display: none; } .intro-sound[data-state="blocked"] { background: var(--accent-soft); color: var(--accent-ink); }