/* ============================================================
   renew/effects.css — 리뉴얼 모션/이펙트 (페이드인업 등)
   런타임: web/assets/js/renew/renew-runtime.js (window.RENEW)
   - [data-mo-fade] 요소가 뷰포트에 들어오면 .is-in 부여 → 트랜지션
   - 토큰(--mo-fade-*)은 tokens.css 에서 정의 (.mo-renew 스코프)
   ============================================================ */

/* 초기 상태: 살짝 아래 + 투명 */
.mo-renew [data-mo-fade] {
    opacity: 0;
    transform: translate3d(0, var(--mo-fade-shift), 0);
    transition:
        opacity var(--mo-fade-dur) var(--mo-fade-ease),
        transform var(--mo-fade-dur) var(--mo-fade-ease);
    will-change: opacity, transform;
}

/* 노출 상태 */
.mo-renew [data-mo-fade].is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 순차 지연(스태거) — 같은 그룹 내 자식에 단계별 delay */
.mo-renew [data-mo-fade-stagger]>[data-mo-fade]:nth-child(1) {
    transition-delay: 0s;
}

.mo-renew [data-mo-fade-stagger]>[data-mo-fade]:nth-child(2) {
    transition-delay: 0.08s;
}

.mo-renew [data-mo-fade-stagger]>[data-mo-fade]:nth-child(3) {
    transition-delay: 0.16s;
}

.mo-renew [data-mo-fade-stagger]>[data-mo-fade]:nth-child(4) {
    transition-delay: 0.24s;
}

.mo-renew [data-mo-fade-stagger]>[data-mo-fade]:nth-child(5) {
    transition-delay: 0.32s;
}

/* ----------------------------------------------------------
   스케일러 보조 — 풀블리드는 항상 폭 100%(JS 불필요, CSS 로 비율 축소)
   데스크탑 콘텐츠 래퍼([data-mo-scale])는 런타임이 zoom 으로 축소.
   ---------------------------------------------------------- */
.mo-renew [data-mo-fullbleed] {
    width: 100%;
    display: block;
}

/* zoom 적용 대상의 기준 정렬(콘텐츠 컬럼 센터) */
.mo-renew [data-mo-scale] {
    margin-left: auto;
    margin-right: auto;
}

/* ----------------------------------------------------------
   가로 넘침 차단을 뷰포트(body) 레벨로 — 1920 초과 모니터에서 슬라이드 섹션이
   페이지 셸(.mo-main/.mo-hosp/.device-body, 1920 섬) 밖 뷰포트 끝까지 풀블리드(100vw /
   우측 calc 확장) 해도 가로 스크롤바가 생기지 않게. 전 renew 페이지 공통.
   (clip = 스크롤 컨테이너 미생성, 가로 넘침만 차단 — overflow:hidden 의 이중 스크롤 회피)
   ---------------------------------------------------------- */
body.mo-renew {
    overflow-x: clip;
}