/* LYDIA 리듬 토큰 v0.1 (2026-10-25) — 데이터의 루바토: 기록은 정박, 흐름은 제 박자 (design/PHILOSOPHY.md)
   색 · 글꼴은 lydia-tokens.css, 간격의 비례 · 움직임 · 광학 보정은 여기. 화면은 이 변수와 도구 클래스만 쓴다.
   지킬 선: 무작위가 아니라 정해 둔 어긋남을 되풀이한다 · 기록 숫자의 값 · 정렬 · 기준선은 움직이지 않는다 · 움직임은 바뀐 것에만. */

:root {
  /* 비례 — 같은 간격 대신 ×1.25 · ×1.6 을 번갈아(8 기준). 스코어 주변은 넓게(breathe), 표는 촘촘하게(dense) */
  --ly-space-1: 6px;
  --ly-space-2: 8px;
  --ly-space-3: 10px;   /* ×1.25 */
  --ly-space-4: 16px;   /* ×1.6  */
  --ly-space-5: 20px;   /* ×1.25 */
  --ly-space-6: 32px;   /* ×1.6  */
  --ly-space-7: 40px;   /* ×1.25 */
  --ly-space-8: 64px;   /* ×1.6  */
  --ly-breathe: var(--ly-space-6);   /* 핵심 지표 둘레 — 시선이 머무는 곳(지연) */
  --ly-dense: var(--ly-space-2);     /* 표 · 로그 — 빠르게 훑는 곳(가속) */

  /* 움직임 — 등속(linear) 금지. 스프링은 끝에서 아주 살짝(약 1.7%) 넘쳤다 돌아온다 */
  --ly-ease-spring: var(--lyd-ease-spring);   /* v0.4 — 스프링은 하나(lydia-tokens.css --lyd-ease-spring) */
  --ly-ease-out: cubic-bezier(.22, .8, .24, 1);       /* 출발은 빠르게, 도착은 부드럽게 */
  --ly-ease-in-out: cubic-bezier(.65, 0, .25, 1);     /* 뜸 → 가속 → 감속 */
  --ly-dur-1: 160ms;    /* 작은 반응(누름 · 색) */
  --ly-dur-2: 300ms;    /* 자리 이동 */
  --ly-dur-3: 560ms;    /* 들어옴 · 쌓임(스프링) */

  /* 엇갈린 지연 — 동시에 움직이지 않게. 고르지 않되 늘 같은 값(노이즈 아님) */
  --ly-stagger-1: 0ms;
  --ly-stagger-2: 40ms;
  --ly-stagger-3: 95ms;
  --ly-stagger-4: 130ms;
  --ly-stagger-5: 205ms;
  --ly-stagger-6: 250ms;

  /* 광학 보정 — 수치가 아니라 눈에 맞춘다 */
  --ly-optical-pull: -0.045em;   /* 큰 숫자(Unbounded)는 왼쪽 여백이 커 보여 조금 당긴다 */
  --ly-optical-round: 1.04;      /* 둥근 글꼴 · 원형 아이콘은 같은 크기로 보이려면 살짝 크게 */
}

/* ── 도구 클래스 ── */
/* 들어옴: 새로 생긴 줄 · 카드. 순서는 style="--ly-delay:var(--ly-stagger-N)" 로 */
.ly-in { animation: ly-rise var(--ly-dur-3) var(--ly-ease-spring) both; animation-delay: var(--ly-delay, 0ms); }
@keyframes ly-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 쌓임: 라운드가 확정되면 막대가 바닥(기준선)에서 자란다. 아래로 자라는 막대는 .ly-grow.down */
.ly-grow { transform-origin: 50% 100%; animation: ly-grow var(--ly-dur-3) var(--ly-ease-spring) both; animation-delay: var(--ly-delay, 0ms); }
.ly-grow.down { transform-origin: 50% 0%; }
@keyframes ly-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* 굴림: 바뀐 자리의 숫자만 아래에서 굴러 올라온다. 자리마다 엇갈린 지연(오른쪽 자리부터) */
.ly-roll { display: inline-flex; overflow: hidden; vertical-align: bottom; }
.ly-roll .ly-d { display: inline-block; }
.ly-roll .ly-d.on { animation: ly-roll var(--ly-dur-3) var(--ly-ease-spring) both; animation-delay: var(--ly-delay, 0ms); }
@keyframes ly-roll { from { transform: translateY(70%); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }

/* 큰 숫자 광학 정렬 */
.ly-optical { margin-left: var(--ly-optical-pull); }

/* 움직임 줄이기 설정 — 결과만 보여 준다 */
@media (prefers-reduced-motion: reduce) {
  .ly-in, .ly-grow, .ly-roll .ly-d.on { animation: none !important; }
}