/* ===================================================================== boot.css — AMORA 开机动画「她醒了」/ waking sequence --------------------------------------------------------------------- 闸门 html.kb-run —— 由各页 内联脚本在首帧前加，盖子由 .kboot 承担 锁滚动 html.kb-lock —— 与 kb-run 分开：退出时先解锁，再收虹膜 驱动 /boot.js —— ?boot=1 / #boot 强制重播，?boot=0 关闭 变量全部定义在 .kboot 作用域内，不依赖页面上的任何 CSS 变量， 避免共用变量未定义时整条 background 失效（覆盖层变透明）。 ===================================================================== */ .kboot { display: none; } html.kb-run .kboot { --kb-gold: #f8b94e; --kb-rose: #ff4f84; --kb-ink: #fff4e8; --kb-dim: rgba(255, 244, 232, 0.62); --kb-dimmer: rgba(255, 244, 232, 0.36); --kb-line: rgba(255, 244, 232, 0.13); --kb-beat: 0; /* 0..1 心跳强度，由 JS 每帧写 */ --kb-seam: 0; /* 0..1 眼睛开合缝隙亮度 */ display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; position: fixed; inset: 0; z-index: 400; overflow: hidden; background: radial-gradient(900px 620px at 50% 40%, #170a12 0%, #0a0510 45%, #060307 72%); color: var(--kb-ink); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; will-change: clip-path; } html.kb-lock { overflow: hidden; } /* 暗底噪点：密度低一点，别让它看起来像脏污 */ html.kb-run .kboot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml;utf8,"); } /* ---------- 随心跳呼吸的光 ---------- */ .kb-glow { position: absolute; inset: -10%; pointer-events: none; opacity: calc(0.42 + var(--kb-beat) * 0.5); background: radial-gradient(closest-side, rgba(248, 185, 78, 0.22), transparent 70%) 50% 40% / 62% 62% no-repeat, radial-gradient(closest-side, rgba(255, 79, 132, 0.18), transparent 70%) 50% 52% / 54% 54% no-repeat; filter: blur(6px); } .kb-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* ---------- 中央舞台 ---------- */ .kb-stage { position: relative; display: grid; justify-items: center; align-self: center; gap: clamp(20px, 3.4vh, 34px); padding: 0 24px; text-align: center; } /* 虹膜：从一条缝开始，上下张开（她睁开眼） */ .kb-iris { position: relative; width: clamp(168px, 22vh, 232px); aspect-ratio: 1; clip-path: inset(50% 0 50% 0); transition: clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1); } .kb-iris.kb-open { clip-path: inset(0 0 0 0); } /* 开合瞬间的那道缝：亮一条线再消失，眼睛的感觉全靠它 */ .kb-seam { position: absolute; left: -38%; right: -38%; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; opacity: var(--kb-seam); background: linear-gradient(90deg, transparent, var(--kb-gold) 18%, #fff4c6 50%, var(--kb-rose) 82%, transparent); box-shadow: 0 0 22px 2px rgba(248, 185, 78, 0.45), 0 0 42px 6px rgba(255, 79, 132, 0.22); } .kb-mark { position: absolute; inset: 0; display: grid; place-items: center; } .kb-mark svg { width: 100%; height: 100%; overflow: visible; transform: scale(calc(0.94 + var(--kb-beat) * 0.06)); transform-origin: 50% 52%; filter: drop-shadow(0 0 calc(14px + var(--kb-beat) * 26px) rgba(255, 79, 132, 0.4)); } /* 心跳扩散环 */ .kb-ring { position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(248, 185, 78, 0.5); opacity: 0; transform: scale(0.72); } .kb-ring.kb-go { animation: kb-ring 1400ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } .kb-ring:nth-of-type(2) { border-color: rgba(255, 79, 132, 0.45); } @keyframes kb-ring { 0% { opacity: 0.75; transform: scale(0.72); } 70% { opacity: 0.22; } 100% { opacity: 0; transform: scale(1.9); } } /* 轨道环描边（和 logo 同一个圆） */ .kb-orbit { stroke-dasharray: 1080; stroke-dashoffset: 1080; transition: stroke-dashoffset 900ms cubic-bezier(0.33, 1, 0.68, 1); } .kb-iris.kb-open .kb-orbit { stroke-dashoffset: 0; } /* ---------- 品牌字 ---------- */ .kb-word { display: flex; gap: 0.14em; font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: clamp(34px, 6.4vh, 62px); font-weight: 400; letter-spacing: 0.1em; line-height: 1; text-indent: 0.1em; background: linear-gradient(100deg, #fff4c6, var(--kb-gold) 42%, #ff6b4d 72%, var(--kb-rose)); -webkit-background-clip: text; background-clip: text; color: transparent; } .kb-word i { display: block; opacity: 0; transform: translateY(0.42em) scale(0.96); filter: blur(6px); transition: opacity 520ms ease, transform 720ms cubic-bezier(0.16, 1, 0.3, 1), filter 620ms ease; } .kb-word.kb-go i { opacity: 1; transform: none; filter: none; } .kb-status { display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kb-dim); min-height: 16px; } .kb-status b { font-weight: 800; color: var(--kb-ink); } .kb-status .kb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kb-rose); box-shadow: 0 0 10px rgba(255, 79, 132, 0.8); opacity: calc(0.45 + var(--kb-beat) * 0.55); } .kb-status u { text-decoration: none; color: var(--kb-dimmer); font-weight: 700; } /* ---------- 底部：进度 + 角标 ---------- */ .kb-foot { position: relative; width: min(560px, calc(100vw - 48px)); margin-bottom: clamp(22px, 5vh, 54px); display: grid; gap: 10px; justify-items: center; } .kb-meter { width: 100%; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 244, 232, 0.12); } .kb-meter i { display: block; width: 0%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--kb-gold), var(--kb-rose)); box-shadow: 0 0 12px rgba(255, 79, 132, 0.6); } .kb-skip { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kb-dimmer); } .kb-skip kbd { font: inherit; padding: 2px 7px; border: 1px solid var(--kb-line); border-radius: 6px; color: var(--kb-dim); } .kb-tag { position: absolute; left: clamp(16px, 2.4vw, 34px); bottom: clamp(16px, 3vh, 30px); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kb-dimmer); } /* ---------- 退场：虹膜收拢 + 缝线 ---------- */ .kboot.kb-up { clip-path: inset(49.9% 0 49.9% 0); transition: clip-path 760ms cubic-bezier(0.7, 0, 0.3, 1); } .kboot.kb-up .kb-glow, .kboot.kb-up .kb-cv, .kboot.kb-up .kb-stage, .kboot.kb-up .kb-foot, .kboot.kb-up .kb-tag { opacity: 0; transition: opacity 260ms ease; } /* 收拢过程中露出的那道亮缝 */ .kb-close { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--kb-gold) 16%, #fff4c6 50%, var(--kb-rose) 84%, transparent); } .kboot.kb-up .kb-close { opacity: 1; box-shadow: 0 0 20px 1px rgba(248, 185, 78, 0.5); transition: opacity 300ms ease; } /* ---------- 窄屏 ---------- */ @media (max-width: 560px) { .kb-iris { width: clamp(140px, 26vh, 190px); } .kb-word { font-size: clamp(30px, 6vh, 44px); letter-spacing: 0.08em; } /* 窄屏放弃副标题：它会折成两行，把主状态挤散 */ .kb-status u { display: none; } .kb-status { font-size: 11px; letter-spacing: 0.16em; } .kb-skip { display: none; } .kb-tag { display: none; } .kb-foot { width: calc(100vw - 56px); margin-bottom: 34px; } } @media (prefers-reduced-motion: reduce) { /* 闸门本来就会跳过；这里只是兜底 */ .kboot { display: none !important; } }