/* ═══════════════════════════════════════════════════════════════
   ฉากหมึก + ท่าขยับ (Codex Spirits Motion R2 · Design Liaison ตรวจ VERIFY-R2-1210 · folk อนุมัติ 12 ต.ค. 2569)
   ต้นแบบ: design-refs/spirits-motion-1210/v2/preview.css — ยกเฉพาะส่วนซินแส/ภูติบนฉาก ไม่ยกส่วนพรีวิว
   · ซินแส: หายใจ 6.8 วิ จากจุดยึดเท้า · หลอแก (เข็มทิศจีน) เรืองขาวบาง · แตะ = เอน + วงน้ำ 360ms
   · ภูติบนฉาก: ฉากธาตุ+ขั้วของตัวเอง ขอบฟุ้ง ไม่มีกรอบการ์ด · เท้าอยู่กับพื้น ไม่ลอยขึ้นลง
   · หยุดได้สองทาง (prefers-reduced-motion · html.still) แล้วภาพยังครบ · พ้นจอ/แท็บซ่อน = หยุด
   ⚠️ ไม่แก้ภาพตัวละครใดๆ · ชื่อท่าขึ้นต้น qz- ไม่ทับ keyframes ของ spirits.css
   ═══════════════════════════════════════════════════════════════ */
@keyframes qz-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.008,1.012)}}
@keyframes qz-glow{0%,100%{opacity:.24;scale:.88}50%{opacity:.75;scale:1.12}}
@keyframes qz-sway{0%,100%{transform:rotate(0)}42%{transform:rotate(-1.2deg)}72%{transform:rotate(.45deg)}}
@keyframes qz-squish{0%,100%{transform:scale(1)}45%{transform:scale(1.022,.982)}75%{transform:scale(.995,1.004)}}
@keyframes qz-ripple{0%{opacity:0;transform:scale(.4)}25%{opacity:.6}100%{opacity:0;transform:scale(1.25)}}

/* ── ซินแส (หน้าต้อนรับ · หน้ารหัสสมาชิก) — ภาพ sinse-cutout 400×600 เดิม ── */
.sinse-stage{display:grid;place-items:center;position:relative;border:0;border-radius:18px;padding:0;margin:0;background:none;cursor:pointer;isolation:isolate;min-width:44px;min-height:44px;color:inherit;font:inherit;touch-action:manipulation}
.sinse-stage:focus-visible{outline:3px solid var(--ink-purple,#24634D);outline-offset:4px}
.sinse-stage .sinse{position:relative;display:block;width:220px;height:330px}
.sinse-body,.sinse-response{position:absolute;inset:0;transform-origin:56% 96%}
.sinse-body{animation:qz-breathe 6.8s ease-in-out infinite}
.sinse-stage .sinse img{width:100%;height:100%;object-fit:contain;display:block;margin:0;transform:none;filter:none}
/* วัดจากไฟล์ 400×600 ที่ไม่ได้แก้: กลางหลอแก (233, 297) */
.luopan{position:absolute;left:58.25%;top:49.5%;width:20%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.luopan::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.48),rgba(255,255,255,.12) 36%,transparent 70%);animation:qz-glow 6.8s ease-in-out infinite}
.luopan::after{content:'';position:absolute;inset:-12%;border:1px solid rgba(255,255,255,.85);border-radius:50%;opacity:0}
.sinse-stage.is-tapping .sinse-response{animation:qz-sway 360ms ease-in-out 1}
.sinse-stage.is-tapping .luopan::after{animation:qz-ripple 360ms ease-out 1}

/* ── ภูติบนฉากของตัวเอง (หัวดวงฉัน · หน้าภูติห้าธาตุ) — ภาพภูติชุดเดียวกับแอป (assets/ch) ── */
.spirit-stage{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;max-width:440px;aspect-ratio:1;margin:auto;background:none;padding:0;border:0;border-radius:0;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation}
.spirit-stage:focus-visible{outline:3px solid var(--ink-purple,#24634D);outline-offset:4px}
.spirit-stage>.scene{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:contain;-webkit-mask-image:radial-gradient(ellipse at 50% 54%,#000 45%,transparent 73%);mask-image:radial-gradient(ellipse at 50% 54%,#000 45%,transparent 73%);pointer-events:none}
.spirit-stage .sp-host{pointer-events:none}
.spirit-stage .sp::after{animation:none;opacity:.28;bottom:3%;height:3%;width:38%}
.spirit-stage .sp .bd{animation:qz-breathe var(--dur) ease-in-out infinite;transform-origin:50% 92%}
.spirit-stage .sp.yin .bd{animation-duration:7.6s}
.spirit-stage .sp img{filter:none}
.spirit-stage .sp.tree .bd{filter:none}
.spirit-stage .sp.squish img{animation:qz-squish 7.2s ease-in-out infinite}
.spirit-stage .sp.glow img{animation-duration:5.8s}
.spirit-stage .sp.wave img{animation-duration:7.4s}
.spirit-stage .sp.tree .crown{animation-duration:7.4s}
.spirit-stage.is-tapping .sp .bd{animation:qz-squish 360ms ease-in-out 1}
.spirit-stage.is-tapping[data-element=wood] .sp .bd{animation:qz-sway 360ms ease-in-out 1}
.spirit-stage.is-tapping[data-element=water] .fx-ripple i{animation:ripple 360ms ease-out 1;animation-delay:0s}
.spirit-stage.is-tapping[data-element=fire] .fx-spark i,.spirit-stage.is-tapping[data-element=metal] .fx-spark i{animation:spark 360ms ease-in-out 1;animation-delay:0s}

/* ── หยุด: ยังไม่เห็นบนจอ/แท็บซ่อน = พัก · ล้วน CSS ไม่มี RAF ── */
.motion-stage:not(.in-view) *,.motion-stage:not(.in-view) *::before,.motion-stage:not(.in-view) *::after,
.tab-hidden .motion-stage *,.tab-hidden .motion-stage *::before,.tab-hidden .motion-stage *::after{animation-play-state:paused!important}
.still .motion-stage *,.still .motion-stage *::before,.still .motion-stage *::after{animation:none!important}
.still .motion-stage .fx,.still .motion-stage .sheen,.still .luopan{display:none!important}
@media(prefers-reduced-motion:reduce){
  .motion-stage *,.motion-stage *::before,.motion-stage *::after{animation:none!important}
  .motion-stage .fx,.motion-stage .sheen,.luopan{display:none!important}
}
@media print{.motion-stage *,.motion-stage *::before,.motion-stage *::after{animation:none!important}.motion-stage .fx,.motion-stage .sheen,.luopan{display:none!important}}