/**
 * 크로스 도큐먼트(MPA) 뷰 트랜지션 애니메이션 설정
 */

@view-transition {
	navigation: auto;
}

/* 공통 설정 (깜빡임 방지 및 속도 조절) */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}

/* Forward: 우측에서 좌측으로 */
:root[data-navigation='forward']::view-transition-old(root) {
    animation-name: slide-out-left;
}
:root[data-navigation='forward']::view-transition-new(root) {
    animation-name: slide-in-right;
}

/* Back: 좌측에서 우측으로 */
:root[data-navigation='back']::view-transition-old(root) {
    animation-name: slide-out-right;
}
:root[data-navigation='back']::view-transition-new(root) {
    animation-name: slide-in-left;
}

/* 뒤로가기 애니메이션 (Back: 좌측에서 우측으로) */
:root[data-navigation='back']::view-transition-old(root) {
	animation-name: slide-out-right !important;
}
:root[data-navigation='back']::view-transition-new(root) {
	animation-name: slide-in-left !important;
}

/* --- 키프레임 정의 --- */

/* Forward: 현재 페이지가 왼쪽으로 사라짐 */
@keyframes slide-out-left {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}
/* Forward: 새 페이지가 오른쪽에서 들어옴 */
@keyframes slide-in-right {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

/* Back: 현재 페이지가 오른쪽으로 사라짐 */
@keyframes slide-out-right {
	from { transform: translateX(0); }
	to { transform: translateX(100%); }
}
/* Back: 이전 페이지가 왼쪽에서 들어옴 */
@keyframes slide-in-left {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}