@charset "utf-8";

.fadein {
	opacity: 0;
	transform: translateY(20px);
	will-change: opacity, transform;
	transition:
		opacity 0.5s ease-in-out,
		transform 0.5s ease-in-out;
}

.fadein.show {
	opacity: 1;
	transform: translateY(0);
}

@keyframes fadein {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* PC only fade-in (staggered from left) */
@media (min-width: 1024px) {
	.fadein-pc {
		opacity: 0;
		transform: translateX(-20px);
		will-change: opacity, transform;
		transition:
			opacity 0.5s ease-in-out,
			transform 0.5s ease-in-out;
	}

	.fadein-pc.show {
		opacity: 1;
		transform: translateX(0);
	}

	/* Staggered delays for slider items */
	.c-slider-card-swiper .swiper-slide:nth-child(1) .fadein-pc {
		transition-delay: 0s;
	}
	.c-slider-card-swiper .swiper-slide:nth-child(2) .fadein-pc {
		transition-delay: 0.15s;
	}
	.c-slider-card-swiper .swiper-slide:nth-child(3) .fadein-pc {
		transition-delay: 0.3s;
	}
	.c-slider-card-swiper .swiper-slide:nth-child(4) .fadein-pc {
		transition-delay: 0.45s;
	}
}

/* SP: no animation for slider items */
@media (max-width: 1023px) {
	.fadein-pc {
		opacity: 1;
		transform: none;
	}
}

/* Fade in from right (right to left) */
.fadein-right {
	opacity: 0;
	transform: translateX(40px);
	will-change: opacity, transform;
	transition:
		opacity 0.6s ease-out,
		transform 0.6s ease-out;
}

.fadein-right.show {
	opacity: 1;
	transform: translateX(0);
}

/* Fade in from left (left to right) */
.fadein-left {
	opacity: 0;
	transform: translateX(-40px);
	will-change: opacity, transform;
	transition:
		opacity 0.6s ease-out,
		transform 0.6s ease-out;
}

.fadein-left.show {
	opacity: 1;
	transform: translateX(0);
}