/* depth.css — 立體感：首屏 3D 立方體、列表傾斜與光斑、頭像、按鈕厚度、透視轉場、背景光球 */
body{overflow-x:clip}

/* 1. 首屏 3D 場景（在文字後方，跟隨滑鼠轉動） */
.hero{position:relative;isolation:isolate}
.scene{position:absolute;z-index:-1;right:-64px;top:6px;width:200px;height:200px;perspective:900px;pointer-events:none}
.hero>.scene{animation-delay:.5s}
.tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,-18deg)) rotateY(var(--ry,28deg));transition:transform .3s ease-out}
.cube{position:absolute;left:50px;top:50px;width:100px;height:100px;transform-style:preserve-3d;animation:spin 20s linear infinite}
.f{position:absolute;inset:0;border:1.5px solid var(--accent);background:linear-gradient(135deg,var(--glow),transparent 70%)}
.f1{transform:translateZ(50px)}
.f2{transform:rotateY(90deg) translateZ(50px)}
.f3{transform:rotateY(180deg) translateZ(50px)}
.f4{transform:rotateY(-90deg) translateZ(50px)}
.f5{transform:rotateX(90deg) translateZ(50px)}
.f6{transform:rotateX(-90deg) translateZ(50px)}
.ring{position:absolute;left:10px;top:10px;width:180px;height:180px;border-radius:50%;border:1px dashed var(--mute);opacity:.55;transform:rotateX(74deg);animation:ringA 16s linear infinite}
.r2{left:30px;top:30px;width:140px;height:140px;border:1px solid var(--accent);opacity:.35;transform:rotateY(72deg);animation:ringB 22s linear infinite reverse}
.core{position:absolute;left:84px;top:84px;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#ffe3b3,var(--accent) 58%,#7d2412);box-shadow:0 12px 28px -6px var(--accent);animation:bob 5s ease-in-out infinite}
@keyframes spin{to{transform:rotateX(360deg) rotateY(360deg)}}
@keyframes ringA{to{transform:rotateX(74deg) rotateZ(360deg)}}
@keyframes ringB{to{transform:rotateY(72deg) rotateZ(360deg)}}
@keyframes bob{50%{transform:translateY(-8px) scale(1.08)}}

/* 2. 文章列表：立體傾斜 + 跟隨滑鼠的光斑 */
.post,.arow{position:relative;isolation:isolate;transform-style:preserve-3d;transition:transform .2s ease-out}
.post::before,.arow::before{content:"";position:absolute;inset:4px -16px;z-index:-1;border-radius:14px;opacity:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 65%),var(--card);box-shadow:0 22px 44px -24px rgba(40,20,10,.45),0 0 0 1px var(--line);transition:opacity .3s}
.post:hover,.arow:hover{transform:perspective(1000px) translateX(6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.post:hover::before,.arow:hover::before{opacity:1}

/* 3. 頭像：傾斜 + 高光 + 立體字 */
.avatar{position:relative;overflow:hidden;text-shadow:0 4px 0 rgba(0,0,0,.2);transform:perspective(500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out}
.avatar:hover{transform:perspective(500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.06)}
.avatar::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,30%) var(--my,22%),rgba(255,255,255,.6),transparent 55%)}

/* 4. 有厚度的按鈕：按下時下沉 */
.sub button{box-shadow:0 4px 0 rgba(120,30,10,.6),0 12px 20px -10px rgba(200,71,43,.6);transition:transform .15s,box-shadow .15s}
.sub button:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(120,30,10,.6),0 16px 24px -10px rgba(200,71,43,.6)}
.sub button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(120,30,10,.6)}
.chips button.on{box-shadow:0 3px 0 rgba(120,30,10,.55)}
.chips button:hover{transform:translateY(-2px)}
.chips button:active{transform:translateY(1px)}


/* 6. 背景光球：緩慢漂浮，捲動時有視差 */
.orbs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;transform:translateY(calc(var(--sy,0) * -.1px))}
.orbs i{position:absolute;border-radius:50%;will-change:transform;animation:drift 24s ease-in-out infinite alternate}
.orbs i:nth-child(1){top:-14vh;right:-10vw;width:min(54vw,620px);aspect-ratio:1;background:radial-gradient(circle,var(--accent),transparent 66%);opacity:.14}
.orbs i:nth-child(2){bottom:-22vh;left:-14vw;width:min(48vw,560px);aspect-ratio:1;background:radial-gradient(circle,#e8a23a,transparent 66%);opacity:.13;animation-duration:30s;animation-direction:alternate-reverse}
@keyframes drift{to{transform:translate3d(3vw,4vh,0) scale(1.1)}}

/* 7. 朱紅印章：進場時「蓋」下，滑過會傾斜 */
@keyframes stamp{from{opacity:0;transform:perspective(500px) scale(2) rotate(-24deg)}60%{opacity:1}}
.seal{position:absolute;right:6px;bottom:8px;width:60px;height:60px;display:grid;place-items:center;border-radius:8px;font:900 32px var(--serif);color:var(--bg);background:var(--accent);text-shadow:0 2px 0 rgba(0,0,0,.2);user-select:none;box-shadow:0 5px 0 rgba(120,30,10,.55),0 16px 26px -14px var(--accent);transform:perspective(500px) rotate(-8deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out;animation:stamp .7s cubic-bezier(.3,1.4,.5,1) 1s backwards}
.seal::after{content:"";position:absolute;inset:4px;border:1.5px solid rgba(255,255,255,.45);border-radius:5px}

/* 8. 統計數字：輕微傾斜 */
.stats>div{transform:perspective(500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out}