/* 全共通：アニメーションの外側ラッパー */
.bg-animate-wrapper {
	animation-name: bgBaseFadeIn;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	position: relative;
	overflow: hidden;
	opacity: 0;
}

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

/* テキスト要素：フェードアニメーション */
.text-fade-in {
	animation-name: textFadeIn;
	animation-duration: 1s;
	animation-delay: 0.6s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes textFadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* 左から右へスライドする背景 */
.bg-slide-in::before {
	animation-name: bgSlideFromLeft;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--blue_green);
}

@keyframes bgSlideFromLeft {
	0% {
		transform-origin: left;
		transform: scaleX(0);
	}
	50% {
		transform-origin: left;
		transform: scaleX(1);
	}
	50.001% {
		transform-origin: right;
	}
	100% {
		transform: scaleX(0);
		transform-origin: right;
	}
}

/* トリガー：初期状態で非表示 */
.text-fade-trigger,
.bg-slide-trigger {
	opacity: 0;
}