/* ===================================
   アニメーション共通
=================================== */

/* 初期値と可変パラメータ */
.animate-ignition {
	opacity: 0;
	--delay: .3s;
	--duration: .8s;
	will-change: transform, opacity;
}

/* 発動時に適用される共通プロパティ */
.animate-ignition.is-visible {
	opacity: 1;
	animation-delay: var(--delay);
	animation-duration: var(--duration);
	animation-timing-function: ease;
	animation-fill-mode: both;
	animation-play-state: running;
}


/* ===================================
   個別アニメーション
=================================== */

/* 1) fade-in */
.fade-in.is-visible {
	animation-name: fadeIn;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


/* 2) slide-up（下→上） */
.slide-up.is-visible {
	animation-name: slideUp;
}

@keyframes slideUp {
	from {
		transform: translateY(100px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}


/* 3) scale-up（縮小→等倍） */
.scale-up.is-visible {
	animation-name: scaleUp;
}

@keyframes scaleUp {
	from {
		transform: scale(0.8);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}


/* 4) rotate-in（回転→正位置） */
.rotate-in.is-visible {
	animation-name: rotateIn;
}

@keyframes rotateIn {
	from {
		transform: rotateY(-180deg);
		opacity: 0;
	}
	to {
		transform: rotateY(0deg);
		opacity: 1;
	}
}


/* 5) bounce-in（少し弾む入り） */
.bounce-in.is-visible {
	animation-name: bounceIn;
}

@keyframes bounceIn {
	0% {
		transform: scale(0.85);
		opacity: 0;
	}
	40% {
		transform: scale(1.4);
		opacity: 1;
	}
	55% {
		transform: scale(0.96);
	}
	70% {
		transform: scale(1.1);
	}
	85% {
		transform: scale(0.98);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}


/* 6) slide-left（左→元位置） */
.slide-left.is-visible {
	animation-name: slideLeft;
}

@keyframes slideLeft {
	from {
		transform: translateX(-200px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}


/* 7) slide-right（右→元位置） */
.slide-right.is-visible {
	animation-name: slideRight;
}

@keyframes slideRight {
	from {
		transform: translateX(200px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}


/* 8) text-slide（テキスト1文字ずつ表示） */
/* テキストへのspan追加はJS */

.text-slide {
	overflow: hidden;
}

.text-slide span {
	display: inline-block;
	opacity: 0;
	transform: translateX(-0.6em);
}

.text-slide.is-visible span {
	animation: textSlideIn 0.3s ease forwards;
	animation-delay: var(--char-delay);
}

@keyframes textSlideIn {
	from {
		opacity: 0;
		transform: translateX(-0.6em);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}


/* 9) mask-reveal-right（左から右へ柔らかく表示） */
.mask-reveal-right {
	-webkit-mask-image: linear-gradient(
		to right,
		#000 0%,
		#000 40%,
		transparent 60%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		#000 0%,
		#000 40%,
		transparent 60%,
		transparent 100%
	);

	-webkit-mask-size: 250% 100%;
	mask-size: 250% 100%;

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;

	opacity: 0;
}

.mask-reveal-right.is-visible {
	animation-name: maskRevealRight;
	animation-timing-function: linear;
}

@keyframes maskRevealRight {
	0% {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
		opacity: 0;
	}

	15% {
		opacity: 1;
	}

	100% {
		-webkit-mask-position: 0% 0;
		mask-position: 0% 0;
		opacity: 1;
	}
}


/* ===================================
   動きを減らす設定
=================================== */

@media (prefers-reduced-motion: reduce) {
	.animate-ignition,
	.animate-ignition.is-visible {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.animate-ignition.mask-reveal-right {
		-webkit-mask-image: none;
		mask-image: none;
	}
}