/* 重點卡插圖（搭配 js/spots.js）
   原則：靜態畫面就是完整訊息；只有少數圖有一個慢速、輕微的循環動作。 */
.sp { display: block; width: 100%; height: auto; }
.sp .sp-fade, .sp .sp-sun { transform-box: fill-box; }

/* gastric：幽門後只有細細一點點流出 */
.sp-gastric .sp-trickle { animation: spTrickle 4s linear infinite; }
@keyframes spTrickle { to { stroke-dashoffset: -28; } }

/* appetite：食物念頭輕輕縮小、變淡 */
.sp-appetite .sp-fade { transform-origin: 50% 50%; animation: spFade 6s ease-in-out infinite; }
@keyframes spFade { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(.86); opacity: .3; } }

/* days：太陽慢慢轉 */
.sp-days .sp-sun { transform-origin: 50% 50%; animation: spSpin 24s linear infinite; }
@keyframes spSpin { to { transform: rotate(360deg); } }

/* scanjoin：掃描線上下移動 */
.sp-scanjoin .sp-scan { animation: spScan 4s ease-in-out infinite; }
@keyframes spScan { 0%, 100% { transform: translateY(-22px); } 50% { transform: translateY(22px); } }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) .sp * { animation: none !important; }
}