/* ---------- page ---------- */

:root {
	--bg: #0c0c0e;
	--text: #f4f4f5;
	--muted: #8b8b93;
	--hover: #ffffff12;
	--accent: #ff8a1f;
	/* 애니메이션 영역 배경색, 글자색 */
	--paper: #17171a;
	--ink: #f4f4f5;
	--ring: #ffffff1a;
	--shadow: 0 30px 80px -30px #000;

	--ui: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
	--sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--serif: Georgia, "Times New Roman", serif;
	--pad: clamp(20px, 4.5vw, 64px);
	--gap: clamp(28px, 6vw, 88px);
}
@media (prefers-color-scheme: light) {
	:root {
		--bg: #f3f3f1;
		--text: #111113;
		--muted: #77777f;
		--hover: #0000000d;
		--accent: #e56a00;
		--paper: #fff;
		--ink: #0b0b0d;
		--ring: #00000014;
		--shadow: 0 30px 80px -40px #0006;
	}
}
:root {
	--ink-mid: color-mix(in srgb, var(--ink) 65%, var(--paper));
	--ink-soft: color-mix(in srgb, var(--ink) 34%, var(--paper));
	--seam: color-mix(in srgb, var(--ink) 80%, var(--paper));
}

*, ::before, ::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.4 var(--ui);
	-webkit-font-smoothing: antialiased;
}

.t { position: fixed; top: 0; left: 0; }

/* 왼쪽 열과 애니메이션 영역을 묶어서 화면 중앙에 배치 */
.page {
	display: grid;
	grid-template-columns: minmax(230px, 320px) min(640px, 100dvh - 2 * var(--pad), 100vw - 2 * var(--pad) - var(--gap) - 250px);
	justify-content: center;
	align-content: center;
	gap: 20px var(--gap);
	min-height: 100dvh;
	padding: var(--pad);
}
/* 애니메이션 영역과 높이를 맞춤 (제목은 위, 크레딧은 아래) */
.side {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.side footer { margin-top: auto; }

header { grid-area: head; }
h1 {
	margin: -.08em 0 0;
	font-size: clamp(40px, 5.2vw, 68px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.045em;
}
h1 span { color: var(--accent); }

.links {
	grid-area: nav;
	align-self: start;
	display: grid;
	gap: 2px;
	margin: 0 -12px;
	counter-reset: n;
}
.links a {
	display: grid;
	grid-template-columns: 2.4em 1fr;
	align-items: baseline;
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--muted);
	font-weight: 500;
	letter-spacing: -.01em;
	text-decoration: none;
	counter-increment: n;
	transition: color .15s, background-color .15s;
}
.links a::before {
	content: counter(n, decimal-leading-zero);
	font: 500 12px ui-monospace, "SF Mono", Consolas, monospace;
	opacity: .7;
	transition: color .15s;
}
.links a:hover { color: var(--text); background: var(--hover); }
.links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 선택된 항목 (해시가 없으면 첫 번째) */
:root:not(:has(.t:target)) .links a[href="#1"],
:root:has([id="1"]:target) .links a[href="#1"],
:root:has([id="2"]:target) .links a[href="#2"],
:root:has([id="3"]:target) .links a[href="#3"],
:root:has([id="4"]:target) .links a[href="#4"],
:root:has([id="5"]:target) .links a[href="#5"],
:root:has([id="6"]:target) .links a[href="#6"],
:root:has([id="7"]:target) .links a[href="#7"],
:root:has([id="8"]:target) .links a[href="#8"],
:root:has([id="9"]:target) .links a[href="#9"],
:root:has([id="10"]:target) .links a[href="#10"],
:root:has([id="11"]:target) .links a[href="#11"] {
	color: var(--text);
	background: var(--hover);
	font-weight: 700;
}
:root:not(:has(.t:target)) .links a[href="#1"]::before,
:root:has([id="1"]:target) .links a[href="#1"]::before,
:root:has([id="2"]:target) .links a[href="#2"]::before,
:root:has([id="3"]:target) .links a[href="#3"]::before,
:root:has([id="4"]:target) .links a[href="#4"]::before,
:root:has([id="5"]:target) .links a[href="#5"]::before,
:root:has([id="6"]:target) .links a[href="#6"]::before,
:root:has([id="7"]:target) .links a[href="#7"]::before,
:root:has([id="8"]:target) .links a[href="#8"]::before,
:root:has([id="9"]:target) .links a[href="#9"]::before,
:root:has([id="10"]:target) .links a[href="#10"]::before,
:root:has([id="11"]:target) .links a[href="#11"]::before,
.links a:is(:hover, :focus-visible)::before { color: var(--accent); opacity: 1; }

footer {
	grid-area: foot;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.7;
}
footer p { margin: 0; }
footer a { color: inherit; text-underline-offset: 2px; }
footer a:hover { color: var(--text); }

/* ---------- stage ---------- */

.stage {
	align-self: start;
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	container-type: inline-size;
	background: var(--paper);
	color: var(--ink);
	border-radius: clamp(16px, 2.4vw, 28px);
	box-shadow: 0 0 0 1px var(--ring), var(--shadow);
}
/* 모든 치수는 cqw(.stage 폭의 1%) 기준 */
.scene {
	position: absolute;
	inset: 0;
	display: none;
	place-items: center;
	overflow: hidden;
	font: 700 10cqw/1 var(--sans);
	/* 커닝이 있으면 글자 간격이 어긋나서 반복될 때 튐 */
	font-kerning: none;
}
:root:not(:has(.t:target)) .s1,
:root:has([id="1"]:target) .s1,
:root:has([id="2"]:target) .s2,
:root:has([id="3"]:target) .s3,
:root:has([id="4"]:target) .s4,
:root:has([id="5"]:target) .s5,
:root:has([id="6"]:target) .s6,
:root:has([id="7"]:target) .s7,
:root:has([id="8"]:target) .s8,
:root:has([id="9"]:target) .s9,
:root:has([id="10"]:target) .s10,
:root:has([id="11"]:target) .s11 { display: grid; }
.scene :is(p, b, i) { margin: 0; font-style: normal; }

@media (max-width: 820px) {
	.page {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "stage" "nav" "foot";
		align-content: start;
		min-height: 0;
	}
	.side { display: contents; }
	/* 목록을 스크롤해도 애니메이션 영역은 상단에 고정 */
	.stage {
		grid-area: stage;
		position: sticky;
		top: 12px;
		z-index: 1;
		justify-self: center;
		width: min(100%, 100dvh - 24px);
		box-shadow: 0 0 0 1px var(--ring), 0 0 0 12px var(--bg), 0 24px 40px -24px var(--bg);
	}
	.links a { padding: 12px; }
}

/* ---------- 1. 일이 너무 많다 ---------- */
/* 정지: 회색 줄, 왼쪽 위 작은 글자, 가운데 작은 글자
   이동: 굵은 열(위), 아래 외곽선 줄(오른쪽), 큰 외곽선 1(상하), 오른쪽 위 작은 글자(깜빡임) */

.s1 p { position: absolute; white-space: nowrap; }
.s1 .g {
	font: italic 300 10.8cqw/1 var(--sans);
	color: var(--ink-soft);
}
.s1 .g1 { left: 2cqw; top: -.5cqw; }
.s1 .g2 { left: 1cqw; top: 20.5cqw; }
.s1 .g3 { left: 2cqw; top: 40.5cqw; }
.s1 .g4 { left: -1cqw; top: 60.5cqw; }
.s1 .g5 { left: 15cqw; top: 79cqw; }
.s1 .small {
	left: 3cqw; top: 17cqw;
	font: italic 700 3.3cqw/1.32 var(--sans);
}
.s1 .row {
	left: -5.5cqw; top: 70.5cqw;
	font-size: 28cqw;
	letter-spacing: 2.4cqw;
	color: #0000;
	-webkit-text-stroke: .4cqw var(--ink);
	animation: s1-row 1s linear infinite;
}
.s1 .big {
	font-size: 50cqw;
	color: var(--paper);
	-webkit-text-stroke: 1cqw var(--ink);
	rotate: -15deg;
	animation: s1-bob 1s linear infinite;
}
.s1 .b1 { left: -11cqw; top: 41cqw; }
.s1 .b2 { left: 18cqw; top: 32cqw; }
.s1 .bold {
	left: 45cqw; top: .5cqw; width: 9.3ch;
	font-size: 10.8cqw; line-height: 1.2;
	white-space: normal;
	overflow-wrap: anywhere;
	animation: s1-bold .5s linear infinite;
}
.s1 .drip {
	left: 53cqw; top: 34.5cqw; width: 26cqw;
	font: italic 700 2.6cqw/1.6 var(--sans);
	text-align: center;
}
.s1 .ghost {
	left: 72cqw; top: 3cqw;
	font: italic 700 3.3cqw/1.32 var(--sans);
	animation: s1-ghost 1s linear infinite;
}
/* 8글자 줄의 1/8 = 한 글자 간격 */
@keyframes s1-row { from { transform: translateX(-12.5%); } to { transform: translateX(0); } }
@keyframes s1-bold { to { transform: translateY(-1.2em); } }
@keyframes s1-bob {
	0%, 90%, 100% { translate: 0 0; }
	40%, 60% { translate: 0 1cqw; }
}
@keyframes s1-ghost { 0%, 5%, 85%, 100% { opacity: 0; } 45%, 55% { opacity: 1; } }

/* ---------- 2. 일이 많이 남았다 ---------- */

@property --t { syntax: "<number>"; inherits: true; initial-value: 0; }

.s2 .grid {
	display: grid;
	grid-template-columns: repeat(7, auto);
	font-size: 15.5cqw; font-weight: 900; line-height: .93;
	animation: s2-tick 5.6s linear infinite;
}
/* --t가 --i를 넘으면 사라짐. 끝나면 되감기 */
.s2 i { opacity: calc((var(--i) - var(--t)) * 2); }
@keyframes s2-tick {
	0% { --t: 0; }
	61%, 92% { --t: 34; }
	100% { --t: 0; }
}

/* ---------- 3. 일이 점점 늘어난다 ---------- */

/* 가로를 72%로 줄인 상태에서 시작해 좌우로 늘어남 */
.s3 b {
	font-size: 49cqw;
	translate: 1.75cqw -1.15cqw;
	transform-origin: 49.2% 50%;
	animation: s3-stretch 2.4s infinite;
}
@keyframes s3-stretch {
	0% { transform: scaleX(.72); opacity: 0; }
	7%, 22% {
		transform: scaleX(.72); opacity: 1;
		animation-timing-function: linear(0, .033 12.5%, .078 25%, .14 37.5%, .224 50%, .339 62.5%, .495 75%, .709 87.5%, 1);
	}
	86% { transform: scaleX(8.64); opacity: 1; }
	96%, 100% { transform: scaleX(8.64); opacity: 0; }
}

/* ---------- 4. 일이 줄어들지 않는다 ---------- */

.s4 p { font-size: 29cqw; }
.s4 i {
	display: inline-block;
	transform-origin: 50% 62%;
	animation: s4-shrink 3.2s infinite;
}
.s4 i:nth-of-type(2) { animation-delay: .08s; }
.s4 i:nth-of-type(3) { animation-delay: .16s; }
@keyframes s4-shrink {
	0% { transform: scale(1); opacity: 0; }
	6%, 12% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
	44%, 88% { transform: scale(.24); opacity: 1; }
	95% { transform: scale(.24); opacity: 0; animation-timing-function: steps(1); }
	95.1%, 100% { transform: scale(1); opacity: 0; }
}

/* ---------- 5. 일이 터졌다 ---------- */
/* 떨다가 움츠림 → 화면 반전 + 폭발 중심 + 충격파 → 파편과 연기 → 빈 화면 */

.s5 .bomb {
	--boom: 3s;
	position: relative;
	display: grid;
	place-items: center;
	font-size: 46cqw; font-weight: 900;
	animation: s5-shake var(--boom) infinite;
}
.s5 .bomb > * { grid-area: 1 / 1; }
/* 효과는 모두 화면 중앙 기준 */
.s5 .bomb > span, .s5 em {
	position: absolute;
	left: 50%; top: 50%;
	translate: -50% -50%;
	opacity: 0;
}
/* 터지는 순간 화면 전체를 잠깐 반전 */
.s5 .flash {
	width: 220cqw; height: 220cqw;
	background: #fff;
	mix-blend-mode: difference;
	animation: s5-flash var(--boom) infinite;
}
.s5 .ring {
	width: 96cqw; aspect-ratio: 1;
	border: 2.4cqw solid var(--ink-mid);
	border-radius: 50%;
	animation: s5-ring var(--boom) infinite;
}
.s5 .ring + .ring { border-width: 1cqw; animation-delay: .07s; }
/* 폭발 중심: 가장자리가 흐린 원이 순식간에 커졌다 사라짐 */
.s5 .burst {
	width: 90cqw; height: 90cqw;
	border-radius: 50%;
	background: radial-gradient(closest-side, var(--ink) 30%, color-mix(in srgb, var(--ink) 55%, #0000) 55%, #0000 100%);
	animation: s5-burst var(--boom) infinite;
}
/* 사방으로 튀는 작은 점들 */
.s5 .dust {
	width: 1.6cqw; height: 1.6cqw;
	border-radius: 50%;
	color: var(--ink);
	box-shadow:
		30cqw -8cqw, -26cqw -19cqw 0 .3cqw, 12cqw 31cqw, -33cqw 9cqw 0 -.3cqw, 21cqw -27cqw 0 .2cqw,
		-9cqw -34cqw, -20cqw 26cqw 0 .4cqw, 35cqw 14cqw 0 -.2cqw, 3cqw -22cqw 0 -.4cqw, -14cqw 14cqw;
	animation: s5-dust var(--boom) infinite;
}
/* 연기: 가장자리가 흐린 덩어리 */
.s5 em {
	width: var(--d); height: var(--d);
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--ink) 30%, #0000) 20%, #0000 100%);
	animation: s5-smoke var(--boom) infinite;
	animation-delay: var(--w, 0s);
}
.s5 em:nth-of-type(1) { --d: 52cqw; --x: -16cqw; --y: -20cqw; }
.s5 em:nth-of-type(2) { --d: 64cqw; --x: 15cqw;  --y: -26cqw; --w: .05s; }
.s5 em:nth-of-type(3) { --d: 44cqw; --x: -27cqw; --y: -2cqw;  --w: .09s; }
.s5 em:nth-of-type(4) { --d: 48cqw; --x: 26cqw;  --y: -6cqw;  --w: .03s; }
.s5 em:nth-of-type(5) { --d: 60cqw; --x: -4cqw;  --y: -34cqw; --w: .12s; }
.s5 em:nth-of-type(6) { --d: 40cqw; --x: 6cqw;   --y: 12cqw;  --w: .07s; }
/* 기울임꼴이라 글자가 오른쪽으로 치우치므로 중앙으로 보정 */
.s5 b, .s5 i { position: relative; left: -4.15cqw; top: -1.5cqw; padding: 0 .12em; font-style: italic; }
.s5 b { animation: s5-whole var(--boom) infinite; }
.s5 i {
	clip-path: polygon(var(--c));
	opacity: 0;
	animation: s5-fly var(--boom) infinite, s5-drop var(--boom) infinite;
}
.s5 i::before { content: "1"; }
/* 몇 조각은 화면 앞으로 날아오듯 커짐 */
.s5 i:nth-of-type(3n) { --s: 1.9; }
.s5 i:nth-of-type(4n + 1) { --s: .7; }
.s5 i:nth-of-type(1)  { --c: 0 0, 50% 0, 0 25%;             --x: -30cqw; --y: -42cqw; --r: -80deg; }
.s5 i:nth-of-type(2)  { --c: 50% 0, 50% 25%, 0 25%;         --x: -12cqw; --y: -50cqw; --r: 60deg; }
.s5 i:nth-of-type(3)  { --c: 50% 0, 100% 0, 100% 25%;       --x: 28cqw;  --y: -52cqw; --r: 120deg; }
.s5 i:nth-of-type(4)  { --c: 50% 0, 100% 25%, 50% 25%;      --x: 14cqw;  --y: -36cqw; --r: -50deg; }
.s5 i:nth-of-type(5)  { --c: 0 25%, 50% 25%, 50% 50%;       --x: -40cqw; --y: -18cqw; --r: 90deg; }
.s5 i:nth-of-type(6)  { --c: 0 25%, 50% 50%, 0 50%;         --x: -54cqw; --y: -6cqw;  --r: -120deg; }
.s5 i:nth-of-type(7)  { --c: 50% 25%, 100% 25%, 50% 50%;    --x: 30cqw;  --y: -20cqw; --r: 70deg; }
.s5 i:nth-of-type(8)  { --c: 100% 25%, 100% 50%, 50% 50%;   --x: 52cqw;  --y: -8cqw;  --r: -90deg; }
.s5 i:nth-of-type(9)  { --c: 0 50%, 50% 50%, 0 75%;         --x: -50cqw; --y: 10cqw;  --r: 110deg; }
.s5 i:nth-of-type(10) { --c: 50% 50%, 50% 75%, 0 75%;       --x: -26cqw; --y: 22cqw;  --r: -60deg; }
.s5 i:nth-of-type(11) { --c: 50% 50%, 100% 50%, 100% 75%;   --x: 46cqw;  --y: 14cqw;  --r: 80deg; }
.s5 i:nth-of-type(12) { --c: 50% 50%, 100% 75%, 50% 75%;    --x: 24cqw;  --y: 26cqw;  --r: -130deg; }
.s5 i:nth-of-type(13) { --c: 0 75%, 50% 75%, 50% 100%;      --x: -18cqw; --y: 44cqw;  --r: 50deg; }
.s5 i:nth-of-type(14) { --c: 0 75%, 50% 100%, 0 100%;       --x: -38cqw; --y: 40cqw;  --r: -100deg; }
.s5 i:nth-of-type(15) { --c: 50% 75%, 100% 75%, 50% 100%;   --x: 12cqw;  --y: 52cqw;  --r: 140deg; }
.s5 i:nth-of-type(16) { --c: 100% 75%, 100% 100%, 50% 100%; --x: 36cqw;  --y: 42cqw;  --r: -70deg; }
/* 점점 세게 떨다가 움츠린 뒤 터짐 */
@keyframes s5-whole {
	0% { opacity: 0; transform: none; }
	5%, 12% { opacity: 1; transform: none; }
	15% { transform: translate(.5cqw, -.3cqw) rotate(-1deg); }
	17% { transform: translate(-.7cqw, .3cqw) rotate(1.4deg); }
	19% { transform: translate(.9cqw, .3cqw) rotate(-1.8deg) scale(1.02); }
	21% { transform: translate(-1.1cqw, -.5cqw) rotate(2.2deg) scale(1.04); }
	23% { transform: translate(1.3cqw, .5cqw) rotate(-2.6deg) scale(1.06); }
	25% { transform: translate(-1.4cqw, .4cqw) rotate(3deg) scale(1.08); }
	27% { transform: translate(1.2cqw, -.4cqw) rotate(-2deg) scale(1.1); }
	29.9% { opacity: 1; transform: scale(.88); animation-timing-function: steps(1); }
	30%, 100% { opacity: 0; transform: scale(.88); }
}
/* 바깥으로는 급감속, 아래로는 가속 */
@keyframes s5-fly {
	0%, 30% { translate: 0 0; animation-timing-function: cubic-bezier(.03, .85, .15, 1); }
	52%, 100% { translate: calc(var(--x) * 1.35) calc(var(--y) * 1.35); }
}
@keyframes s5-drop {
	0%, 29.9% { opacity: 0; transform: none; }
	30% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.55, 0, .9, .5); }
	48% { opacity: 1; }
	58%, 100% { opacity: 0; transform: translateY(46cqw) rotate(calc(var(--r) * 2.2)) scale(var(--s, 1)); }
}
@keyframes s5-flash {
	0%, 29.9% { opacity: 0; }
	30%, 31.6% { opacity: 1; }
	31.7%, 100% { opacity: 0; }
}
@keyframes s5-burst {
	0%, 29.9% { opacity: 0; transform: scale(.05); }
	30% { opacity: 1; transform: scale(.05); animation-timing-function: cubic-bezier(.05, .8, .2, 1); }
	33.5% { opacity: .9; }
	38%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes s5-ring {
	0%, 29.9% { opacity: 0; transform: scale(.05); }
	30% { opacity: .9; transform: scale(.05); animation-timing-function: cubic-bezier(.1, .6, .3, 1); }
	42%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes s5-dust {
	0%, 29.9% { opacity: 0; transform: scale(.1); }
	30% { opacity: 1; transform: scale(.1); animation-timing-function: cubic-bezier(.1, .7, .3, 1); }
	42% { opacity: 1; }
	50%, 100% { opacity: 0; transform: scale(1.9) translateY(6cqw); }
}
@keyframes s5-smoke {
	0%, 32% { opacity: 0; transform: translate(calc(var(--x) * .2), calc(var(--y) * .2)) scale(.25); }
	37% { opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
	52% { opacity: .6; }
	72%, 100% { opacity: 0; transform: translate(calc(var(--x) * 1.2), calc(var(--y) * 1.2 - 14cqw)) scale(1.3); }
}
/* 터지는 순간 화면 흔들림 */
@keyframes s5-shake {
	0%, 29.9%, 44%, 100% { transform: none; }
	30.5% { transform: translate(-2.2cqw, 1.4cqw); }
	32% { transform: translate(2cqw, -1.6cqw); }
	33.5% { transform: translate(-1.6cqw, -1cqw); }
	35% { transform: translate(1.4cqw, 1.2cqw); }
	37% { transform: translate(-1cqw, .6cqw); }
	39% { transform: translate(.7cqw, -.5cqw); }
	41.5% { transform: translate(-.4cqw, .3cqw); }
}

/* ---------- 6. 아무 일도 일어나지 않는다 ---------- */

.s6 { perspective: 150cqw; perspective-origin: 50% 30%; }
.s6 .floor {
	position: absolute;
	inset: -30cqw -25cqw -20cqw -25cqw;
	transform: rotateX(60deg) rotateZ(52deg);
	transform-style: preserve-3d;
}
.s6 b { position: absolute; font-weight: 900; line-height: .8; }
.s6 b:nth-child(3n) { font-family: var(--serif); }
.s6 b:nth-child(4n) { font-style: italic; }
.s6 b:nth-child(1)  { left: 24%; top: 14%; font-size: 20cqw; rotate: 8deg; }
.s6 b:nth-child(2)  { left: 44%; top: 10%; font-size: 26cqw; rotate: -6deg; }
.s6 b:nth-child(3)  { left: 62%; top: 16%; font-size: 22cqw; rotate: 14deg; }
.s6 b:nth-child(4)  { left: 78%; top: 24%; font-size: 30cqw; rotate: -10deg; }
.s6 b:nth-child(5)  { left: 14%; top: 34%; font-size: 28cqw; rotate: -12deg; }
.s6 b:nth-child(6)  { left: 34%; top: 32%; font-size: 24cqw; rotate: 5deg; }
.s6 b:nth-child(7)  { left: 50%; top: 36%; font-size: 36cqw; rotate: -4deg; }
.s6 b:nth-child(8)  { left: 70%; top: 44%; font-size: 26cqw; rotate: 12deg; }
.s6 b:nth-child(9)  { left: 22%; top: 54%; font-size: 34cqw; rotate: 9deg; }
.s6 b:nth-child(10) { left: 42%; top: 58%; font-size: 44cqw; rotate: -8deg; }
.s6 b:nth-child(11) { left: 64%; top: 64%; font-size: 30cqw; rotate: 6deg; }
.s6 b:nth-child(12) { left: 82%; top: 58%; font-size: 24cqw; rotate: -14deg; }
.s6 b:nth-child(13) { left: 34%; top: 80%; font-size: 30cqw; rotate: 4deg; }
.s6 b:nth-child(14) { left: 56%; top: 84%; font-size: 26cqw; rotate: -5deg; }
/* 하나만 일어나려다 다시 쓰러짐 */
.s6 b:nth-child(7) {
	transform-origin: 50% 100%;
	animation: s6-twitch 7s ease-in-out infinite;
}
@keyframes s6-twitch {
	0%, 50% { transform: rotateX(0); animation-timing-function: ease-out; }
	53% { transform: rotateX(-12deg); }
	55% { transform: rotateX(-7deg); animation-timing-function: ease-out; }
	60% { transform: rotateX(-30deg); animation-timing-function: ease-in; }
	65% { transform: rotateX(0); animation-timing-function: ease-out; }
	66.5% { transform: rotateX(-4deg); animation-timing-function: ease-in; }
	68%, 100% { transform: rotateX(0); }
}

/* ---------- 7. 일을 벌려보자 ---------- */

.s7 .split { position: relative; left: 5cqw; width: 13cqw; height: 50cqw; }
.s7 i { position: absolute; animation: 4s infinite; }
.s7 .l, .s7 .r {
	top: 0; height: 100%; width: 0;
	box-sizing: content-box;
	border: 0 solid var(--ink);
}
.s7 .l { right: 50%; border-left-width: 6.5cqw; animation-name: s7-l; }
.s7 .r { left: 50%; border-right-width: 6.5cqw; animation-name: s7-r; }
.s7 .flag {
	right: 99%; top: 0; width: 24cqw; height: 20cqw;
	background: var(--ink);
	animation-name: s7-flag;
}
/* 벌어졌다가 천천히 닫힘 */
@keyframes s7-l {
	0%, 22% { width: 0; border-radius: 0; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
	42%, 84% { width: 13cqw; border-radius: 100% 0 0 100% / 50% 0 0 50%; animation-timing-function: ease-in-out; }
	97%, 100% { width: 0; border-radius: 0; }
}
@keyframes s7-r {
	0%, 22% { width: 0; border-radius: 0; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
	42%, 84% { width: 13cqw; border-radius: 0 100% 100% 0 / 0 50% 50% 0; animation-timing-function: ease-in-out; }
	97%, 100% { width: 0; border-radius: 0; }
}
/* 깃 부분은 벌어진 모양에 맞춰 변형 */
@keyframes s7-flag {
	0%, 22% { transform: none; clip-path: polygon(58.3% 40%, 69.1% 38.6%, 79.2% 34.6%, 87.8% 28.3%, 94.4% 20%, 98.6% 10.4%, 100% 0, 100% 80%, 58.3% 80%); animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
	42%, 84% { transform: translateX(5cqw); clip-path: polygon(2% 92%, 14% 72%, 27% 53%, 41% 35%, 56% 19%, 71% 8%, 86% 3%, 70% 22%, 30% 100%); animation-timing-function: ease-in-out; }
	97%, 100% { transform: none; clip-path: polygon(58.3% 40%, 69.1% 38.6%, 79.2% 34.6%, 87.8% 28.3%, 94.4% 20%, 98.6% 10.4%, 100% 0, 100% 80%, 58.3% 80%); }
}

/* ---------- 8. 일베 ---------- */
/* 순서: 페이드인 → 대기 → 칼날 통과(노란색 번쩍임) → 두 조각이 갈라지며 사라짐 → 빈 화면 */

.s8 .cut {
	position: relative;
	translate: -5.27cqw -1.71cqw;
	display: grid; place-items: center;
	font-size: 58cqw; font-weight: 900;
	animation: s8-hit 2.2s infinite;
}
.s8 .cut > * { grid-area: 1 / 1; }
.s8 b { padding: 0 .12em; font-style: italic; animation: 2.2s infinite; }
/* 절단선 기울기 -13.1도 (원본 기준) */
.s8 .top { clip-path: polygon(calc(50% - 100cqw) -100cqw, calc(50% + 100cqw) -100cqw, calc(50% + 100cqw) calc(50% - 20.04cqw), calc(50% - 100cqw) calc(50% + 26.56cqw)); animation-name: s8-top; }
.s8 .bot { clip-path: polygon(calc(50% - 100cqw) calc(50% + 26.42cqw), calc(50% + 100cqw) calc(50% - 20.18cqw), calc(50% + 100cqw) 200cqw, calc(50% - 100cqw) 200cqw); animation-name: s8-bot; }
/* 칼날: 위쪽 검정, 아래쪽 노랑 */
.s8 .blade {
	position: absolute;
	left: calc(50% - 130cqw); top: calc(50% + 3.12cqw - 3.5cqw);
	width: 260cqw; height: 7cqw;
	background: linear-gradient(var(--ink) 50%, #fff100 50%);
	clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
	animation: s8-blade 2.2s linear infinite;
}
@keyframes s8-top {
	0% { opacity: 0; transform: none; color: var(--ink); }
	7%, 33% { opacity: 1; transform: none; color: var(--ink); }
	34%, 35.5% { transform: none; color: #fff100; }
	37% { transform: translate(1.5cqw, -.35cqw); color: var(--ink); animation-timing-function: cubic-bezier(.3, 0, .7, .9); }
	42% { opacity: 1; }
	51%, 100% { opacity: 0; transform: translate(28cqw, -5.5cqw) rotate(3deg); color: var(--ink); }
}
@keyframes s8-bot {
	0% { opacity: 0; transform: none; color: var(--ink); }
	7%, 33% { opacity: 1; transform: none; color: var(--ink); }
	34%, 35.5% { transform: none; color: #fff100; }
	37% { transform: translate(-1.5cqw, .5cqw); color: var(--ink); animation-timing-function: cubic-bezier(.3, 0, .7, .9); }
	42% { opacity: 1; }
	51%, 100% { opacity: 0; transform: translate(-23cqw, 9cqw) rotate(-4deg); color: var(--ink); }
}
@keyframes s8-blade {
	0%, 32.5% { transform: rotate(-13.1deg) translateX(185cqw); }
	36%, 100% { transform: rotate(-13.1deg) translateX(-185cqw); }
}
/* 베이는 순간 살짝 흔들림 */
@keyframes s8-hit {
	0%, 33.5%, 38%, 100% { transform: none; }
	34.5% { transform: translate(-1.2cqw, .5cqw); }
	36% { transform: translate(.7cqw, -.3cqw); }
}

/* ---------- 9. 일이 끝나지 않는다 ---------- */

.s9 { perspective: 60cqw; perspective-origin: 50% 66%; }
.s9 p {
	position: absolute;
	right: -60cqw; top: 22cqw;
	font-size: 56cqw; font-weight: 900;
	letter-spacing: 14cqw;
	transform-origin: calc(100% - 60cqw) 50%;
	white-space: nowrap;
	animation: s9-march .9s linear infinite;
}
@keyframes s9-march {
	from { transform: rotateY(-40deg) translateX(0); }
	to { transform: rotateY(-40deg) translateX(-8.3333%); }
}

/* ---------- 10. 일이 커진다 ---------- */

/* 글자 중앙을 기준으로 확대 */
.s10 b {
	font-size: 13cqw;
	translate: .6cqw -.25cqw;
	transform-origin: 43.1% 53.1%;
	animation: s10-grow 2.8s infinite;
}
@keyframes s10-grow {
	0% { transform: scale(.72, 1); opacity: 0; }
	6%, 18% {
		transform: scale(.72, 1); opacity: 1;
		animation-timing-function: linear(0, .012 12.5%, .031 25%, .063 37.5%, .116 50%, .204 62.5%, .351 75%, .595 87.5%, 1);
	}
	90% { transform: scale(41.8, 58); opacity: 1; }
	97%, 100% { transform: scale(41.8, 58); opacity: 0; }
}

/* ---------- 11. 일하자 ---------- */
/* 기둥(.stem)과 떨어지는 깃 조각(.flag)으로 구성.
   조각은 기둥 왼쪽 위의 1/4 타원 부분까지 포함하고, 기둥은 그만큼 파여 있음 */

.s11 .stem {
	--seam-w: .22cqw;
	--line: color-mix(in srgb, var(--ink) 62%, var(--paper));
	--panel: color-mix(in srgb, var(--ink) 95%, var(--paper));
	position: relative;
	left: 8.9cqw;
	width: 18cqw; height: 57.5cqw;
	isolation: isolate;
}
.s11 .stem::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		/* 이음선 */
		linear-gradient(var(--line) 0 0) 4.75cqw 14.5cqw / var(--seam-w) 43cqw no-repeat,
		linear-gradient(var(--line) 0 0) 0 35.75cqw / 4.75cqw var(--seam-w) no-repeat,
		linear-gradient(var(--line) 0 0) 5.5cqw 18.75cqw / 12cqw var(--seam-w) no-repeat,
		linear-gradient(var(--line) 0 0) 17.3cqw 18.75cqw / var(--seam-w) 21.25cqw no-repeat,
		linear-gradient(var(--line) 0 0) 4.75cqw 40cqw / 13.25cqw var(--seam-w) no-repeat,
		linear-gradient(var(--line) 0 0) 4.75cqw 56.2cqw / 13.25cqw var(--seam-w) no-repeat,
		/* 왼쪽 좁은 판 */
		linear-gradient(var(--panel) 0 0) 0 14.5cqw / 4.75cqw 43cqw no-repeat,
		var(--ink);
	-webkit-mask: radial-gradient(14.75cqw 10.75cqw at -11cqw 0, #0000 98.5%, #000 100%) 0 0 / 100% 4.7cqw no-repeat,
		radial-gradient(8.25cqw 9.63cqw at -.9cqw 0, #0000 98.5%, #000 100%) 0 4.65cqw / 100% 52.85cqw no-repeat;
	mask: radial-gradient(14.75cqw 10.75cqw at -11cqw 0, #0000 98.5%, #000 100%) 0 0 / 100% 4.7cqw no-repeat,
		radial-gradient(8.25cqw 9.63cqw at -.9cqw 0, #0000 98.5%, #000 100%) 0 4.65cqw / 100% 52.85cqw no-repeat;
}
.s11 .flag {
	position: absolute;
	left: -17.75cqw; top: 0;
	width: 26cqw; height: 23cqw;
	background:
		linear-gradient(var(--ink) 0 0) 0 10.75cqw / 17.75cqw 12.25cqw no-repeat,
		linear-gradient(var(--ink) 0 0) 6.75cqw 0 / 10.15cqw 10.8cqw no-repeat,
		radial-gradient(8.25cqw 9.63cqw at 0 0, var(--ink) 98.5%, #0000 100%) 16.85cqw 4.65cqw / 8.25cqw 9.7cqw no-repeat;
	-webkit-mask: radial-gradient(14.75cqw 10.75cqw at 6.75cqw 0, #0000 99%, #000 100%);
	mask: radial-gradient(14.75cqw 10.75cqw at 6.75cqw 0, #0000 99%, #000 100%);
	/* 기둥 뒤에 놓아서 겹치는 부분은 가려지게 함 */
	z-index: -1;
	/* 뿔 부분이 기둥에 걸린 지점이 회전축 */
	transform-origin: 21.75cqw 8.25cqw;
	animation: s11-fall 5.2s infinite;
}
.s11 .flag::after {
	content: "";
	position: absolute;
	left: 17.75cqw; top: 0;
	width: 8.25cqw; height: 100%;
	background:
		linear-gradient(var(--line) 0 0) 2.3cqw 4.65cqw / 5cqw var(--seam-w) no-repeat,
		radial-gradient(8.25cqw 9.63cqw at -.9cqw 0, #0000 95.5%, var(--line) 96.5%, var(--line) 98.5%, #0000 99.5%) 0 4.65cqw / 100% 9.7cqw no-repeat;
	animation: s11-crack 5.2s infinite;
}
/* 붙어 있는 동안만 보이는 금 */
@keyframes s11-crack { 0%, 31% { opacity: 1; } 34%, 100% { opacity: 0; } }
/* 살짝 처짐 → 1초 버팀 → 덜렁 매달림 → 떨어져서 똑바로 섬 → 옆으로 넘어짐 */
@keyframes s11-fall {
	0% { translate: 0 0; rotate: 0deg; opacity: 0; }
	3%, 10% { translate: 0 0; rotate: 0deg; opacity: 1; animation-timing-function: ease-out; }
	11% { rotate: -5.5deg; }
	12%, 30% { translate: 0 0; rotate: -4deg; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
	34.5% { rotate: -58deg; animation-timing-function: ease-in-out; }
	37.5% { rotate: -45deg; animation-timing-function: ease-in-out; }
	40% { rotate: -54deg; animation-timing-function: ease-in-out; }
	42.5% { rotate: -48deg; animation-timing-function: ease-in-out; }
	45% { translate: 0 0; rotate: -51deg; animation-timing-function: cubic-bezier(.5, 0, 1, .7); }
	52% { translate: -21.5cqw 27.5cqw; rotate: -90deg; animation-timing-function: ease-out; }
	53.5% { translate: -21.39cqw 26.27cqw; rotate: -88.5deg; animation-timing-function: ease-in; }
	55% { translate: -21.5cqw 27.5cqw; rotate: -90deg; }
	60% { translate: -21.63cqw 28.02cqw; rotate: -92deg; animation-timing-function: ease-in; }
	63.5% { translate: -27.04cqw 28.89cqw; rotate: -105deg; animation-timing-function: linear; }
	66% { translate: -32.04cqw 31.66cqw; rotate: -120deg; animation-timing-function: linear; }
	68% { translate: -36.83cqw 36.56cqw; rotate: -138deg; animation-timing-function: linear; }
	69.3% { translate: -39.38cqw 41.24cqw; rotate: -152deg; animation-timing-function: linear; }
	70.5% { translate: -40.54cqw 45.32cqw; rotate: -163.08deg; animation-timing-function: ease-out; }
	71.5% { translate: -40.38cqw 44.53cqw; rotate: -161deg; animation-timing-function: ease-in; }
	72.5%, 93% { translate: -40.54cqw 45.32cqw; rotate: -163.08deg; opacity: 1; }
	98%, 100% { translate: -40.54cqw 45.32cqw; rotate: -163.08deg; opacity: 0; }
}