/* ==========================================================================
   MODULE: base/motion
   페이지 전역 모션. 크게 세 갈래다.

   1) [data-wzs-reveal]      — assets/js/modules/scroll-reveal.js 가 .is-visible 을 토글하는
                               기존 방식. 마크업에 속성이 직접 박혀 있는 곳(자료실 탭, 문의
                               페이지, 글 목록 등)에서 계속 쓴다.
   2) 스크롤 연동 등장        — 아래 "자동 등장" 블록. JS 없이 CSS 스크롤 타임라인
                               (animation-timeline: view())으로 처리한다. 마크업을 건드리지
                               않고 선택자 목록만으로 적용되며, 지원하지 않는 브라우저에서는
                               @supports 밖이라 아무 일도 일어나지 않는다(= 항상 보임).
                               JS가 죽어도 콘텐츠가 사라지지 않는 게 이 방식의 장점.
   3) 히어로 첫 진입          — 스크롤과 무관하게 로드 직후 한 번.

   왜 transform 이 아니라 translate 인가:
     카드/버튼 hover 가 transform 을 쓰는데, 애니메이션은 캐스케이드에서 일반 선언을
     이기기 때문에 여기서 transform 을 쓰면 hover 가 통째로 먹통이 된다.
     translate 는 독립 속성이라 transform 과 따로 놀아 서로 간섭하지 않는다.
     여기 있는 등장 효과에 transform 을 쓰지 말 것.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) JS 방식 (기존 마크업 호환)
   -------------------------------------------------------------------------- */
[data-wzs-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--wzs-duration-slow) var(--wzs-ease),
		transform var(--wzs-duration-slow) var(--wzs-ease);
}

[data-wzs-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

[data-wzs-reveal="fade"] {
	transform: none;
}

/* 좌/우에서 슬라이드해 들어오는 변형 — 스크롤하며 콘텐츠가 옆에서 나타나는 효과가
   필요한 곳(회사소개/서비스안내처럼 섹션이 번갈아 나오는 페이지)에 쓴다.
   data-wzs-reveal="left"|"right" 값만 다르고 JS 쪽은 그대로(속성 유무만 봄). */
[data-wzs-reveal="left"] {
	transform: translateX(-32px);
}

[data-wzs-reveal="right"] {
	transform: translateX(32px);
}

[data-wzs-reveal="left"].is-visible,
[data-wzs-reveal="right"].is-visible {
	transform: none;
}

/* 자식 요소를 순차적으로 리빌하고 싶을 때: data-wzs-reveal-group + 자식에 --i 커스텀 프로퍼티 */
[data-wzs-reveal-group] [data-wzs-reveal] {
	transition-delay: calc(var(--i, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
	[data-wzs-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   2) 자동 등장 — 스크롤에 따라 아래에서 떠오른다 (CSS 스크롤 타임라인)

   대상 추가/제외는 아래 선택자 목록만 고치면 된다. 마크업에는 손댈 필요 없다.
   범위(animation-range)를 바꾸면 "언제 다 나타나는지"가 바뀐다:
     entry 8%   = 요소 윗변이 화면 아래에서 조금 올라온 시점부터
     entry 65%  = 요소가 65% 쯤 들어온 시점에 완전히 나타남 (더 키우면 늦게 나타남)
   -------------------------------------------------------------------------- */
@keyframes wzs-rise {
	from {
		opacity: 0;
		translate: 0 22px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.wzs-section-head,
		.wzs-card,
		.wzs-door,
		.wzs-tier,
		.wzs-checklist-group,
		.wzs-history-item,
		.wzs-popular-post,
		.wzs-magazine-card,
		.wzs-service-line,
		.wzs-statement-block,
		.wzs-trio-item,
		.wzs-faq-item,
		.wzs-cert-card,
		.wzs-report-teaser,
		.wzs-sell-quote,
		.wzs-tiers-note,
		.wzs-anything-call,
		.wzs-pricing-closing,
		.wzs-answer {
			animation: wzs-rise linear both;
			animation-timeline: view();
			animation-range: entry 8% entry 65%;
		}

		/* 한 줄에 여러 장이 동시에 튀어나오면 산만해서, 그리드 안에서는 순서대로 조금씩
		   늦춘다. 스크롤 타임라인에는 animation-delay 가 먹지 않으므로 시작 지점을 민다. */
		.wzs-hero-trust-grid > *,
		.wzs-checklist-groups > *,
		.wzs-quad-grid > *,
		.wzs-hero-popular-grid > *,
		.wzs-cert-grid > *,
		.wzs-service-lines > *,
		.wzs-tiers > * {
			animation-range: entry calc(8% + var(--wzs-stagger, 0%)) entry calc(65% + var(--wzs-stagger, 0%));
		}

		.wzs-hero-trust-grid > :nth-child(2),
		.wzs-checklist-groups > :nth-child(2),
		.wzs-quad-grid > :nth-child(2),
		.wzs-hero-popular-grid > :nth-child(2),
		.wzs-cert-grid > :nth-child(2),
		.wzs-service-lines > :nth-child(2),
		.wzs-tiers > :nth-child(2) {
			--wzs-stagger: 7%;
		}

		.wzs-hero-trust-grid > :nth-child(3),
		.wzs-checklist-groups > :nth-child(3),
		.wzs-quad-grid > :nth-child(3),
		.wzs-hero-popular-grid > :nth-child(3),
		.wzs-cert-grid > :nth-child(3),
		.wzs-service-lines > :nth-child(3),
		.wzs-tiers > :nth-child(3) {
			--wzs-stagger: 14%;
		}

		.wzs-hero-trust-grid > :nth-child(n + 4),
		.wzs-checklist-groups > :nth-child(n + 4),
		.wzs-quad-grid > :nth-child(n + 4),
		.wzs-hero-popular-grid > :nth-child(n + 4),
		.wzs-cert-grid > :nth-child(n + 4),
		.wzs-service-lines > :nth-child(n + 4),
		.wzs-tiers > :nth-child(n + 4) {
			--wzs-stagger: 21%;
		}
	}
}

/* --------------------------------------------------------------------------
   3) 히어로 첫 진입 — 로드 직후 한 번만. 스크롤 타임라인이 아니라 일반 애니메이션이라
      지원 여부와 무관하게 동작한다. 첫인상 구간이므로 여기만 예외적으로 시간차를 준다.
   -------------------------------------------------------------------------- */
@keyframes wzs-hero-in {
	from {
		opacity: 0;
		translate: 0 18px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.wzs-hero-hook-title,
	.wzs-hero-hook-sub,
	.wzs-hero-hook .wzs-cta-row {
		animation: wzs-hero-in var(--wzs-duration-slow) var(--wzs-ease) both;
	}

	.wzs-hero-hook-sub {
		animation-delay: 120ms;
	}

	.wzs-hero-hook .wzs-cta-row {
		animation-delay: 240ms;
	}
}