/* ═══════════════════════════════════════════════════════════
   motion-intro.css — 첫 접속 커튼 진입 연출
   명탐정토토(dosiraktoto02) · 2026-09-23 · v6

   화면을 덮은 판 두 장이 가운데에서 갈라지며 열린다.
     PC (1025px~)   가로 이음매 — 위판은 위로, 아래판은 아래로
     모바일 (~1024px) 세로 이음매 — 왼판은 왼쪽으로, 오른판은 오른쪽으로
   세로로 긴 화면에서는 위아래로 여는 것보다 좌우로 여는 쪽이 이동 거리가
   짧고 화면 비율에도 맞는다. 그래서 판 이름은 방향을 안 박고 1·2 로 둔다.

   커튼이 열리는 동안 헤더와 첫 단락이 순서대로 올라온다.

   [컨텐츠 수치의 출처 — mathieu-crepel.com 실측]
   헤드리스로 띄워 첫 화면 요소들의 계산값을 매 프레임 받아 적었다
   (_lib/motion/captures/ref/crepel/).

     큰 글줄     부모 overflow:hidden · 자식 translateY 126px → 0
     페이드      없음. opacity 는 1 그대로다
     지속        700ms
     곡선        cubic-bezier(0.45, 0, 0.55, 1) = power2.inOut
                 표준 곡선 5종 × 지속 6종과 대조해 평균오차 0.93%p 로 최적합
     줄 간 시차   100ms

   핵심은 "페이드가 아니라 마스크" 라는 점이다. 글자가 흐려지며 나타나는 게
   아니라, 글줄 아래에 숨어 있다가 밀려 올라온다. 그리고 곡선이 inOut 이라
   출발이 느긋하다 — out 계열로 바꾸면 성격이 완전히 달라진다.

   ※ 레퍼런스는 기법만 읽었다. 코드·이미지를 가져오지 않았다.

   [레퍼런스 — lebronjames.squarespace.com]
   헤드리스로 띄워 초반 프레임을 찍어 보니, 로드 중간(약 2.2초)에 화면
   한가운데만 가로 띠로 열려 있고 위아래는 남색으로 덮여 있었다.
   그 "가운데에서 위아래로 열리는" 그림을 옮긴 것이다.

   ※ 커튼을 실제로 굴리는 코드는 못 읽었다. 그 사이트는 Squarespace 의
     커스텀 블록(.mn-bb__*) 안에서 도는지, DOM 에 clip-path 도 높이
     애니메이션도 노출되지 않았다. 그래서 여는 시간·곡선은 실측값이
     아니라 우리 판에 맞춰 잡은 값이다 — 아래 :root 에서 조절한다.

   ※ 레퍼런스는 기법만 읽었다. 코드·이미지를 가져오지 않았다.

   [커튼은 <head> 에서 만들어진다]
   include/header.html 의 인라인 스크립트가 판 두 장을 만들어 <html> 에
   직접 붙인다. defer 스크립트로 만들면 컨텐츠가 한 번 보인 뒤에 덮이므로
   첫 페인트 전에 존재해야 한다.

   [안 열린 채로 남지 않는다]
   판과 클래스를 arming 스크립트의 워치독(3.5초)과 js/motion-intro.js 가
   양쪽에서 걷어낸다. 연출이 안 나오는 건 감수해도 화면이 덮인 채
   남는 건 안 된다.

   ※ js/motion-intro.js 와 짝이다. 한쪽만 넣으면 안 된다.
   ═══════════════════════════════════════════════════════════ */


/* ── 0. 공통값 — 조율은 여기만 만진다 ─────────────────────
   시간은 JS 가 이 :root 를 읽어 정리 타이밍을 맞춘다 */
:root {
	--in-curtain:1.10s;        /* 판이 갈라지는 시간 */
	--in-curtain-wait:0.20s;   /* 열기 전 잠깐 멈춤 */
	--in-curtain-bg:#001426;   /* 판 색. style.css 의 info02 배경과 같은 딥네이비 */

	/* 커튼은 마스크 리빌이다 — 시작과 끝이 같이 중요하다.
	   레시피 04 가 그 경우에 지정한 표준 ease-in-out cubic */
	--in-ease-curtain:cubic-bezier(0.65, 0.00, 0.35, 1.00);

	/* ── 커튼 뒤 컨텐츠 (mathieu-crepel.com 실측) ── */
	--in-line:0.70s;                                /* 글줄이 올라오는 시간 */
	--in-step:0.10s;                                /* 줄 간 시차 */
	--in-rise:105%;                                 /* 마스크 아래에서 출발. %는 요소 높이 기준이라 글자 크기를 따라간다 */
	--in-ease-line:cubic-bezier(0.45, 0.00, 0.55, 1.00);   /* power2.inOut */

	/* 마스크가 안 어울리는 것(로고·알약 버튼)은 따로 간다.
	   clip-path inset 은 border-radius 를 무시해서 알약 모서리가 각져 보인다 */
	--in-soft:0.80s;
	--in-soft-rise:14px;
	--in-ease-soft:cubic-bezier(0.33, 1.00, 0.68, 1.00);
}

@media all and (max-width: 1024px) {
	:root {
		--in-curtain:0.90s;
		--in-curtain-wait:0.15s;
		--in-line:0.62s;
		--in-step:0.08s;
		--in-soft:0.70s;
		--in-soft-rise:10px;
	}
}


/* ── 1. 커튼 두 장 (공통) ──────────────────────────────────
   헤더가 z-index 100 이라 그보다 확실히 위에 둔다.
   pointer-events 를 꺼서 열리는 동안 클릭이 막히지 않게 한다.
   transition 은 방향과 무관하므로 여기 한 번만 쓴다 */
html.mo-intro .mo_curtain {
	position:fixed;
	background:var(--in-curtain-bg);
	z-index:9999;
	pointer-events:none;
	will-change:transform;
}
html.mo-intro.mo-play .mo_curtain {
	-webkit-transition:-webkit-transform var(--in-curtain) var(--in-ease-curtain) var(--in-curtain-wait);
	transition:transform var(--in-curtain) var(--in-ease-curtain) var(--in-curtain-wait);
}


/* ── 1-A. PC — 가로 이음매, 위아래로 열린다 ────────────────
   50.5% 로 잡는 이유는 이음매다. 50% 두 장은 홀수 픽셀 높이에서
   가운데에 1px 틈이 비친다. 겹쳐 두면 그 틈이 없다 */
html.mo-intro .mo_curtain {
	left:0;
	width:100%;
	height:50.5%;
}
html.mo-intro .mo_curtain_1 { top:0; }
html.mo-intro .mo_curtain_2 { bottom:0; }

html.mo-intro.mo-play .mo_curtain_1 { transform:translateY(-100%); }
html.mo-intro.mo-play .mo_curtain_2 { transform:translateY(100%); }


/* ── 1-B. 모바일 — 세로 이음매, 좌우로 열린다 ──────────────
   세로로 긴 화면에서는 판이 화면 높이만큼 이동해야 하는 위아래 방식보다
   폭의 절반만 움직이면 되는 좌우 방식이 짧고 자연스럽다.
   top/bottom 을 되돌리지 않으면 PC 규칙이 남아 판이 반만 덮인다 */
@media all and (max-width: 1024px) {
	html.mo-intro .mo_curtain {
		top:0;
		bottom:auto;
		width:50.5%;
		height:100%;
	}
	html.mo-intro .mo_curtain_1 { left:0;    right:auto; }
	html.mo-intro .mo_curtain_2 { left:auto; right:0; }

	html.mo-intro.mo-play .mo_curtain_1 { transform:translateX(-100%); }
	html.mo-intro.mo-play .mo_curtain_2 { transform:translateX(100%); }
}


/* ── 2. 큰 글줄 — 마스크 뒤에서 밀려 올라온다 ──────────────
   레퍼런스의 시그니처. 페이드가 아니라 마스크다.
   바깥(.text_con / .title_con / .info_con)이 창, 안의 span 이 움직이는 글자다.
   span 은 인라인이라 transform 이 안 먹으므로 block 으로 바꾼다 —
   그 요소들은 span 하나만 품고 있어서 레이아웃이 달라지지 않는다.

   [가림을 실제 셀렉터에 직접 거는 이유]
   JS 로 클래스를 붙이는 방식은 이 판에서 안 된다. 클래스를 붙이는 것도
   재생 클래스를 붙이는 것도 전부 첫 페인트 전에 일어나서, 브라우저가
   "이전 값" 을 한 번도 계산하지 못한 채 최종값으로 건너뛴다(실측 확인).
   CSS 에 직접 써 두면 문서를 파싱하는 순간 시작 상태가 확정된다.
   JS 는 transition-delay 만 꽂는다 */
html.mo-intro #main_con > .info01_con > .contents_con > .text01_con > .text_con,
html.mo-intro #main_con > .info01_con > .contents_con > .text02_con .title_con,
html.mo-intro #main_con > .info01_con > .contents_con > .text02_con .info_con {
	overflow:hidden;
}
html.mo-intro #main_con > .info01_con > .contents_con > .text01_con > .text_con > span,
html.mo-intro #main_con > .info01_con > .contents_con > .text02_con .title_con > span,
html.mo-intro #main_con > .info01_con > .contents_con > .text02_con .info_con > span {
	display:block;
	transform:translateY(var(--in-rise));
	will-change:transform;
}
html.mo-intro.mo-play #main_con > .info01_con > .contents_con > .text01_con > .text_con > span,
html.mo-intro.mo-play #main_con > .info01_con > .contents_con > .text02_con .title_con > span,
html.mo-intro.mo-play #main_con > .info01_con > .contents_con > .text02_con .info_con > span {
	transform:translateY(0);
	-webkit-transition:-webkit-transform var(--in-line) var(--in-ease-line);
	transition:transform var(--in-line) var(--in-ease-line);
}


/* ── 3. 썸네일 — 아래에서 위로 열린다 ─────────────────────
   li 안의 .img_con 에는 이미 motion.css 6절이 scale(1.2) 를 걸어 두었다.
   여기서 transform 을 또 쓰면 그게 덮인다. 그래서 clip-path 로 연다 —
   페이드가 없다는 성격은 그대로 지킨다 */
html.mo-intro #main_con > .info01_con > .contents_con > .text01_con > .list_con > ul > li:not(.on) {
	-webkit-clip-path:inset(100% 0 0 0);
	clip-path:inset(100% 0 0 0);
	will-change:clip-path;
}
html.mo-intro.mo-play #main_con > .info01_con > .contents_con > .text01_con > .list_con > ul > li:not(.on) {
	-webkit-clip-path:inset(0 0 0 0);
	clip-path:inset(0 0 0 0);
	-webkit-transition:-webkit-clip-path var(--in-line) var(--in-ease-line);
	transition:clip-path var(--in-line) var(--in-ease-line);
}


/* ── 4. 가로 구분선 ────────────────────────────────────────
   왼쪽에서 오른쪽으로 그어진다 */
html.mo-intro #main_con > .info01_con > .contents_con > .text02_con > table > tbody > tr > .bar_td .bar {
	transform:scaleX(0);
	transform-origin:0 50%;
	will-change:transform;
}
html.mo-intro.mo-play #main_con > .info01_con > .contents_con > .text02_con > table > tbody > tr > .bar_td .bar {
	transform:scaleX(1);
	-webkit-transition:-webkit-transform var(--in-line) var(--in-ease-line);
	transition:transform var(--in-line) var(--in-ease-line);
}


/* ── 5. 로고·알약 버튼 — 마스크 대신 살짝 떠오른다 ─────────
   clip-path inset 은 border-radius 를 무시해서 알약 모서리가 각져 보이고,
   로고는 마스크로 자르면 잘린 티가 난다. 이 둘만 페이드+미세 이동으로 간다.
   .btn_con 은 translateY(-50%) 로 세로 중앙을 잡고 있어(style.css)
   그 값을 유지한 채 더한다 */
html.mo-intro #header > .contents_con > .logo_con,
html.mo-intro #main_con > .info01_con > .contents_con > .text02_con > table > tbody > tr > .btn_td > .a_btn,
html.mo-intro #main_con > .info01_con > .contents_con > .text02_con .btn_con.m_con {
	opacity:0;
	transform:translateY(var(--in-soft-rise));
	will-change:transform, opacity;
}
html.mo-intro.mo-play #header > .contents_con > .logo_con,
html.mo-intro.mo-play #main_con > .info01_con > .contents_con > .text02_con > table > tbody > tr > .btn_td > .a_btn,
html.mo-intro.mo-play #main_con > .info01_con > .contents_con > .text02_con .btn_con.m_con {
	opacity:1;
	transform:translateY(0);
	-webkit-transition:opacity var(--in-soft) var(--in-ease-soft), -webkit-transform var(--in-soft) var(--in-ease-soft);
	transition:opacity var(--in-soft) var(--in-ease-soft), transform var(--in-soft) var(--in-ease-soft);
}

html.mo-intro #header > .contents_con > .btn_con {
	opacity:0;
	transform:translateY(calc(-50% + var(--in-soft-rise)));
	will-change:transform, opacity;
}
html.mo-intro.mo-play #header > .contents_con > .btn_con {
	opacity:1;
	transform:translateY(-50%);
	-webkit-transition:opacity var(--in-soft) var(--in-ease-soft), -webkit-transform var(--in-soft) var(--in-ease-soft);
	transition:opacity var(--in-soft) var(--in-ease-soft), transform var(--in-soft) var(--in-ease-soft);
}


/* ── 6. 동작 줄이기 ────────────────────────────────────────
   레시피 01. 끄지 않고 "움직임만" 뺀다. 회사 지급 PC 는 윈도우 성능
   옵션 때문에 이 값이 켜져 있는 경우가 잦아서, 통째로 빼면
   "아무 반응이 없다" 는 신고가 들어온다.
   커튼은 그대로 두되 아주 짧게 지나간다 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--in-curtain:0.35s;
		--in-curtain-wait:0s;
		--in-ease-curtain:linear;
		--in-line:0.30s;
		--in-step:0.04s;
		--in-rise:0%;
		--in-soft:0.30s;
		--in-soft-rise:0px;
	}
	html.mo-intro #header > .contents_con > .btn_con,
	html.mo-intro.mo-play #header > .contents_con > .btn_con {
		transform:translateY(-50%);
	}
}