/* ===== Knowlib 滚动动效层（scrolltide 风格） =====
   只做加法：不改原有布局与配色，用独立的 translate/scale/opacity 属性，
   避免和 light.css 的 transform（鼠标倾斜）冲突。
*/

/* 顶部阅读进度 */
#klprogress{
  position:fixed; top:0; left:0; height:2px; width:100%; transform-origin:0 50%;
  transform:scaleX(0); z-index:9999; pointer-events:none;
  background:linear-gradient(90deg,#0A84FF,#5E5CE6 55%,#EE78AA);
  box-shadow:0 0 14px rgba(10,132,255,.55);
}

/* 背景漂浮光斑（增加景深） */
#klorbs{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
#klorbs i{
  position:absolute; display:block; border-radius:50%; filter:blur(60px); opacity:.55;
  will-change:transform;
}
#klorbs i:nth-child(1){ width:46vw; height:46vw; left:-8vw; top:4vh;  background:radial-gradient(circle,#ffd75e,transparent 68%); }
#klorbs i:nth-child(2){ width:52vw; height:52vw; right:-10vw; top:18vh; background:radial-gradient(circle,#ff86b8,transparent 68%); }
#klorbs i:nth-child(3){ width:54vw; height:54vw; left:22vw; top:74vh; background:radial-gradient(circle,#9a7bff,transparent 68%); }

/* 进入视口：淡入 + 上浮 + 去模糊（stagger 由 JS 给 delay） */
[data-kl]{
  opacity:0;
  translate:0 28px;
  scale:.985;
  filter:blur(7px);
  transition:
    opacity .95s cubic-bezier(.22,1,.36,1),
    translate .95s cubic-bezier(.22,1,.36,1),
    scale .95s cubic-bezier(.22,1,.36,1),
    filter .95s cubic-bezier(.22,1,.36,1);
}
[data-kl].kl-in{ opacity:1; translate:0 0; scale:1; filter:none; }

/* hero 首屏：整体轻微视差（translate 与 light.css 的 transform 互不干扰） */
.hero{ will-change:translate; }

/* 标题字逐个亮起 */
.kl-char{ display:inline-block; opacity:0; translate:0 .38em; filter:blur(6px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), translate .7s cubic-bezier(.22,1,.36,1), filter .7s; }
.kl-char.kl-in{ opacity:1; translate:0 0; filter:none; }

/* 截图走廊：随滚动做轻微 3D 旋转（桌面端） */
@media (min-width:821px){
  .showgrid{ perspective:1700px; perspective-origin:50% 40%; }
  .shot{ transform-style:preserve-3d; will-change:transform; }
  .win{ transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s, filter .45s; }
  .shot:hover .win{ filter:saturate(1.06) contrast(1.03); }
  /* 截图底部渐隐，让画面“融进”页面 */
  .win::after{
    content:""; position:absolute; inset:auto 0 0 0; height:26%; pointer-events:none;
    background:linear-gradient(to top, rgba(255,255,255,.92), rgba(255,255,255,0));
  }
}

/* 按钮磁吸 + 光泽扫过 */
.btn, button{
  will-change:translate;
  transition:translate .25s cubic-bezier(.22,1,.36,1), box-shadow .35s, filter .35s;
}
.btn{ overflow:hidden; }
.btn::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  translate:-120% 0; transition:translate .9s cubic-bezier(.22,1,.36,1);
}
.btn:hover::before{ translate:120% 0; }

/* 分区标题：左侧短光条滑入 */
.sec{ position:relative; padding-left:14px; }
.sec::before{
  content:""; position:absolute; left:0; top:50%; width:3px; height:14px; margin-top:-7px;
  border-radius:2px; background:linear-gradient(#0A84FF,#5E5CE6);
  transform:scaleY(0); transform-origin:50% 0;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.sec.kl-in::before, .card.kl-in .sec::before{ transform:scaleY(1); }

/* 无障碍：用户要求减少动效就全部关掉 */
@media (prefers-reduced-motion:reduce){
  [data-kl], .kl-char{ opacity:1 !important; translate:0 0 !important; scale:1 !important; filter:none !important; transition:none !important; }
  #klorbs{ display:none; }
  #klprogress{ display:none; }
  .shot{ transform:none !important; }
}