/* ui3d 展示分支：首页首屏 3D「作品星座 · 一句话分身」+ 作品卡实体手感。
   全部挂在 JS 打上的属性下（.hero-art[data-stage="3d"]、.project-grid[data-tactile]）：
   JS 没挂上（WebGL 不可用 / 减少动态 / 模块没加载）= 原来的 2D 样式一字不差。 */

/* ---------- 首屏：画布在插画框里，永远不接指针 ---------- */
.hero-stage{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,#0000,#000 6% 94%,#0000),linear-gradient(#0000,#000 5% 90%,#0000);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,#0000,#000 6% 94%,#0000),linear-gradient(#0000,#000 5% 90%,#0000);mask-composite:intersect;opacity:0;animation:hero-stage-in .9s cubic-bezier(.2,.7,.2,1) .05s forwards}
/* 首帧画好之前画布不可见，2D 插画照常 */
.hero-art:not([data-stage="3d"]) .hero-stage{visibility:hidden;animation:none}
@keyframes hero-stage-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.hero-art[data-stage="3d"]:before,.hero-art[data-stage="3d"] .hero-star{opacity:0;transition:opacity .5s}
.hero-art[data-stage="3d"] .hero-window{opacity:0;transform:rotate(-5deg) scale(.96);transition:opacity .5s,transform .5s;pointer-events:none}
.hero-art[data-stage="3d"] .floating-request,.hero-art[data-stage="3d"] .floating-done{z-index:1}
/* 「一句话」气泡：分身开始前亮一下（这一句就是改法） */
.hero-art[data-stage="3d"] .floating-request{transition:box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1.3)}
.hero-art[data-remix="asking"] .floating-request{box-shadow:0 0 0 3px var(--lime),0 12px 28px #53603924;transform:rotate(3deg) translateY(-4px)}
.hero-art[data-remix="asking"] .floating-request .avatar{background:var(--lime)}
/* 「一个新版本，诞生了」：染色完成那一刻弹出，回到原作时收起 */
.hero-art[data-stage="3d"] .floating-done{opacity:0;transform:rotate(7deg) translateY(10px) scale(.92);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1.4)}
.hero-art[data-stage="3d"][data-remix="done"] .floating-done{opacity:1;transform:rotate(7deg)}

/* ---------- 作品网格：实体卡 ---------- */
@media (hover:hover){
  .project-grid[data-tactile] .project-card,.project-grid[data-tactile] .project-card:hover{
    position:relative;
    transform:perspective(1000px) translateY(calc(var(--lift,0) * -8px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(calc(1 - var(--press,0) * .025));
    box-shadow:0 1px 0 #ffffff inset,
      0 calc(6px + var(--lift,0) * 18px) calc(14px + var(--lift,0) * 26px) calc(var(--lift,0) * -10px) rgb(52 68 25 / calc(.05 + var(--lift,0) * .2 - var(--press,0) * .1)),
      0 2px 6px rgb(52 68 25 / calc(.04 + var(--lift,0) * .06));
    transition:box-shadow .25s;will-change:transform}
  /* 高光：一层随指针走的径向光，指针离开随 --lift 淡掉；不接指针，不挡卡里任何东西 */
  .project-grid[data-tactile] .project-card:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
    background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgb(255 255 255 / .42),rgb(255 255 255 / 0) 52%);
    opacity:var(--lift,0)}
  /* 封面是卡里的一扇窗：抬起时微微放大、反向视差 */
  .project-grid[data-tactile] .project-card .cover{transform-origin:50% 100%;
    transform:translate(calc(var(--ryn,0) * -.9px),calc(var(--rxn,0) * .9px)) scale(calc(1 + var(--lift,0) * .045))}
  .project-grid[data-tactile] .project-card:hover .card-body h3 span{color:#55702a;transform:translate(2px,-2px);transition:transform .25s,color .25s}
  /* 《等一口》入口：悬停时浮漂点头 */
  .project-grid[data-tactile] [data-fishing-entry]:hover .mini-float{animation:float-nod 1.4s ease-in-out infinite}
}
@keyframes float-nod{0%,100%{transform:translateY(0)}30%{transform:translateY(7px)}55%{transform:translateY(-2px)}}
/* 按下：压下去（鼠标走上面那条变换；触屏没有 hover，单独给一条） */
.project-grid[data-tactile] .project-card:active{--press:1}
@media (hover:none){.project-grid[data-tactile] .project-card{transition:transform .12s}.project-grid[data-tactile] .project-card:active{transform:scale(.975)}}
/* 推门：被点的卡朝你推近、出一圈青柠光；其余卡退暗 */
.project-grid[data-tactile][data-leaving] .project-card{transition:opacity .19s,filter .19s,transform .19s cubic-bezier(.3,.7,.2,1),box-shadow .19s}
.project-grid[data-tactile][data-leaving] .project-card:not([data-leaving]){opacity:.35;filter:saturate(.4) blur(1px)}
.project-grid[data-tactile] .project-card[data-leaving]{position:relative;z-index:3;transform:perspective(1000px) translateZ(70px) translateY(-10px)!important;
  box-shadow:0 0 0 2px var(--lime),0 30px 60px -18px rgb(52 68 25 / .45),0 0 60px rgb(216 244 121 / .55)!important}

/* 减弱动态效果：首帧即终态（#405）。3D 在减弱动态下仍会挂一帧静止画面、打上 data-stage="3d"——挂在这个属性下的淡出 / 弹出也要一并关掉，
   否则 data-stage 那一下会起一条 .5 s 的过渡（夜跑 Mac GPU 红过：310–839 ms 有一条 opacity 过渡在跑，docs/evidence/t405-rm/）。 */
@media(prefers-reduced-motion:reduce){
  .hero-stage{animation:none;transition:none;opacity:1}
  .hero-art[data-stage="3d"]:before,.hero-art[data-stage="3d"] .hero-star,.hero-art[data-stage="3d"] .hero-window,
  .hero-art[data-stage="3d"] .floating-request,.hero-art[data-stage="3d"] .floating-done{transition:none;animation:none}
  .project-grid[data-tactile] [data-fishing-entry]:hover .mini-float{animation:none}
}

/* 桌面：画布比插画框四周多出一圈，让卡片可以浮出框外（内容区有 44px 边距，不会撑出横向滚动）；窄屏不外扩 */
@media(min-width:621px){.hero-stage{inset:-9% -5%;width:110%;height:118%}}