/* 짤랑 소개 첫 화면의 움직임 — 이 페이지(jjallang/index.html)만 싣는다. 정책 페이지는 styles.css 만 쓴다.
   오른쪽 감열지 영수증이 12초에 한 번 찍혀 나온다: 기본 → 야간 가산 → 연장 가산이 한 줄씩 찍히며 「오늘」 합계가 따라 오르고,
   합계가 서면 가위가 절취선을 따라 지나간다. 스크립트 없이 CSS 로만 움직인다. */
:root:has(> body.motion), .motion { overflow-x: clip; }

/* ── 첫 화면 글: 차례로 떠오른다 (h1 의 줄은 .hl — styles.css 의 .line 은 영수증 줄이라 이름을 달리 둔다) ── */
.motion .hero { position: relative; isolation: isolate; }
.motion .hero h1 .hl { display: block; overflow: hidden; padding-bottom: .06em; }
.motion .hero h1 .hl > span { display: inline-block; animation: jjallang-rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.12s + var(--l) * .14s); }
.motion .hero > div > .eyebrow, .motion .hero-copy, .motion .hero .actions, .motion .hero > div > .age-note { animation: jjallang-fade .8s ease both; }
.motion .hero-copy { animation-delay: .45s; }
.motion .hero .actions { animation-delay: .6s; }
.motion .hero > div > .age-note { animation-delay: .75s; }
@keyframes jjallang-rise { from { transform: translateY(105%); } }
@keyframes jjallang-fade { from { opacity: 0; transform: translateY(14px); } }

/* 첫 화면 뒤에서 금액 잉크 색의 흐린 빛이 천천히 떠다닌다 */
.motion .hero::before {
  content: ""; position: absolute; z-index: -1; inset: 4% -8% auto auto; width: 32rem; height: 32rem; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--money) 16%, transparent), transparent);
  animation: jjallang-drift 14s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes jjallang-drift { to { translate: -6rem 3rem; scale: 1.15; } }

/* ── 영수증 한 장 (12초) ──
   0.8초 기본 · 1.7초 야간 가산 · 2.6초 연장 가산이 찍히고, 합계가 줄마다 따라 오른다 → 3.6초 합계가 선다
   → 4.4~6초 가위가 절취선을 지난다 → 10.6초부터 줄이 지워지고 다음 장을 찍는다.
   멈춰 있을 때(동작 줄이기·애니메이션 없음)는 원래 영수증이 그대로 다 보인다. */
.jjallang-slip { --slip: 12s; position: relative; }
.motion .jjallang-slip { animation: jjallang-float 6s ease-in-out infinite alternate; }
@keyframes jjallang-float { to { translate: 0 -6px; } }

/* 근무 중임을 알리는 작은 점 */
.motion .jjallang-slip .receipt-sub::before {
  content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; border-radius: 50%;
  background: var(--money); vertical-align: .08em; animation: jjallang-blink 1.6s ease-in-out infinite;
}
@keyframes jjallang-blink { 50% { opacity: .2; } }

/* 한 줄씩 찍힌다: 줄 → 점선 → 금액. 세 줄 모두 88% 에서 함께 지워진다 */
.motion .jjallang-slip .line:nth-child(1) { animation: jjallang-line0 var(--slip) ease infinite; }
.motion .jjallang-slip .line:nth-child(1) .dots { transform-origin: left; animation: jjallang-dots0 var(--slip) ease infinite; }
.motion .jjallang-slip .line:nth-child(1) dd { animation: jjallang-amount0 var(--slip) ease infinite; }
@keyframes jjallang-line0 { 0%, 6.7% { opacity: 0; translate: 0 -6px; } 8.7%, 88% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: 0; translate: 0 0; } }
@keyframes jjallang-dots0 { 0%, 7.7% { scale: 0 1; } 10.2%, 100% { scale: 1 1; } }
@keyframes jjallang-amount0 { 0%, 9.7% { opacity: 0; } 10.7%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
.motion .jjallang-slip .line:nth-child(2) { animation: jjallang-line1 var(--slip) ease infinite; }
.motion .jjallang-slip .line:nth-child(2) .dots { transform-origin: left; animation: jjallang-dots1 var(--slip) ease infinite; }
.motion .jjallang-slip .line:nth-child(2) dd { animation: jjallang-amount1 var(--slip) ease infinite; }
@keyframes jjallang-line1 { 0%, 14.2% { opacity: 0; translate: 0 -6px; } 16.2%, 88% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: 0; translate: 0 0; } }
@keyframes jjallang-dots1 { 0%, 15.2% { scale: 0 1; } 17.7%, 100% { scale: 1 1; } }
@keyframes jjallang-amount1 { 0%, 17.2% { opacity: 0; } 18.2%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
.motion .jjallang-slip .line:nth-child(3) { animation: jjallang-line2 var(--slip) ease infinite; }
.motion .jjallang-slip .line:nth-child(3) .dots { transform-origin: left; animation: jjallang-dots2 var(--slip) ease infinite; }
.motion .jjallang-slip .line:nth-child(3) dd { animation: jjallang-amount2 var(--slip) ease infinite; }
@keyframes jjallang-line2 { 0%, 21.7% { opacity: 0; translate: 0 -6px; } 23.7%, 88% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: 0; translate: 0 0; } }
@keyframes jjallang-dots2 { 0%, 22.7% { scale: 0 1; } 25.2%, 100% { scale: 1 1; } }
@keyframes jjallang-amount2 { 0%, 24.7% { opacity: 0; } 25.7%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* 「오늘」 합계는 찍힌 줄을 더한 값으로 오른다(기본 128,400 → +야간 36,000 → +연장 16,200).
   실제 글자 ₩180,600 은 자리를 지키고, 그 위에 지금까지의 합을 겹친다 */
.motion .jjallang-slip .total strong { position: relative; color: transparent; display: inline-block; }
.motion .jjallang-slip .total strong::after {
  content: "₩180,600"; position: absolute; right: 0; top: 0; color: var(--money);
  animation: jjallang-sum var(--slip) linear infinite;
}
@keyframes jjallang-sum {
  0%, 10.7% { content: "₩0"; }
  10.8%, 18.2% { content: "₩128,400"; }
  18.3%, 25.7% { content: "₩164,400"; }
  25.8%, 92% { content: "₩180,600"; }
  92.1%, 100% { content: "₩0"; }
}
.motion .jjallang-slip .total strong { animation: jjallang-settle var(--slip) ease infinite; transform-origin: right center; }
@keyframes jjallang-settle {
  0%, 28% { scale: 1; }
  30.5% { scale: 1.12; }
  33%, 100% { scale: 1; }
}

/* 합계가 서면 가위가 절취선을 따라 왼쪽에서 오른쪽으로 지나간다 */
.motion .jjallang-slip .cut { position: relative; }
.motion .jjallang-slip .cut::before {
  content: "✂︎"; position: absolute; top: 0; left: 0; translate: -50% -55%; font-size: .95rem; line-height: 1;
  color: var(--ink); background: var(--sheet); padding-inline: .15rem; opacity: 0;
  animation: jjallang-snip var(--slip) ease-in-out infinite;
}
@keyframes jjallang-snip {
  0%, 36% { left: 0; opacity: 0; }
  37.5% { left: 0; opacity: 1; }
  50% { left: 100%; opacity: 1; }
  52%, 100% { left: 100%; opacity: 0; }
}
.motion .jjallang-slip .cut { animation: jjallang-sent var(--slip) ease infinite; }
@keyframes jjallang-sent {
  0%, 49% { color: var(--muted); }
  52%, 80% { color: var(--money); }
  86%, 100% { color: var(--muted); }
}

/* ── 세 걸음: 차례로 불이 들어온다 ── */
.motion #how-it-works .step { --slot: 2.4s; position: relative; overflow: hidden; animation: jjallang-step calc(var(--slot) * 3) ease infinite; animation-delay: calc(var(--i) * var(--slot)); }
.motion #how-it-works .step::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--money);
  transform-origin: left; transform: scaleX(0); animation: jjallang-bar calc(var(--slot) * 3) linear infinite; animation-delay: calc(var(--i) * var(--slot));
}
@keyframes jjallang-step { 0%, 33% { border-color: var(--money); box-shadow: 0 14px 30px -20px var(--money); } 40%, 100% { border-color: var(--line); box-shadow: none; } }
@keyframes jjallang-bar { 0% { transform: scaleX(0); } 33% { transform: scaleX(1); opacity: 1; } 38%, 100% { transform: scaleX(1); opacity: 0; } }

/* ── 아래 구역은 화면에 들어올 때 떠오른다 (스크롤 타임라인을 아는 브라우저만) ── */
@supports (animation-timeline: view()) {
  .motion .section { animation: jjallang-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}

@media (max-width: 900px) {
  .motion .hero::before { width: 22rem; height: 22rem; inset: auto -30% 0 auto; }
}

/* 동작 줄이기 — 모두 멈추고 다 찍힌 영수증이 선다 */
@media (prefers-reduced-motion: reduce) {
  .motion *, .motion *::before, .motion *::after { animation: none !important; }
  .motion .jjallang-slip .total strong { color: var(--money); }
  .motion .jjallang-slip .total strong::after, .motion .jjallang-slip .cut::before { content: none; }
}