/* ==========================================================================
   base/reveal.css — 계단식 리빌(2026-10-12 사용자 지시 "모든 페이지" · 시안에 없는 동작)
   --------------------------------------------------------------------------
   ★ 대상 목록은 inc/reveal.php 한 곳 — 숨김 규칙(`html.c4-reveal-on <대상>:not(.c4-revealed) { opacity: 0 }`)은
     assets.php 가 그 목록으로 만들어 이 파일 뒤에 붙인다. 여기에는 나타나는 모양만.
   ★ transition 이 아니라 animation 이다 — 대상이 원래 가진 transition(호버 색 등)을 덮어쓰지 않게.
     fill 은 backwards(기다리는 동안만 첫 장면) — 끝나면 요소 본래 값으로 돌아가 이후 상태 변화(opacity 등)를 막지 않는다.
   ★ 덩어리 움직임은 transform 이 아니라 translate 속성 — 대상이 원래 쓰는 transform 과 겹치지 않는다.
   ★ 늦춤(--c4-reveal-delay)은 reveal.js 가 요소마다 style 로 준다(같이 들어온 순서 × --c4-reveal-step).
   ★ 제목 · 탭 줄은 대상이 아니다(사용자 지시 — 제목은 한 글자씩 효과를 넣었다가 뺐고, 탭 줄도 2026-10-13 뺐다 · inc/reveal.php).
   ========================================================================== */

@media screen {
	html.c4-reveal-on .c4-revealed {
		animation: c4-reveal var(--c4-reveal-dur) var(--c4-reveal-ease) var(--c4-reveal-delay, 0s) backwards;
	}

	/* 처음부터 화면 위쪽(이미 지나간 곳)에 있던 것 — 움직임 없이 바로. */
	html.c4-reveal-on .c4-revealed.c4-reveal-now { animation: none; }
}

@keyframes c4-reveal {
	from {
		opacity: 0;
		translate: 0 var(--c4-reveal-shift);
	}
}

/* ==========================================================================
   한 줄씩 떠오르는 큰 제목 — 소개 상단 · 메인 히어로가 같이 쓴다(2026-10-13 about.css 에서 옮김 · 마크업 inc/about.php `c4_about_split_lines()`).
   ========================================================================== */

/* 한 줄씩 흐릿하게 아래에서 떠오르는 제목 — 떠오르는 모양은 agency.codenumber4.com 첫 화면 제목과 같다(2026-10-12 사용자 지시 · 시안에 없는 동작).
   처음엔 한 글자씩이었고 2026-10-13 사용자 지시("한 글자씩 말고 한 줄씩")로 줄 단위가 됐다.
   마크업은 inc/about.php `c4_about_split_lines()` 가 서버에서 나눈다(관리 칸의 줄마다 span · 순번 `--c4-line`). JS 없음 — 화면을 열자마자 움직인다.
   ★ 줄은 block — <br> 로 나눴을 때와 줄바꿈 · 높이 · 가운데 정렬이 같다(한 줄이 화면 폭 때문에 접히면 그 둘이 같이 떠오른다).
   ★ fill backwards — 기다리는 동안만 첫 장면(투명 · 흐림 · 아래), 끝나면 요소 본래 값. '동작 줄이기'는 움직임 없이 그대로. */
.c4-split__line { display: block; }

@media (prefers-reduced-motion: no-preference) {
	.c4-split__line {
		animation: c4-split-in var(--c4-split-dur) var(--c4-split-ease) calc((var(--c4-line) + var(--c4-split-offset, 0)) * var(--c4-split-step) - var(--c4-split-lead)) backwards;   /* − lead: 2026-10-14 '첫 시작 타이밍 앞당겨' */
	}

	/* 제목 앞뒤 글(라벨 · 작은 설명)도 같은 모양으로 순서대로 — 위에서 아래로 1, 2, 3(2026-10-13 사용자 지시 · 소개 상단 'Philosophy → 큰 제목 → 설명').
	   순번은 마크업이 준다: 요소의 --c4-line(몇 번째인지) · 제목의 --c4-split-offset(제목 앞에 몇 개가 먼저 나오는지). 리빌(reveal.js) 대상이 아니다. */
	.c4-split-seq {
		animation: c4-split-in var(--c4-split-dur) var(--c4-split-ease) calc(var(--c4-line, 0) * var(--c4-split-step) - var(--c4-split-lead)) backwards;
	}

	/* 팝업이 떠 있는 동안 멈춤 — 팝업을 닫으면(popup.js 가 c4-split-hold 를 뗀다) 그때 위 애니메이션이 처음부터(2026-10-15 사용자 지시 '팝업을 끄면 그때 계단식 리빌 · 팝업 없으면 바로').
	   ★ animation: none 으로 둔다 — 멈춤(paused)은 앞당긴 시작(− lead)만큼 이미 진행된 모습으로 멈춰 첫 줄이 반쯤 보였다. none → 원래 값으로 돌아오면 새로 시작한다. */
	.c4-split-hold .c4-split__line,
	.c4-split-hold .c4-split-seq {
		animation: none;
		opacity: 0;
	}
}

@keyframes c4-split-in {
	from {
		opacity: 0;
		filter: blur(var(--c4-split-blur));
		translate: 0 var(--c4-split-shift);
	}
}