/*
 * 북촌무궁화 V1.02 - 섹션 주요 콘텐츠 등장 효과
 * 기존 style.css / 기존 카운터·그래프·갤러리 모션은 변경하지 않음.
 * JS가 선택한 주요 요소에만 클래스 적용, 한 번 나타나면 그대로 유지.
 */
.rzo-reveal {
	--rzo-reveal-x: 0px;
	--rzo-reveal-y: 34px;
	--rzo-reveal-delay: 0ms;
	opacity: 0;
	transform: translate3d(var(--rzo-reveal-x), var(--rzo-reveal-y), 0);
	transition: opacity 850ms ease var(--rzo-reveal-delay),
		transform 1000ms cubic-bezier(.22, 1, .36, 1) var(--rzo-reveal-delay);
}
.rzo-reveal.rzo-reveal-from-left {
	--rzo-reveal-x: -56px;
	--rzo-reveal-y: 12px;
}
.rzo-reveal.rzo-reveal-from-right {
	--rzo-reveal-x: 56px;
	--rzo-reveal-y: 12px;
}
.rzo-reveal.rzo-reveal-is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
@media (max-width: 750px) {
	.rzo-reveal.rzo-reveal-from-left { --rzo-reveal-x: -30px; --rzo-reveal-y: 8px; }
	.rzo-reveal.rzo-reveal-from-right { --rzo-reveal-x: 30px; --rzo-reveal-y: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.rzo-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* V1.03: margin 섹션 중앙 VS - 양쪽 카드 등장 후 충돌감 있는 중앙 착지 */
.rzo-reveal.rzo-reveal-impact {
	position: relative;
	z-index: 5;
	opacity: 0;
	transform: translate3d(0, -42px, 0) scale(1.75);
	transition: none;
}
.rzo-reveal.rzo-reveal-impact.rzo-reveal-is-visible {
	animation: rzo-reveal-vs-impact 820ms cubic-bezier(.2, .8, .3, 1) var(--rzo-reveal-delay) both;
}
@keyframes rzo-reveal-vs-impact {
	0%   { opacity:0; transform: translate3d(0,-42px,0) scale(1.75); }
	48%  { opacity:1; transform: translate3d(0,6px,0) scale(.87); }
	67%  { opacity:1; transform: translate3d(0,-5px,0) scale(1.10); }
	84%  { opacity:1; transform: translate3d(0,2px,0) scale(.97); }
	100% { opacity:1; transform: translate3d(0,0,0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.rzo-reveal.rzo-reveal-impact.rzo-reveal-is-visible {
		animation: none !important;
	}
}

/* V1.03: 인트로·메뉴 장식 이미지는 최초 화면에서도 확실히 모션 실행.
   CSS 전환 대신 등장 시 키프레임을 사용해 브라우저 첫 페인트 시점을 타지 않음. */
.rzo-reveal.rzo-reveal-art { transition: none; }
.rzo-reveal.rzo-reveal-art.rzo-reveal-is-visible.rzo-reveal-from-left {
	animation: rzo-reveal-art-left 1050ms cubic-bezier(.22,1,.36,1) var(--rzo-reveal-delay) both;
}
.rzo-reveal.rzo-reveal-art.rzo-reveal-is-visible.rzo-reveal-from-right {
	animation: rzo-reveal-art-right 1050ms cubic-bezier(.22,1,.36,1) var(--rzo-reveal-delay) both;
}
@keyframes rzo-reveal-art-left {
	from { opacity:0; transform:translate3d(-70px,14px,0); }
	to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes rzo-reveal-art-right {
	from { opacity:0; transform:translate3d(70px,14px,0); }
	to { opacity:1; transform:translate3d(0,0,0); }
}
@media (max-width:750px) {
	/* 모바일에서는 이동량만 줄이고 동일한 400px 기준 디자인을 유지. */
	@keyframes rzo-reveal-art-left {
		from { opacity:0; transform:translate3d(-34px,8px,0); }
		to { opacity:1; transform:translate3d(0,0,0); }
	}
	@keyframes rzo-reveal-art-right {
		from { opacity:0; transform:translate3d(34px,8px,0); }
		to { opacity:1; transform:translate3d(0,0,0); }
	}
}
@media (prefers-reduced-motion: reduce) {
	.rzo-reveal.rzo-reveal-art.rzo-reveal-is-visible { animation:none !important; }
}