.spirit-motion{position:relative;display:block;aspect-ratio:1;isolation:isolate;--tempo:4.8s;--split:40%;--scale:1;transform:scale(var(--scale))}.spirit-motion[data-polarity=yin]{--tempo:6.5s}.spirit-motion[data-id=metal-yin]{--scale:.82}
/* สเกลให้ทุกตัวดูน้ำหนักเท่ากัน — วัดจากพื้นที่ที่ตัวละครกินจริงในกรอบ (ดีไซเนอร์ 5 ต.ค.)
   ทองหยิน .82 เป็นค่าที่ folk เคาะเอง คงไว้ · ที่เหลือคำนวณจากค่ากลางของกลุ่ม */
.spirit-motion[data-id=earth-yin]{--scale:.81}
.spirit-motion[data-id=wood-yang]{--scale:1.17}
.spirit-motion[data-id=fire-yang]{--scale:1.16}
.spirit-motion[data-id=fire-yin]{--scale:1.17}
/* หมายเหตุ: --split ไม่ได้ตั้งที่นี่ · spirit-motion.js ตั้งแบบ inline ซึ่งชนะเสมอ
   ค่าที่ใช้อยู่ ไม้หยาง .38 · ไม้หยิน .22 · ไฟหยาง .37 · ไฟหยิน .29 · ที่เหลือ .34
   ตรวจกับภาพจริงทีละตัวแล้ว เส้นต้องอยู่เหนือหัวเสมอ */
.spirit-motion .sp-body{position:absolute;inset:0;transform-origin:50% 82%}.spirit-motion img{position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;object-fit:contain;filter:none!important}.spirit-motion .sp-tip{pointer-events:none}.spirit-motion[data-element=wood] .sp-base,.spirit-motion[data-element=fire] .sp-base{mask-image:linear-gradient(to bottom,transparent calc(var(--split) - 1%),#000 var(--split))}.spirit-motion[data-element=wood] .sp-tip,.spirit-motion[data-element=fire] .sp-tip{mask-image:linear-gradient(to bottom,#000 calc(var(--split) - 1%),transparent var(--split));transform-origin:50% var(--split)}.spirit-motion[data-element=wood] .sp-tip{animation:branch-sway var(--tempo) ease-in-out infinite}.spirit-motion[data-element=fire] .sp-tip{animation:flame-breathe calc(var(--tempo)*.54) ease-in-out infinite}.spirit-motion[data-element=fire] .sp-body{animation:ember-warm var(--tempo) ease-in-out infinite}.spirit-motion[data-element=water] .sp-body{animation:water-drift var(--tempo) ease-in-out infinite}.spirit-motion[data-element=earth] .sp-body{animation:earth-soften var(--tempo) ease-in-out infinite}.spirit-motion[data-id=earth-yang] .sp-body{animation-name:earth-settle}.spirit-motion .sp-shine{position:absolute;inset:0;mask-image:var(--sprite);mask-size:100% 100%;mask-repeat:no-repeat;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#fff0 42%,#fff9 48%,#ffefdba0 50%,#fff0 56%,transparent 65%);background-size:300% 100%;animation:metal-shine var(--tempo) ease-in-out infinite;mix-blend-mode:screen}.spirit-motion .sp-particle{position:absolute;width:5px;height:8px;border-radius:60% 60% 65% 65%;background:#91ddf4;box-shadow:inset 1px 1px 0 #ffffffa0;left:var(--x);top:var(--y);opacity:0;animation:water-drop var(--tempo) ease-in-out infinite;animation-delay:var(--delay);pointer-events:none}.spirit-motion[data-element=fire] .sp-particle{width:3px;height:5px;background:#ffb96e;animation-name:ember-rise}.spirit-motion .sp-ripple{position:absolute;width:40%;height:7%;border:1px solid #84cfe7aa;border-radius:50%;left:30%;bottom:4%;opacity:0;animation:water-ripple var(--tempo) ease-out infinite}.motion-paused .spirit-motion *,.spirit-motion.offscreen *{animation-play-state:paused!important}@keyframes branch-sway{0%,100%{transform:rotate(-1.8deg)}50%{transform:rotate(1.8deg)}}@keyframes flame-breathe{0%,100%{transform:skewX(-2deg) scaleY(.98)}45%{transform:skewX(2deg) scaleY(1.035)}75%{transform:skewX(-1deg) scaleY(1.01)}}@keyframes ember-warm{0%,100%{filter:brightness(1)}50%{filter:brightness(1.06)}}@keyframes water-drift{0%,100%{transform:translateY(2px) rotate(-.7deg)}50%{transform:translateY(-4px) rotate(.7deg)}}@keyframes earth-soften{0%,100%{transform:scale(1,1)}40%{transform:scale(1.035,.968)}72%{transform:scale(.985,1.016)}}@keyframes earth-settle{0%,100%{transform:scale(1,1)}45%{transform:scale(1.015,.985)}70%{transform:scale(.994,1.009)}}@keyframes metal-shine{0%,15%{background-position:150% 0;opacity:0}25%{opacity:.65}60%{opacity:.6}75%,100%{background-position:-50% 0;opacity:0}}@keyframes water-drop{0%,15%{transform:translateY(-5px) scale(.6);opacity:0}30%{opacity:.7}75%{transform:translateY(20px) scale(.9);opacity:0}100%{opacity:0}}@keyframes ember-rise{0%,15%{transform:translateY(10px);opacity:0}35%{opacity:.7}80%,100%{transform:translateY(-23px) scale(.4);opacity:0}}@keyframes water-ripple{0%,45%{transform:scale(.6);opacity:0}55%{opacity:.5}95%,100%{transform:scale(1.2);opacity:0}}@media(prefers-reduced-motion:reduce){.spirit-motion *{animation:none!important}.spirit-motion .sp-shine,.spirit-motion .sp-particle,.spirit-motion .sp-ripple{display:none!important}}