/* イラストの中の小さな動き（js/ill-motion.js が層を作る・10/13谷）。動かすのは transform・opacity だけ */
.ill-layer { display: block; pointer-events: none; z-index: 7; }
.ill-layer--abs { position: absolute; }
.ill-layer--clip { overflow: hidden; }
.ill-stage { position: absolute; left: 0; top: 0; height: 100%; display: block; }
.ill-body, .ill-part, .ill-part > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ill-layer > .ill-body, .ill-layer > .ill-part { position: absolute; }

/* 頭：ゆっくり首をかしげる（最大5度） */
.ill-part--head { animation: ill-head 7s ease-in-out infinite; will-change: transform; }
@keyframes ill-head { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(-4deg); } 36% { transform: rotate(-4deg); } 56% { transform: rotate(3deg); } 74% { transform: rotate(3deg); } }
/* 03 一番上のスマホ：ふわっと浮いて戻る */
.ill-part--float { animation: ill-float 3.6s ease-in-out infinite; }
.ill-part--head-s { animation: ill-head-s 6.4s ease-in-out infinite; }
@keyframes ill-head-s { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-2deg); } 40% { transform: rotate(-2deg); } 62% { transform: rotate(1.6deg); } 80% { transform: rotate(1.6deg); } }
.ill-part--still { animation: none; }
/* コラムの人物：グラフ（cm-chart）は部品の重なりより上に出す */
.p-column-pickup__illust .cm-chart { z-index: 8; }
@keyframes ill-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3.5%) rotate(-5deg); } }
/* 04 カーソルと青い四角：少しずつ動かす */
.ill-part--cursor { animation: ill-cursor 4.2s ease-in-out infinite; }
@keyframes ill-cursor { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(2.5%, 1.5%); } 60% { transform: translate(-1.5%, 2.5%); } }
/* 05 ハート：鼓動 */
.ill-part--pulse { animation: ill-pulse 2.8s ease-in-out infinite; }
@keyframes ill-pulse { 0%, 60%, 100% { transform: scale(1); } 68% { transform: scale(1.18); } 76% { transform: scale(.95); } 84% { transform: scale(1.06); } }

/* ピックアップは ::after の絵を部品の重ねに置き換える */
.has-ill-parts::after { background: none !important; }

.ill-lid { position: absolute; border-radius: 50%; transform: scaleY(0); transform-origin: 50% 0; animation: ill-blink 5.2s ease-in-out infinite; }
@keyframes ill-blink { 0%, 90%, 100% { transform: scaleY(0); } 93% { transform: scaleY(1); } 96% { transform: scaleY(0); } }
.ill-spark { position: absolute; opacity: 0; transform: scale(.4) rotate(0); animation: ill-spark 3.2s ease-in-out infinite; }
.ill-spark::before { content: ""; position: absolute; inset: 0; background: currentColor; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
@keyframes ill-spark { 0%, 55%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 70% { opacity: 1; transform: scale(1.15) rotate(20deg); } 85% { opacity: 0; transform: scale(.6) rotate(40deg); } }
/* 吹き出しの「…」：元の点を吹き出しの色で隠し、その上の点を順に濃く・少し上へ（入力中の表示） */
.ill-dot { position: absolute; border-radius: 50%; }
.ill-dot::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; background: currentColor; opacity: .3; animation: ill-typing 2.1s ease-in-out infinite; animation-delay: inherit; }
@keyframes ill-typing { 0%, 45%, 100% { opacity: .3; transform: translateY(0); } 15% { opacity: 1; transform: translateY(-28%); } 30% { opacity: .75; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ill-lid, .ill-spark, .ill-part, .ill-dot::after { animation: none; } .ill-dot::after { opacity: 1; } }