/*
 * DN Core editorkit — ブロックのアニメーション（Blocks Animation の代わり）
 *
 * 保存済みの class="animated fadeIn"（animate.css の旧書式）をそのまま読む。
 * 🛑 動かすのは JS が .dn-ek-play を付けた瞬間だけ。CSS だけでは何も動かさない
 *    （JS が止まっても、文字はふつうに見えたまま）。
 * 🛑 動きの名前は dnek- を前に付ける。テーマ側の @keyframes fadeIn 等とぶつけない。
 * 🛑 名前の一覧は module.php の DN_Module_Editorkit::animations() と同じに保つ（試験で照合する）。
 */

.animated.dn-ek-wait {
	opacity: 0 !important;
}

.animated.dn-ek-play {
	animation-duration: 1s;
	animation-fill-mode: both;
}

/* 始まるまでの間 */
.animated.dn-ek-play.delay-100ms { animation-delay: .1s; }
.animated.dn-ek-play.delay-200ms { animation-delay: .2s; }
.animated.dn-ek-play.delay-500ms { animation-delay: .5s; }
.animated.dn-ek-play.delay-1s { animation-delay: 1s; }
.animated.dn-ek-play.delay-2s { animation-delay: 2s; }
.animated.dn-ek-play.delay-3s { animation-delay: 3s; }
.animated.dn-ek-play.delay-4s { animation-delay: 4s; }
.animated.dn-ek-play.delay-5s { animation-delay: 5s; }

/* 速さ */
.animated.dn-ek-play.slow { animation-duration: 2s; }
.animated.dn-ek-play.slower { animation-duration: 3s; }
.animated.dn-ek-play.fast { animation-duration: .8s; }
.animated.dn-ek-play.faster { animation-duration: .5s; }

/* 動きを減らす設定の人には動かさない（JS も動かさないが、念のため） */
@media (prefers-reduced-motion: reduce) {
	.animated.dn-ek-play { animation: none !important; }
	.animated.dn-ek-wait { opacity: 1 !important; }
}

/* ---- 現れる ---- */
.animated.dn-ek-play.fadeIn { animation-name: dnek-fadeIn; }
@keyframes dnek-fadeIn { from { opacity: 0; } to { opacity: 1; } }

.animated.dn-ek-play.fadeInUp { animation-name: dnek-fadeInUp; }
@keyframes dnek-fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

.animated.dn-ek-play.fadeInDown { animation-name: dnek-fadeInDown; }
@keyframes dnek-fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

.animated.dn-ek-play.fadeInLeft { animation-name: dnek-fadeInLeft; }
@keyframes dnek-fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

.animated.dn-ek-play.fadeInRight { animation-name: dnek-fadeInRight; }
@keyframes dnek-fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

.animated.dn-ek-play.zoomIn { animation-name: dnek-zoomIn; }
@keyframes dnek-zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }

.animated.dn-ek-play.slideInUp { animation-name: dnek-slideInUp; }
@keyframes dnek-slideInUp { from { visibility: visible; transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } }

.animated.dn-ek-play.slideInDown { animation-name: dnek-slideInDown; }
@keyframes dnek-slideInDown { from { visibility: visible; transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 0, 0); } }

.animated.dn-ek-play.slideInLeft { animation-name: dnek-slideInLeft; }
@keyframes dnek-slideInLeft { from { visibility: visible; transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

.animated.dn-ek-play.slideInRight { animation-name: dnek-slideInRight; }
@keyframes dnek-slideInRight { from { visibility: visible; transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

.animated.dn-ek-play.bounceIn,
.animated.dn-ek-play.bounceInUp,
.animated.dn-ek-play.bounceInDown,
.animated.dn-ek-play.bounceInLeft,
.animated.dn-ek-play.bounceInRight { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }

.animated.dn-ek-play.bounceIn { animation-name: dnek-bounceIn; animation-duration: .75s; }
@keyframes dnek-bounceIn {
	from { opacity: 0; transform: scale3d(.3, .3, .3); }
	20% { transform: scale3d(1.1, 1.1, 1.1); }
	40% { transform: scale3d(.9, .9, .9); }
	60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
	80% { transform: scale3d(.97, .97, .97); }
	to { opacity: 1; transform: scale3d(1, 1, 1); }
}

.animated.dn-ek-play.bounceInUp { animation-name: dnek-bounceInUp; }
@keyframes dnek-bounceInUp {
	from { opacity: 0; transform: translate3d(0, 3000px, 0) scaleY(5); }
	60% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(.9); }
	75% { transform: translate3d(0, 10px, 0) scaleY(.95); }
	90% { transform: translate3d(0, -5px, 0) scaleY(.985); }
	to { transform: translate3d(0, 0, 0); }
}

.animated.dn-ek-play.bounceInDown { animation-name: dnek-bounceInDown; }
@keyframes dnek-bounceInDown {
	from { opacity: 0; transform: translate3d(0, -3000px, 0) scaleY(3); }
	60% { opacity: 1; transform: translate3d(0, 25px, 0) scaleY(.9); }
	75% { transform: translate3d(0, -10px, 0) scaleY(.95); }
	90% { transform: translate3d(0, 5px, 0) scaleY(.985); }
	to { transform: translate3d(0, 0, 0); }
}

.animated.dn-ek-play.bounceInLeft { animation-name: dnek-bounceInLeft; }
@keyframes dnek-bounceInLeft {
	from { opacity: 0; transform: translate3d(-3000px, 0, 0) scaleX(3); }
	60% { opacity: 1; transform: translate3d(25px, 0, 0) scaleX(1); }
	75% { transform: translate3d(-10px, 0, 0) scaleX(.98); }
	90% { transform: translate3d(5px, 0, 0) scaleX(.995); }
	to { transform: translate3d(0, 0, 0); }
}

.animated.dn-ek-play.bounceInRight { animation-name: dnek-bounceInRight; }
@keyframes dnek-bounceInRight {
	from { opacity: 0; transform: translate3d(3000px, 0, 0) scaleX(3); }
	60% { opacity: 1; transform: translate3d(-25px, 0, 0) scaleX(1); }
	75% { transform: translate3d(10px, 0, 0) scaleX(.98); }
	90% { transform: translate3d(-5px, 0, 0) scaleX(.995); }
	to { transform: translate3d(0, 0, 0); }
}

.animated.dn-ek-play.backInUp { animation-name: dnek-backInUp; }
@keyframes dnek-backInUp {
	0% { transform: translateY(1200px) scale(.7); opacity: .7; }
	80% { transform: translateY(0) scale(.7); opacity: .7; }
	100% { transform: scale(1); opacity: 1; }
}

.animated.dn-ek-play.backInDown { animation-name: dnek-backInDown; }
@keyframes dnek-backInDown {
	0% { transform: translateY(-1200px) scale(.7); opacity: .7; }
	80% { transform: translateY(0) scale(.7); opacity: .7; }
	100% { transform: scale(1); opacity: 1; }
}

.animated.dn-ek-play.backInLeft { animation-name: dnek-backInLeft; }
@keyframes dnek-backInLeft {
	0% { transform: translateX(-2000px) scale(.7); opacity: .7; }
	80% { transform: translateX(0) scale(.7); opacity: .7; }
	100% { transform: scale(1); opacity: 1; }
}

.animated.dn-ek-play.backInRight { animation-name: dnek-backInRight; }
@keyframes dnek-backInRight {
	0% { transform: translateX(2000px) scale(.7); opacity: .7; }
	80% { transform: translateX(0) scale(.7); opacity: .7; }
	100% { transform: scale(1); opacity: 1; }
}

.animated.dn-ek-play.flipInX { animation-name: dnek-flipInX; backface-visibility: visible !important; }
@keyframes dnek-flipInX {
	from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
	40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; }
	60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
	80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
	to { transform: perspective(400px); }
}

.animated.dn-ek-play.flipInY { animation-name: dnek-flipInY; backface-visibility: visible !important; }
@keyframes dnek-flipInY {
	from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
	40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; }
	60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
	80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
	to { transform: perspective(400px); }
}

.animated.dn-ek-play.lightSpeedInRight { animation-name: dnek-lightSpeedInRight; animation-timing-function: ease-out; }
@keyframes dnek-lightSpeedInRight {
	from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
	60% { transform: skewX(20deg); opacity: 1; }
	80% { transform: skewX(-5deg); }
	to { transform: translate3d(0, 0, 0); }
}

.animated.dn-ek-play.lightSpeedInLeft { animation-name: dnek-lightSpeedInLeft; animation-timing-function: ease-out; }
@keyframes dnek-lightSpeedInLeft {
	from { transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; }
	60% { transform: skewX(-20deg); opacity: 1; }
	80% { transform: skewX(5deg); }
	to { transform: translate3d(0, 0, 0); }
}

.animated.dn-ek-play.rotateIn { animation-name: dnek-rotateIn; transform-origin: center; }
@keyframes dnek-rotateIn { from { transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } }

.animated.dn-ek-play.jackInTheBox { animation-name: dnek-jackInTheBox; }
@keyframes dnek-jackInTheBox {
	from { opacity: 0; transform: scale(.1) rotate(30deg); transform-origin: center bottom; }
	50% { transform: rotate(-10deg); }
	70% { transform: rotate(3deg); }
	to { opacity: 1; transform: scale(1); }
}

.animated.dn-ek-play.rollIn { animation-name: dnek-rollIn; }
@keyframes dnek-rollIn {
	from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---- 目を引く（その場で動く） ---- */
.animated.dn-ek-play.bounce { animation-name: dnek-bounce; transform-origin: center bottom; }
@keyframes dnek-bounce {
	from, 20%, 53%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); transform: translate3d(0, 0, 0); }
	40%, 43% { animation-timing-function: cubic-bezier(.755, .05, .855, .06); transform: translate3d(0, -30px, 0) scaleY(1.1); }
	70% { animation-timing-function: cubic-bezier(.755, .05, .855, .06); transform: translate3d(0, -15px, 0) scaleY(1.05); }
	80% { transition-timing-function: cubic-bezier(.215, .61, .355, 1); transform: translate3d(0, 0, 0) scaleY(.95); }
	90% { transform: translate3d(0, -4px, 0) scaleY(1.02); }
}

.animated.dn-ek-play.flash { animation-name: dnek-flash; }
@keyframes dnek-flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } }

.animated.dn-ek-play.pulse { animation-name: dnek-pulse; animation-timing-function: ease-in-out; }
@keyframes dnek-pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } }

.animated.dn-ek-play.heartBeat { animation-name: dnek-heartBeat; animation-duration: 1.3s; animation-timing-function: ease-in-out; }
@keyframes dnek-heartBeat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } }

.animated.dn-ek-play.rubberBand { animation-name: dnek-rubberBand; }
@keyframes dnek-rubberBand {
	from { transform: scale3d(1, 1, 1); }
	30% { transform: scale3d(1.25, .75, 1); }
	40% { transform: scale3d(.75, 1.25, 1); }
	50% { transform: scale3d(1.15, .85, 1); }
	65% { transform: scale3d(.95, 1.05, 1); }
	75% { transform: scale3d(1.05, .95, 1); }
	to { transform: scale3d(1, 1, 1); }
}

.animated.dn-ek-play.shakeX { animation-name: dnek-shakeX; }
@keyframes dnek-shakeX {
	from, to { transform: translate3d(0, 0, 0); }
	10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
	20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}

.animated.dn-ek-play.shakeY { animation-name: dnek-shakeY; }
@keyframes dnek-shakeY {
	from, to { transform: translate3d(0, 0, 0); }
	10%, 30%, 50%, 70%, 90% { transform: translate3d(0, -10px, 0); }
	20%, 40%, 60%, 80% { transform: translate3d(0, 10px, 0); }
}

.animated.dn-ek-play.headShake { animation-name: dnek-headShake; animation-timing-function: ease-in-out; }
@keyframes dnek-headShake {
	0% { transform: translateX(0); }
	6.5% { transform: translateX(-6px) rotateY(-9deg); }
	18.5% { transform: translateX(5px) rotateY(7deg); }
	31.5% { transform: translateX(-3px) rotateY(-5deg); }
	43.5% { transform: translateX(2px) rotateY(3deg); }
	50% { transform: translateX(0); }
}

.animated.dn-ek-play.swing { animation-name: dnek-swing; transform-origin: top center; }
@keyframes dnek-swing {
	20% { transform: rotate3d(0, 0, 1, 15deg); }
	40% { transform: rotate3d(0, 0, 1, -10deg); }
	60% { transform: rotate3d(0, 0, 1, 5deg); }
	80% { transform: rotate3d(0, 0, 1, -5deg); }
	to { transform: rotate3d(0, 0, 1, 0deg); }
}

.animated.dn-ek-play.tada { animation-name: dnek-tada; }
@keyframes dnek-tada {
	from { transform: scale3d(1, 1, 1); }
	10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
	30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
	40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
	to { transform: scale3d(1, 1, 1); }
}

.animated.dn-ek-play.wobble { animation-name: dnek-wobble; }
@keyframes dnek-wobble {
	from { transform: translate3d(0, 0, 0); }
	15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
	30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
	45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
	60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
	75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
	to { transform: translate3d(0, 0, 0); }
}

.animated.dn-ek-play.jello { animation-name: dnek-jello; transform-origin: center; }
@keyframes dnek-jello {
	from, 11.1%, to { transform: translate3d(0, 0, 0); }
	22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
	33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
	44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
	55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
	66.6% { transform: skewX(-.78125deg) skewY(-.78125deg); }
	77.7% { transform: skewX(.390625deg) skewY(.390625deg); }
	88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg); }
}

/* 編集画面：「動きを見る」 */
.dn-ek-help { margin: 8px 0 0; color: #757575; font-size: 12px; }