/* 메인 페이지 잔잔한 움직임(2026-11-12) — home-motion.js 가 html 에 붙인 hm-* 클래스가 있을 때만 동작한다. */

/* ① 첫 화면 배경: 26초에 걸쳐 7% 확대했다가 되돌아옴(스크롤 깊이감은 스크립트가 translate 로) */
@keyframes hm-drift { from { scale: 1; } to { scale: 1.07; } }
html.hm-bg #home-hero .hero-photo { transform-origin: 62% 46%; animation: hm-drift 26s ease-in-out infinite alternate; will-change: scale, translate; }

/* ③ 등장: 처음엔 살짝 아래(또는 옆)에 투명하게 → 화면에 들어오면 제자리로.
   site.css 의 '.editorial-site .reveal { opacity:1 !important; transform:none !important; transition:none !important }'(옛 등장 효과 끄기)보다
   우선하도록 #main 을 넣은 선택자 + !important 를 쓴다(전환은 !important 보다 우선 적용됨). 다 나타난 뒤(hm-in)에는 그 규칙대로 제자리·불투명. */
html.hm-reveal #main .reveal:not(.hero-content) {
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1) !important;
  transition-delay: var(--hm-delay, 0s) !important;
}
/* 숨긴 상태는 화면에서만 — 인쇄하면 아직 스크롤하지 않은 섹션도 모두 찍힌다 */
@media screen {
  html.hm-reveal:not(.hm-done) #main .reveal:not(.hero-content):not(.hm-in) { opacity: 0 !important; transform: translate3d(0, 18px, 0) !important; }
}
/* 옆에서 들어오는 것은 넓은 화면에서만 — 좁은 화면에선 옆으로 밀린 동안 페이지가 가로로 1px 넘쳐 흔들림(390 폭 확인) */
@media screen and (min-width: 1100px) {
  html.hm-reveal:not(.hm-done) #main .reveal.from-left:not(.hm-in) { transform: translate3d(-24px, 0, 0) !important; }
  html.hm-reveal:not(.hm-done) #main .reveal.from-right:not(.hm-in) { transform: translate3d(24px, 0, 0) !important; }
}
@media print {
  html.hm-reveal #main .reveal:not(.hero-content) { transition: none !important; }
  html.hm-reveal #home-hero .hero-content :is(.eyebrow, h1 > span, .hero-summary, .hero-actions, .hero-metrics) { animation: none; }
}

/* 첫 화면 문구: 페이지가 처음 그려질 때부터 차례로(전환은 첫 그리기 전 변경에 적용되지 않아 키프레임 애니메이션 사용) */
@keyframes hm-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
html.hm-reveal #home-hero .hero-content :is(.eyebrow, h1 > span, .hero-summary, .hero-actions, .hero-metrics) { animation: hm-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
html.hm-reveal #home-hero .hero-content .eyebrow { animation-delay: .1s; }
html.hm-reveal #home-hero .hero-content h1 > span:nth-child(1) { animation-delay: .22s; }
html.hm-reveal #home-hero .hero-content h1 > span:nth-child(2) { animation-delay: .34s; }
html.hm-reveal #home-hero .hero-content h1 > span:nth-child(3) { animation-delay: .46s; }
html.hm-reveal #home-hero .hero-content .hero-summary { animation-delay: .62s; }
html.hm-reveal #home-hero .hero-content .hero-actions { animation-delay: .74s; }
html.hm-reveal #home-hero .hero-content .hero-metrics { animation-delay: .86s; }

/* ④ 전광판: 사진과 같은 자리·같은 층(z-index -3, 사진 바로 다음 → 사진 위, 어둡게 덮는 막 아래).
   사진 좌표(1920×1080) 판을 object-fit: cover 배치대로 옮기고, 각 화면 캔버스는 그 판 위에 기울여 얹는다(home-motion.js). */
#home-hero .hm-screens { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
#home-hero .hm-screens-map { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
#home-hero .hm-screens canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
/* 배경 확대·축소와 스크롤 깊이감을 사진과 똑같이(시작 시각은 스크립트가 맞춤) */
html.hm-bg #home-hero .hm-screens { transform-origin: 62% 46%; animation: hm-drift 26s ease-in-out infinite alternate; will-change: scale, translate; }

/* ② 숫자: 자릿수가 바뀌어도 폭이 흔들리지 않게 */
html.hm-count .ix-since-facts .hm-num { display: inline-block; font-variant-numeric: tabular-nums; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  html.hm-bg #home-hero .hero-photo { animation: none; }
}