/* 모션 규칙(ANALYSIS §4 모션 언어). transform·opacity 만 움직인다(60fps). 화면 전환·카드 등장은 core/motion.js(WAAPI).
 * 여기에는 CSS 로 도는 반복 모션만: caption-breathe/wave/typing · 대기화면 빛·고리 · 터치 표시 맥박 · 빈 상태 고리 · 스피너.
 * 「모션 줄이기」(.motion-reduced 또는 시스템 설정)면 반복 모션을 멈추고 최종 모양으로 둔다. 1초에 3번 넘게 깜빡이는 것은 없다.
 */

@keyframes hk-spin { to { transform: rotate(360deg); } }
@keyframes hk-indeterminate { 0% { transform: translate3d(-110%, 0, 0); } 100% { transform: translate3d(260%, 0, 0); } }

/* ── caption-breathe: 글자 단위 등장(40ms 간격) → 4초 주기 숨쉬기 */
@keyframes hk-char-in {
  0% { opacity: 0; transform: translate3d(0, .42em, 0) scale(.96); filter: blur(calc(6px * var(--ui))); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes hk-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .58; transform: scale(.988); }
}
@keyframes hk-wave {
  0%, 60%, 100% { transform: translate3d(0, 0, 0); }
  30% { transform: translate3d(0, -.16em, 0); }
}
@keyframes hk-type { 0% { opacity: 0; } 100% { opacity: 1; } }

.hk-cap__ch { opacity: 0; animation: hk-char-in 680ms var(--ease-out) both; animation-delay: calc(var(--i) * var(--stagger-char) + 380ms); }
.hk-cap--breathe { animation: hk-breathe var(--dur-breathe) var(--ease-breathe) infinite; animation-delay: calc(var(--n) * var(--stagger-char) + 1400ms); }
.hk-cap--wave .hk-cap__ch { animation: hk-char-in 680ms var(--ease-out) both, hk-wave 3200ms var(--ease-breathe) infinite; animation-delay: calc(var(--i) * var(--stagger-char) + 380ms), calc(var(--i) * 70ms + var(--n) * var(--stagger-char) + 1200ms); }
.hk-cap--typing .hk-cap__ch { animation: hk-type 1ms steps(1) both; animation-delay: calc(var(--i) * 90ms + 300ms); }
.hk-cap--none .hk-cap__ch { opacity: 1; animation: none; }

/* ── 대기화면 기본 연출: 빛 덩어리가 아주 천천히 흐름, 점선 고리가 천천히 돎, 로고 둘레 고리가 숨쉬듯 퍼짐 */
@keyframes hk-orb-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(9vmax, 6vmax, 0) scale(1.12); } }
@keyframes hk-orb-b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-10vmax, -5vmax, 0) scale(.94); } }
@keyframes hk-orb-c { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(12vmax, -8vmax, 0) scale(1.18); } }
@keyframes hk-rotate { to { transform: rotate(360deg); } }
@keyframes hk-halo { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.62); } }
@keyframes hk-pulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.05); } }
@keyframes hk-tap { 0%, 70%, 100% { transform: scale(1); } 8% { transform: scale(.9); } 22% { transform: scale(1.02); } }
@keyframes hk-kenburns { from { transform: scale(1.0) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); } }
@keyframes hk-drift { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes hk-rise { from { opacity: 0; transform: translate3d(0, calc(28px * var(--ui)), 0); } to { opacity: 1; transform: none; } }

.hk-orb--1 { animation: hk-orb-a 26s var(--ease-breathe) infinite alternate; }
.hk-orb--2 { animation: hk-orb-b 32s var(--ease-breathe) infinite alternate; }
.hk-orb--3 { animation: hk-orb-c 22s var(--ease-breathe) infinite alternate; }
.hk-attract__lines .ln--1 { animation: hk-rotate 140s linear infinite; }
.hk-attract__lines .ln--3 { animation: hk-rotate 200s linear infinite reverse; }
.hk-attract__halo--1 { animation: hk-halo 4800ms var(--ease-out) infinite; }
.hk-attract__halo--2 { animation: hk-halo 4800ms var(--ease-out) 1600ms infinite; }
.hk-attract__halo--3 { animation: hk-halo 4800ms var(--ease-out) 3200ms infinite; }
.hk-attract__pulse--1 { animation: hk-pulse 2600ms var(--ease-out) infinite; }
.hk-attract__pulse--2 { animation: hk-pulse 2600ms var(--ease-out) 1300ms infinite; }
.hk-attract__touch-dot { animation: hk-tap 2600ms var(--ease-standard) infinite; }
/* 대기화면이 처음 나타날 때: 로고 → 이름 → 문구 → 자막 순으로 떠오름 */
.hk-attract__mark { animation: hk-rise 900ms var(--ease-out) 60ms both; }
.hk-attract__name { animation: hk-rise 900ms var(--ease-out) 160ms both; }
.hk-attract__tagline { animation: hk-rise 900ms var(--ease-out) 260ms both; }
.hk-attract__touch { animation: hk-rise 900ms var(--ease-out) 200ms both; }
.hk-attract__pill { animation: hk-rise 800ms var(--ease-out) both; animation-delay: calc(420ms + var(--i, 0) * 90ms); }

/* ── 빈 상태: 고리가 천천히 숨쉼 */
@keyframes hk-ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.045); opacity: .7; } }
.hk-empty__ring--1 { animation: hk-ring 4800ms var(--ease-breathe) infinite; }
.hk-empty__ring--2 { animation: hk-ring 4800ms var(--ease-breathe) 400ms infinite; }
.hk-empty__ring--3 { animation: hk-ring 4800ms var(--ease-breathe) 800ms infinite; }

/* ── 모션 줄이기: 반복 모션 멈춤, 최종 모양 */
.motion-reduced .hk-cap__ch, .motion-reduced .hk-cap, .motion-reduced .hk-orb, .motion-reduced .hk-attract__lines .ln,
.motion-reduced .hk-attract__halo, .motion-reduced .hk-attract__pulse, .motion-reduced .hk-attract__touch-dot,
.motion-reduced .hk-attract__mark, .motion-reduced .hk-attract__name, .motion-reduced .hk-attract__tagline, .motion-reduced .hk-attract__touch,
.motion-reduced .hk-empty__ring, .motion-reduced .hk-slide, .motion-reduced .hk-attract__pill { animation: none !important; }
.motion-reduced .hk-cap__ch { opacity: 1; }
.motion-reduced .hk-attract__halo--1 { opacity: .35; transform: scale(1.18); }
@media (prefers-reduced-motion: reduce) {
  :root:not(.motion-full) .hk-cap__ch, :root:not(.motion-full) .hk-cap, :root:not(.motion-full) .hk-orb, :root:not(.motion-full) .hk-attract__lines .ln,
  :root:not(.motion-full) .hk-attract__halo, :root:not(.motion-full) .hk-attract__pulse, :root:not(.motion-full) .hk-attract__touch-dot,
  :root:not(.motion-full) .hk-attract__mark, :root:not(.motion-full) .hk-attract__name, :root:not(.motion-full) .hk-attract__tagline, :root:not(.motion-full) .hk-attract__touch,
  :root:not(.motion-full) .hk-empty__ring, :root:not(.motion-full) .hk-slide, :root:not(.motion-full) .hk-attract__pill { animation: none !important; }
  :root:not(.motion-full) .hk-cap__ch { opacity: 1; }
}

/* ── 화면 확인용(?still=1): 반복 모션을 멈추고 대표 모양 한 장으로 */
.is-still .hk-cap__ch, .is-still .hk-cap, .is-still .hk-attract__touch-dot, .is-still .hk-attract__mark, .is-still .hk-attract__name,
.is-still .hk-attract__tagline, .is-still .hk-attract__touch, .is-still .hk-attract__pill, .is-still .hk-empty__ring, .is-still .hk-orb, .is-still .hk-attract__lines .ln { animation: none !important; }
.is-still .hk-cap__ch { opacity: 1; }
.is-still .hk-attract__halo { animation: none !important; }
.is-still .hk-attract__halo--1 { opacity: .5; transform: scale(1.14); }
.is-still .hk-attract__halo--2 { opacity: .28; transform: scale(1.32); }
.is-still .hk-attract__halo--3 { opacity: .12; transform: scale(1.5); }
.is-still .hk-attract__pulse { animation: none !important; }
.is-still .hk-attract__pulse--1 { opacity: .4; transform: scale(1.3); }
.is-still .hk-attract__pulse--2 { opacity: .16; transform: scale(1.7); }

/* 설정 motion.kiosk_level=calm(차분하게): 장식용 반복 움직임만 멈춘다 — 길 안내 흐름·「현재 위치」 맥동·진행 표시처럼 뜻이 있는 움직임은 그대로 */
:root.motion-calm { --ease-spring: var(--ease-out); }
:root.motion-calm :is(.hk-orb, .hk-attract__lines .ln, .hk-attract__halo, .hk-empty__ring, .kx-orbit, .kx-orbit__core, .kx-orbit__item, .hk-cleanlock__ic, .fx-skel__slab, .fx-hero__skel) { animation: none !important; }
:root.motion-calm .hk-cap--breathe, :root.motion-calm .hk-cap--wave .hk-cap__ch { animation-iteration-count: 1 !important; }