/*
 * ページ題名の入場。itemmaker.jp で作った動きの移植（題名まわりだけ）。
 *
 * 一文字ずつ、判子を押すように順に据わる。
 *   ・35msずらしで下から、わずかに傾いて現れて、まっすぐに座る
 *   ・下線（::after）があるページでは、最後の文字が据わる頃に左から伸びる
 *   ・JSが動かない・印刷・動きを減らす設定では、最初から全部見せる
 *
 * 隠すのは html.dmk-js が付いているときだけ。functions.php が head の先頭で付ける。
 */

html.dmk-js .dmk-title-in{
	animation:dmk-title-in .6s cubic-bezier(.22,.7,.3,1) both;
}
@keyframes dmk-title-in{
	from{opacity:0;transform:translateY(16px)}
	to{opacity:1;transform:none}
}
html.dmk-js .dmk-title-in::after{
	transform:scaleX(0);transform-origin:left center;
	animation:dmk-title-line .5s cubic-bezier(.33,1,.68,1) both;
	animation-delay:var(--dmk-line-delay,.25s);
}
@keyframes dmk-title-line{
	from{transform:scaleX(0)}
	to{transform:scaleX(1)}
}

/* 一文字ずつに分けたときは、題名まるごとの動きは止めて文字に任せる */
html.dmk-js .dmk-chars{animation:none;opacity:1;transform:none}
html.dmk-js .dmk-chars .dmk-ch{
	display:inline-block;white-space:pre;
	animation:dmk-ch-in .5s cubic-bezier(.2,.75,.25,1.12) both;
}
@keyframes dmk-ch-in{
	from{opacity:0;transform:translateY(.5em) rotate(3deg) scale(.92)}
	60%{opacity:1}
	to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
	html.dmk-js .dmk-title-in,
	html.dmk-js .dmk-title-in::after,
	html.dmk-js .dmk-chars .dmk-ch{opacity:1 !important;transform:none !important;animation:none !important}
}
@media print{
	html.dmk-js .dmk-title-in,
	html.dmk-js .dmk-title-in::after,
	html.dmk-js .dmk-chars .dmk-ch{opacity:1 !important;transform:none !important;animation:none !important}
}