/* nn-motion 1.0: キャラの表情と動き（見た目だけ。文章・リンク・構造は変えません。ht=サイトの接頭辞） */
.char-says,.entry-content .talk .t-main,.entry-content .talk .t-ask{cursor:pointer}
@media (prefers-reduced-motion:no-preference){
:root{--a:16px}
.ht-cast-img{--a:24px}
.ht-logo-mark img{--a:7px}
.ht-avatar img{--a:18px}

@keyframes nn-hop{0%{translate:0 0;scale:1 1;rotate:0deg}10%{translate:0 0;scale:1.15 .85}28%{translate:0 calc(var(--a)*-1);scale:.92 1.12;rotate:-4deg}46%{translate:0 0;scale:1.12 .88;rotate:3deg}60%,100%{translate:0 0;scale:1 1;rotate:0deg}}
@keyframes nn-boing{0%{translate:0 0;scale:1 1}12%{translate:0 0;scale:1.22 .78}32%{translate:0 calc(var(--a)*-1.6);scale:.82 1.28}52%{translate:0 0;scale:1.16 .86}70%{translate:0 calc(var(--a)*-.4);scale:.97 1.04}100%{translate:0 0;scale:1 1}}
@keyframes nn-tremble{0%,100%{translate:0 0;rotate:0deg}12%{translate:calc(var(--a)*-.14) 1px;rotate:-3deg}24%{translate:calc(var(--a)*.14) 0;rotate:3deg}36%{translate:calc(var(--a)*-.14) 1px;rotate:-2deg}48%{translate:calc(var(--a)*.14) 0;rotate:2deg}60%{translate:calc(var(--a)*-.08) 1px;rotate:-1deg}72%{translate:calc(var(--a)*.08) 0;rotate:1deg}}
@keyframes nn-sink{0%,100%{scale:1 1}20%,80%{scale:.92 .94}}
@keyframes nn-rage{0%,100%{translate:0 0;rotate:0deg}20%{translate:calc(var(--a)*-.18) 0;rotate:-6deg}40%{translate:calc(var(--a)*.18) -1px;rotate:6deg}60%{translate:calc(var(--a)*-.18) 0;rotate:-5deg}80%{translate:calc(var(--a)*.18) -1px;rotate:5deg}}
@keyframes nn-swell{0%,100%{scale:1 1}25%,75%{scale:1.14 1.14}}
@keyframes nn-droop{0%{translate:0 0;rotate:0deg;scale:1 1}25%{translate:0 calc(var(--a)*.25);rotate:-7deg;scale:.95 .95}55%{translate:0 calc(var(--a)*.25);rotate:6deg;scale:.95 .95}80%{translate:0 calc(var(--a)*.12);rotate:-3deg;scale:.97 .97}100%{translate:0 0;rotate:0deg;scale:1 1}}
@keyframes nn-flap{0%,100%{translate:0 0;rotate:0deg}25%{translate:calc(var(--a)*-.5) calc(var(--a)*-.3);rotate:-5deg}50%{translate:0 0;rotate:0deg}75%{translate:calc(var(--a)*.5) calc(var(--a)*-.3);rotate:5deg}}
@keyframes nn-ring{0%{box-shadow:0 0 0 0 var(--ring,rgba(255,216,77,.75))}100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}

/* 吹き出しのキャラ（丸いアイコン）。顔の絵は --mark / --ask を入れ替えて変える */
:is(.char-says,.entry-content .talk .t-main,.entry-content .talk .t-ask)[data-emo]::before{transform-origin:50% 100%}
:is(.char-says,.entry-content .talk .t-main,.entry-content .talk .t-ask)[data-emo="laugh"]::before{--ring:rgba(255,200,40,.8);animation:nn-hop .75s ease-in-out 3,nn-ring .9s ease-out 3}
:is(.char-says,.entry-content .talk .t-main,.entry-content .talk .t-ask)[data-emo="surprise"]::before{--ring:rgba(255,255,255,.95);animation:nn-boing 1s ease-in-out 2,nn-ring 1s ease-out 2}
:is(.char-says,.entry-content .talk .t-main,.entry-content .talk .t-ask)[data-emo="cry"]::before{--ring:rgba(110,190,240,.8);animation:nn-tremble .3s linear infinite,nn-sink 3s ease-in-out 1,nn-ring 1.2s ease-out 3}
:is(.char-says,.entry-content .talk .t-main,.entry-content .talk .t-ask)[data-emo="angry"]::before{--ring:rgba(229,56,59,.8);animation:nn-rage .17s linear infinite,nn-swell 2.2s ease-in-out 1,nn-ring .7s ease-out 3}
:is(.char-says,.entry-content .talk .t-main,.entry-content .talk .t-ask)[data-emo="sad"]::before{--ring:rgba(150,160,190,.7);animation:nn-droop 3s ease-in-out 1,nn-ring 1.5s ease-out 2}

/* ロゴ・トップの集合絵・404の顔（img）。顔は src を入れ替える */
img[data-emo]{transform-origin:50% 100%}
img[data-emo="laugh"]{animation:nn-hop .75s ease-in-out 3}
img[data-emo="surprise"]{animation:nn-boing 1s ease-in-out 2}
img[data-emo="cry"]{animation:nn-tremble .3s linear infinite,nn-sink 3s ease-in-out 1}
img[data-emo="angry"]{animation:nn-flap .26s ease-in-out infinite,nn-swell 2.2s ease-in-out 1}
img[data-emo="sad"]{animation:nn-droop 3s ease-in-out 1}
}