/* REDLINE 开机画面 —— 视觉语言直接取自 play.html 的加载屏：
   星球弧线 + 沿弧线排布的城市剪影 + 一道红线 + RED/LINE 徽章。
   架构遵循已验证的开机动画模式：CSS 盖子 / 动画层 / 滚动锁是三个独立的东西。 */

/* 纯 CSS 盖子：head 里的闸门脚本加上 kb-run 后立刻铺上，先于首帧，防止闪出页面。
   退出时必须「先摘 kb-run 再收虹膜」—— 否则收拢时露出来的是这块黑盖子，不是网站。 */
html.kb-run::before{content:'';position:fixed;inset:0;z-index:9998;background:#05060a}
html.kb-lock{overflow:hidden}

.kboot{
  position:fixed;inset:0;z-index:9999;overflow:hidden;display:none;
  background:radial-gradient(118% 78% at 50% 94%, #35100a 0%, #180d12 36%, #0a0a11 62%, #05060a 100%);
  color:#f4e8d6;
  font-family:'Archivo',Bahnschrift,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --kb-mark:clamp(132px,13.5vw,178px);
}
html.kb-run .kboot,.kboot.out{display:block}
/* ↑ 必须带上 .kboot.out：退场时先摘 kb-run（盖子）再收虹膜，如果可见性只挂在 kb-run 上，
     摘掉的那一瞬 .kboot 变成 display:none —— 而 display:none 的元素不跑动画，
     kbIris 永远不触发，teardown 就不执行，滚动锁会一直卡着。 */

/* SVG 必须写死 width/height 或 100%：不带宽高时它是替换元素，内在尺寸只有 300×150，
   只写 position:absolute;inset:0 是撑不开的（over-constrained 时 right/bottom 被忽略）。 */
.kb-world{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 星点 */
.kb-stars{position:absolute;inset:0;opacity:.55;
  background-image:radial-gradient(1.3px 1.3px at 12% 16%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 28% 9%,#ffe9c7 50%,transparent 51%),
    radial-gradient(1.1px 1.1px at 46% 21%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 63% 12%,#cfe3ff 50%,transparent 51%),
    radial-gradient(1.3px 1.3px at 79% 19%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 91% 8%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 71% 30%,#fff 50%,transparent 51%)}

/* 红线：星球弧线本身就是品牌线。左右半各一条，从中点向两侧「画」出去。 */
.kb-arc{fill:none;stroke:#ff4a2b;stroke-width:11;stroke-linecap:round;
  stroke-dasharray:500;stroke-dashoffset:500;
  filter:drop-shadow(0 0 20px rgba(255,74,43,.8))}
.kb-arc.r{animation:kbDraw 1.0s cubic-bezier(.22,.9,.24,1) .10s forwards}
.kb-arc.l{animation:kbDraw 1.0s cubic-bezier(.22,.9,.24,1) .10s forwards}
@keyframes kbDraw{to{stroke-dashoffset:0}}

/* 弧线亮起后的余辉脉冲 */
.kb-halo{position:absolute;left:0;right:0;bottom:0;height:46%;opacity:0;
  background:radial-gradient(60% 100% at 50% 100%, rgba(255,74,43,.30) 0%, rgba(255,74,43,0) 70%);
  animation:kbHalo 1.6s ease-out 1.0s forwards}
@keyframes kbHalo{to{opacity:1}}

/* 城市剪影：沿弧线依次点亮 */
.kb-b{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:kbUp .55s cubic-bezier(.2,.8,.25,1) forwards}
@keyframes kbUp{from{opacity:0;transform:translateY(7px) scaleY(.55)}to{opacity:1;transform:none}}
.kb-win{fill:#ffca7a;opacity:0;animation:kbWin .5s ease-out forwards}
@keyframes kbWin{to{opacity:.9}}

/* 徽章 + 标语 */
.kb-center{position:absolute;left:0;right:0;top:31%;text-align:center;padding:0 20px}
.kb-mark{display:block;width:var(--kb-mark);height:var(--kb-mark);margin:0 auto;
  opacity:0;transform:scale(.86);filter:drop-shadow(0 0 30px rgba(255,74,43,.45));
  animation:kbMark .85s cubic-bezier(.2,.85,.25,1) .55s forwards}
@keyframes kbMark{to{opacity:1;transform:none}}
.kb-tag{margin-top:20px;font-size:clamp(10px,1.05vw,13px);letter-spacing:.42em;text-transform:uppercase;
  color:#ff4a2b;opacity:0;animation:kbFade .8s ease-out 1.15s forwards}
@keyframes kbFade{to{opacity:.92}}

/* 底部：进度 + 状态词 */
.kb-foot{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);width:min(520px,84vw);
  opacity:0;animation:kbFade .7s ease-out 1.5s forwards}
.kb-row{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#d8d1c1}
.kb-row #kb-pct{color:#ff4a2b}
.kb-bar{margin-top:9px;height:3px;background:rgba(233,228,216,.13);overflow:hidden}
.kb-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff7a2c,#ff4a2b);
  box-shadow:0 0 14px #ff4a2b}

/* 颗粒（暗底上强度要克制，否则读起来像脏污） */
.kb-grain{position:absolute;inset:-50%;opacity:.05;pointer-events:none;animation:kbGrain .9s steps(4) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes kbGrain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* 退场：虹膜收拢 + 中间一道发光缝 */
.kboot.out{animation:kbIris .62s cubic-bezier(.55,0,.75,.2) forwards}
@keyframes kbIris{to{clip-path:inset(49.9% 0 49.9% 0)}}
.kb-seam{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#ff4a2b;opacity:0;
  box-shadow:0 0 26px 6px rgba(255,74,43,.9)}
.kboot.out .kb-seam{animation:kbSeam .62s ease-out forwards}
@keyframes kbSeam{from{opacity:0}45%{opacity:1}to{opacity:0}}

/* 键盘/鼠标提示可以按任意键跳过 */
.kb-skip{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#7f7d77;
  opacity:0;animation:kbFade .6s ease-out 2.0s forwards}

@media (prefers-reduced-motion:reduce){
  .kboot{display:none !important}
  html.kb-run::before{display:none}
}