/* ============================================================
   QIANLONG BESPOKE — 03 3D & Motion Foundation
   - 卡片 3D 倾斜：JS 驱动，CSS 只给舞台
   - Hero 视差：JS 驱动
   - 遮罩升起 / SplitText：JS 拆分，CSS 只给遮罩
   - reduced-motion / no-JS：一律静态最终态
   ============================================================ */

/* ---------- 3D 舞台 ---------- */
[data-tilt]{
  transform-style:preserve-3d;
  will-change:transform;
}
.tilt-stage{perspective:var(--persp);}
.tilt-stage > [data-tilt]{transform:translateZ(0);}

/* 3D 高光：跟随鼠标的真实光照（替代平面扫光） */
[data-tilt] .tilt-glare{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 60%);
  opacity:0;transition:opacity var(--dur-1) var(--ease);
  mix-blend-mode:soft-light;
}
[data-tilt]:hover .tilt-glare{opacity:1;}
[data-tilt] .tilt-inner{transform:translateZ(34px);} /* 内容浮起，制造纵深 */

/* ---------- 遮罩升起（章节标题） ---------- */
.ql-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em;}
.ql-mask > .ql-mi{display:inline-block;will-change:transform;}

/* ---------- Hero SplitText ---------- */
.ql-ch{display:inline-block;will-change:transform,opacity;transform-origin:50% 100%;}
.ql-word{display:inline-block;white-space:nowrap;}

/* ---------- 初始隐藏只在 JS 就绪后 ---------- */
html.ql-live [data-rv]{opacity:0;}
html.ql-live [data-rv="fade"]{opacity:0;}
html.ql-live [data-rv="rise"]{opacity:0;transform:translateY(26px);}
html.ql-live [data-rv="rise3d"]{opacity:0;transform:translateY(30px) rotateX(-9deg);}
html.ql-live [data-rv="clip"]{clip-path:inset(6% 4% 6% 4% round 20px);opacity:.001;}
html.ql-live [data-rv="blur"]{opacity:0;filter:blur(10px);}

/* ---------- 导航 mega panel 3D ---------- */
.ql-nav-panel{
  transform-origin:50% 0%;
}
html.ql-live .ql-nav-panel[data-open="1"]{
  animation:ql-panel-in .45s var(--ease) both;
}
@keyframes ql-panel-in{
  from{opacity:0;transform:translateY(-10px) rotateX(7deg);}
  to{opacity:1;transform:translateY(0) rotateX(0);}
}
html.ql-live .ql-nav-panel[data-open="0"]{
  animation:ql-panel-out .28s var(--ease-soft) both;
}
@keyframes ql-panel-out{
  from{opacity:1;transform:translateY(0);}
  to{opacity:0;transform:translateY(-8px) rotateX(4deg);}
}

/* ---------- 安全回退 ---------- */
@media (prefers-reduced-motion:reduce){
  html.ql-live [data-rv]{opacity:1 !important;transform:none !important;
    clip-path:none !important;filter:none !important;}
  [data-tilt]{transform:none !important;}
  [data-tilt] .tilt-glare{display:none;}
  .ql-nav-panel[data-open]{animation:none !important;}
}