/* kernelvibe 首页标志（2026-10-20）。
   主标志 A：K 形提交图（点内核有彩蛋）；小图标 B：内核轨道（「用 AI 工具写代码」标题旁）；C：克拉尼芯片（「能做什么」标题旁）。
   规矩：动画只写在下面的 no-preference 块里，都带 .kv-home.kv-anim:not(.kv-still)——有脚本（kv-anim）且没按暂停才动；
   入场只播一次（.kv-intro-done 后不再重画）；常驻动画转约半分钟就停在静止帧（按钮变「重新播放」，点标志也能再来一轮）；
   滚出屏幕暂停（.kv-paused）。各状态类的意思见 kv-emblem.js 开头。改了这里要给 home.tmpl 里的 ?v= 换号。 */
.kv-home { --kv-emblem:1; }   /* 给 kv-emblem.js 看的：样式表生效了才露按钮、才让动起来 */
.kv-home .kv-emblem-wrap { display:flex; justify-content:center; margin:0 0 .6rem; }
.kv-stage { --rx:0deg; --ry:0deg; --mx:50%; --my:50%; position:relative; width:176px; aspect-ratio:1; display:grid; place-items:center; isolation:isolate;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.kv-stage > svg { overflow:visible; width:100%; height:auto; }
.kv-aura { position:absolute; inset:-30%; z-index:-2; pointer-events:none; opacity:.5;
  background:
    radial-gradient(closest-side, color-mix(in oklab, var(--color-orange) 70%, transparent), transparent) 28% 32% / 62% 62% no-repeat,
    radial-gradient(closest-side, color-mix(in oklab, var(--color-purple) 65%, transparent), transparent) 72% 68% / 58% 58% no-repeat,
    radial-gradient(closest-side, color-mix(in oklab, var(--color-primary) 55%, transparent), transparent) 62% 24% / 46% 46% no-repeat; }
.kv-grain { position:absolute; inset:-12%; z-index:-1; pointer-events:none; opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask:radial-gradient(closest-side,#000,transparent); mask:radial-gradient(closest-side,#000,transparent); }
.kv-spot { position:absolute; inset:-6%; z-index:3; pointer-events:none; opacity:0; transition:opacity .4s; border-radius:50%;
  background:radial-gradient(150px circle at var(--mx) var(--my), color-mix(in oklab, var(--color-text) 14%, transparent), transparent 70%); }

/* 暂停 / 播放 / 重新播放按钮：模板里默认 hidden，脚本确认不需要「减少动态效果」后才显示；名字随状态换，不用 aria-pressed */
.kv-motion { position:absolute; right:-10px; bottom:0; z-index:4; width:26px; height:26px; padding:0; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--color-secondary); background:var(--color-body); color:var(--color-text-light); cursor:pointer; }
.kv-motion[hidden] { display:none; }
.kv-motion svg { display:none; width:12px; height:12px; fill:currentColor; }
.kv-motion:hover, .kv-motion:focus-visible { color:var(--color-text); border-color:var(--color-text-light-2); }
.kv-motion:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.kv-home:not(.kv-still):not(.kv-rested) .kv-motion .kv-i-pause, .kv-home.kv-still .kv-motion .kv-i-play,
.kv-home.kv-rested:not(.kv-still) .kv-motion .kv-i-replay { display:block; }

/* A · K 形提交图（主标志） */
.kv-k .rail { fill:none; stroke:var(--color-secondary); stroke-width:12; stroke-linecap:round; stroke-linejoin:round; }
.kv-k .line { fill:none; stroke:var(--color-text); stroke-width:4; stroke-linecap:round; }
.kv-k .line.ai, .kv-k .node.ai { stroke:var(--color-purple); }
.kv-k .line.hu, .kv-k .node.hu { stroke:var(--color-primary); }
.kv-k .flow { opacity:0; }
.kv-k .flow path { fill:none; stroke:var(--color-orange); stroke-width:4.5; stroke-linecap:round; }
.kv-k .node { fill:var(--color-body); stroke:var(--color-text); stroke-width:3.5; }
.kv-k stop { stop-color:var(--color-orange); }
.kv-k .glow { opacity:.3; }
.kv-k .core { fill:var(--color-orange); transform-box:fill-box; transform-origin:center; }
.kv-k .pop { transform-box:fill-box; transform-origin:center; }
.kv-k .shock { fill:none; stroke:var(--color-orange); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; }
.kv-k .burst circle { opacity:0; transform-origin:38px 66px; }
.kv-k .burst circle:nth-child(4n+1) { fill:var(--color-orange); } .kv-k .burst circle:nth-child(4n+2) { fill:var(--color-purple); }
.kv-k .burst circle:nth-child(4n+3) { fill:var(--color-primary); } .kv-k .burst circle:nth-child(4n) { fill:var(--color-green); }

/* B · 内核轨道（小图标；转动的部件拆成单独的层，只转外层） */
.kv-mini { position:relative; display:inline-block; flex:none; width:48px; height:48px; vertical-align:middle; }
.kv-mini svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.kv-ring { perspective:260px; }
.kv-ring .tilt { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.kv-ring .orbits circle { fill:none; stroke:var(--color-text-light-2); stroke-width:3; opacity:.6; }
.kv-ring .orbits .dash { stroke-dasharray:4 9; }
.kv-ring .sat circle { stroke:var(--color-body); stroke-width:3; }
.kv-ring .s1 circle { fill:var(--color-primary); } .kv-ring .s2 circle { fill:var(--color-purple); } .kv-ring .s3 circle { fill:var(--color-green); }
.kv-ring .core { fill:var(--color-orange); }
.kv-ring .flash { fill:var(--color-orange); opacity:0; transform-box:fill-box; transform-origin:center; }

/* C · 克拉尼芯片（小图标；沙粒位置写死在模板里，不用脚本） */
.kv-chl .pins { stroke:var(--color-text-light-2); stroke-width:4; stroke-linecap:round; }
.kv-chl .plate { fill:var(--color-box-body); stroke:var(--color-text); stroke-width:4; }
.kv-chl .nodal { fill:none; stroke:var(--color-orange); stroke-width:2; opacity:.4; }
.kv-chl .sand circle { fill:var(--color-orange); }

.kv-home .kv-h2-icon { display:flex; align-items:center; gap:.6rem; }
.kv-home .kv-h2-icon .kv-mini { margin:-6px 0; }
.kv-home .kv-public-head:has(.kv-h2-icon) { align-items:center; }

/* 以下是全部动态效果。重来一轮时脚本给舞台 / 小图标加一下 .kv-reset 让动画重新起跑 */
@media (prefers-reduced-motion:no-preference) {
  .kv-home.kv-anim:not(.kv-still) .kv-stage { cursor:pointer; transform:perspective(700px) rotateX(var(--ry)) rotateY(var(--rx)); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
  .kv-home.kv-anim:not(.kv-still) .kv-stage.kv-live { transition:transform .08s linear; }
  .kv-home.kv-anim:not(.kv-still) .kv-aura { animation:kv-drift 16s ease-in-out 2 alternate; }
  .kv-home.kv-anim:not(.kv-still):not(.kv-intro-done) .kv-draw { stroke-dasharray:1; stroke-dashoffset:1; animation:kv-draw 1.4s cubic-bezier(.6,.1,.2,1) calc(var(--d,0) * 120ms) forwards; }
  .kv-home.kv-anim:not(.kv-still):not(.kv-intro-done) .kv-fade { opacity:0; animation:kv-fade .6s ease-out calc(1.1s + var(--d,0) * 120ms) forwards; }
  .kv-home.kv-anim:not(.kv-still) .kv-k .flow { opacity:1; }
  .kv-home.kv-anim:not(.kv-still) .kv-k .flow path { stroke-dasharray:.14 1.2; stroke-dashoffset:.2; animation:kv-flow 2.6s linear calc(1.6s + var(--f,0s)) 8; }
  .kv-home.kv-anim:not(.kv-still) .kv-k .node { animation:kv-ign 2.6s ease-out calc(2.4s + var(--i) * .25s) 8; }
  .kv-home.kv-anim:not(.kv-still) .kv-k .core { animation:kv-beat 2.6s ease-out 1.8s 8; }
  .kv-home.kv-anim:not(.kv-still) .kv-k .glow { animation:kv-glow 2.6s ease-out 1.8s 8; }
  .kv-home.kv-anim:not(.kv-still) .kv-k.kv-pop .shock { animation:kv-shock .9s cubic-bezier(.1,.7,.2,1); }
  .kv-home.kv-anim:not(.kv-still) .kv-k.kv-pop .burst circle { animation:kv-burst 1s cubic-bezier(.15,.75,.25,1); }
  .kv-home.kv-anim:not(.kv-still) .kv-k.kv-pop .pop { animation:kv-pop .6s ease-out; }
  .kv-home.kv-anim:not(.kv-still) .kv-ring .sat { animation:kv-orbit var(--t) linear var(--n,1); }
  .kv-home.kv-anim:not(.kv-still) .kv-ring .s2 { animation-direction:reverse; }
  .kv-home.kv-anim:not(.kv-still) .kv-ring .flash { animation:kv-sync 18s ease-out 2; }
  .kv-home.kv-anim:not(.kv-still) .kv-chl .sand circle { animation:kv-settle 6s cubic-bezier(.2,.7,.2,1) calc(1s + var(--i) * 15ms) 4 both; }
  .kv-home.kv-anim:not(.kv-still) .kv-chl .shake { animation:kv-shake 6s linear 1s 4; }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .kv-home.kv-anim:not(.kv-still) .kv-stage:hover .kv-spot { opacity:1; }
  .kv-home.kv-anim:not(.kv-still) .kv-ring:hover .tilt { transform:rotateX(60deg) rotateZ(-22deg); }
}
@media (prefers-reduced-motion:reduce) { .kv-motion { display:none; } }
.kv-reset, .kv-reset * { animation:none !important; }
.kv-paused, .kv-paused * { animation-play-state:paused !important; }
@keyframes kv-drift { to { transform:translate(4%,-3%) rotate(14deg) scale(1.06); } }
@keyframes kv-draw { to { stroke-dashoffset:0; } }
@keyframes kv-fade { to { opacity:1; } }
@keyframes kv-flow { 0% { stroke-dashoffset:.2 } 70%,100% { stroke-dashoffset:-1.05 } }
@keyframes kv-ign { 0%,100% { fill:var(--color-body) } 10% { fill:var(--color-orange) } 35% { fill:var(--color-body) } }
@keyframes kv-beat { 0%,100% { transform:scale(1) } 8% { transform:scale(1.35) } 20% { transform:scale(.95) } 30% { transform:scale(1.12) } 50% { transform:scale(1) } }
@keyframes kv-glow { 0%,100% { opacity:.3 } 10% { opacity:.75 } 50% { opacity:.3 } }
@keyframes kv-shock { 0% { opacity:.9; transform:scale(1) } 100% { opacity:0; transform:scale(4.2) } }
@keyframes kv-burst { 0% { opacity:1; transform:rotate(var(--a)) translateX(0) scale(1.3) } 55% { opacity:1 } 100% { opacity:0; transform:rotate(var(--a)) translateX(var(--r,40px)) scale(.4) } }
@keyframes kv-pop { 0% { transform:scale(1) } 25% { transform:scale(1.6) } 60% { transform:scale(.9) } 100% { transform:scale(1) } }
@keyframes kv-orbit { to { transform:rotate(1turn) } }
@keyframes kv-sync { 0% { opacity:.85; transform:scale(3) } 7%,100% { opacity:0; transform:scale(1) } }
@keyframes kv-settle { 0% { transform:none; opacity:1 } 12% { transform:translate(var(--dx),var(--dy)); opacity:.15 } 50%,100% { transform:none; opacity:1 } }
@keyframes kv-shake { 0%,2%,6%,10%,14%,18% { transform:translate(2px,-1.4px) } 4%,8%,12%,16%,20% { transform:translate(-2px,1.4px) } 22%,100% { transform:none } }
@media (prefers-contrast:more), (forced-colors:active) { .kv-aura, .kv-grain, .kv-spot { display:none; } .kv-motion { border-color:var(--color-text-light); } }
@media (max-width:640px) { .kv-stage { width:140px; } }