/**
 * ブロックアニメーション
 */

.swell-child-animate {
	--swell-anim-duration: 0.6s;
	--swell-anim-delay: 0s;
	--swell-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
	opacity: 0;
	transition-property: opacity, transform;
	transition-duration: var(--swell-anim-duration);
	transition-delay: var(--swell-anim-delay);
	transition-timing-function: var(--swell-anim-ease);
	will-change: opacity, transform;
}

.swell-child-animate.is-swell-animated {
	opacity: 1;
	transform: none;
}

.swell-child-animate--fade-up {
	transform: translateY(28px);
}

.swell-child-animate--fade-down {
	transform: translateY(-28px);
}

.swell-child-animate--fade-left {
	transform: translateX(-28px);
}

.swell-child-animate--fade-right {
	transform: translateX(28px);
}

.swell-child-animate--fade {
	transform: none;
}

.swell-child-animate--zoom-in {
	transform: scale(0.92);
}

.swell-child-animate--none,
.swell-child-animate--none.is-swell-animated {
	opacity: 1;
	transform: none;
}

/**
 * 画像ブロック: ラッパーは常にレイアウトを確保し、img だけをアニメーション
 */
.swell-child-animate--media,
.editor-styles-wrapper .swell-child-animate--media {
	opacity: 1;
	transform: none;
	transition: none;
	will-change: auto;
}

.swell-child-animate--media img,
.editor-styles-wrapper .swell-child-animate--media img {
	opacity: 0;
	transition-property: opacity, transform;
	transition-duration: var(--swell-anim-duration);
	transition-delay: var(--swell-anim-delay);
	transition-timing-function: var(--swell-anim-ease);
	will-change: opacity, transform;
}

.swell-child-animate--media.is-swell-animated img,
.editor-styles-wrapper .swell-child-animate--media.is-swell-animated img,
.swell-child-animate--media.swell-child-animate--none img,
.editor-styles-wrapper .swell-child-animate--media.swell-child-animate--none img {
	opacity: 1;
	transform: none;
}

.swell-child-animate--media.swell-child-animate--fade-up:not(.is-swell-animated) img,
.editor-styles-wrapper
	.swell-child-animate--media.swell-child-animate--fade-up:not(.is-swell-animated)
	img {
	transform: translateY(28px);
}

.swell-child-animate--media.swell-child-animate--fade-down:not(.is-swell-animated) img,
.editor-styles-wrapper
	.swell-child-animate--media.swell-child-animate--fade-down:not(.is-swell-animated)
	img {
	transform: translateY(-28px);
}

.swell-child-animate--media.swell-child-animate--fade-left:not(.is-swell-animated) img,
.editor-styles-wrapper
	.swell-child-animate--media.swell-child-animate--fade-left:not(.is-swell-animated)
	img {
	transform: translateX(-28px);
}

.swell-child-animate--media.swell-child-animate--fade-right:not(.is-swell-animated) img,
.editor-styles-wrapper
	.swell-child-animate--media.swell-child-animate--fade-right:not(.is-swell-animated)
	img {
	transform: translateX(28px);
}

.swell-child-animate--media.swell-child-animate--fade:not(.is-swell-animated) img,
.editor-styles-wrapper
	.swell-child-animate--media.swell-child-animate--fade:not(.is-swell-animated)
	img {
	transform: none;
}

.swell-child-animate--media.swell-child-animate--zoom-in:not(.is-swell-animated) img,
.editor-styles-wrapper
	.swell-child-animate--media.swell-child-animate--zoom-in:not(.is-swell-animated)
	img {
	transform: scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
	.swell-child-animate {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.swell-child-animate--media img,
	.editor-styles-wrapper .swell-child-animate--media img {
		opacity: 1;
		transform: none;
		transition: none;
	}
}