/* ============================================================
 * animation.css — GSAP ScrollTrigger 초기 상태
 * TRD § 6.4
 * ============================================================ */

/* GSAP가 최종 상태로 애니메이션 처리 */
.fade-up {
	opacity: 0;
	transform: translateY(30px);
}
.fade-in {
	opacity: 0;
}
.slide-left {
	opacity: 0;
	transform: translateX(-40px);
}
.slide-right {
	opacity: 0;
	transform: translateX(40px);
}
.scale-up {
	opacity: 0;
	transform: scale(0.9);
}

/* prefers-reduced-motion 폴백 (접근성) */
@media (prefers-reduced-motion: reduce) {
	.fade-up,
	.fade-in,
	.slide-left,
	.slide-right,
	.scale-up {
		opacity: 1;
		transform: none;
	}
}

/* 서브헤더 GSAP 초기 상태 — JS에서 fromTo로 애니메이션, 깜빡임 방지 */
.sub-header__inner--gsap .sub-header__title,
.sub-header__inner--gsap .sub-header__desc,
.sub-header__inner--gsap .breadcrumb {
	opacity: 0;
	visibility: hidden;
	transform: translateY(28px);
	will-change: opacity, transform;
	transition: none;
}
.sub-header__inner--gsap.gsap-done .sub-header__title,
.sub-header__inner--gsap.gsap-done .sub-header__desc,
.sub-header__inner--gsap.gsap-done .breadcrumb,
.sub-header__inner--gsap.gsap-fallback .sub-header__title,
.sub-header__inner--gsap.gsap-fallback .sub-header__desc,
.sub-header__inner--gsap.gsap-fallback .breadcrumb {
	opacity: 1;
	visibility: visible;
	transform: none;
	will-change: auto;
	transition: none;
}
@media (prefers-reduced-motion: reduce) {
	.sub-header__inner--gsap .sub-header__title,
	.sub-header__inner--gsap .sub-header__desc,
	.sub-header__inner--gsap .breadcrumb {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* 소개-01 GSAP 초기 상태 — 이미지(좌에서 슬라이드), 텍스트 줄별 순차 등장
 * .camel-intro-01만 있으면 적용되므로 다른 페이지 복사 시에도 동작 */
.camel-intro-01 .camel-intro-01__image {
	opacity: 0;
	transform: translateX(-40px);
	will-change: opacity, transform;
}
.camel-intro-01 .camel-intro-01__title,
.camel-intro-01 .camel-intro-01__slogan,
.camel-intro-01 .camel-intro-01__desc,
.camel-intro-01 .camel-intro-01__conclusion {
	opacity: 0;
	transform: translateY(20px);
	will-change: opacity, transform;
}
.camel-intro-01.gsap-done .camel-intro-01__image,
.camel-intro-01.gsap-done .camel-intro-01__title,
.camel-intro-01.gsap-done .camel-intro-01__slogan,
.camel-intro-01.gsap-done .camel-intro-01__desc,
.camel-intro-01.gsap-done .camel-intro-01__conclusion,
.camel-intro-01.gsap-fallback .camel-intro-01__image,
.camel-intro-01.gsap-fallback .camel-intro-01__title,
.camel-intro-01.gsap-fallback .camel-intro-01__slogan,
.camel-intro-01.gsap-fallback .camel-intro-01__desc,
.camel-intro-01.gsap-fallback .camel-intro-01__conclusion {
	opacity: 1;
	transform: none;
	will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
	.camel-intro-01 .camel-intro-01__image,
	.camel-intro-01 .camel-intro-01__title,
	.camel-intro-01 .camel-intro-01__slogan,
	.camel-intro-01 .camel-intro-01__desc,
	.camel-intro-01 .camel-intro-01__conclusion {
		opacity: 1;
		transform: none;
	}
}