/* 2026-10-24 스크롤 모션 그래픽 레이어
   - html.mx 일 때만 숨김·움직임이 적용된다(스크립트가 실패하거나 '동작 줄이기' 설정이면 원래 화면 그대로).
   - transform·opacity·clip-path만 움직여 모바일에서도 부드럽게 한다. 신청 폼은 건드리지 않는다. */

/* 기존 블록 단위 페이드는 끄고, 안쪽 요소 단위 모션으로 대체 */
.mx .a-reveal{opacity:1;transform:none;transition:none}

/* 1) 문단·카드: 아래에서 떠오르며 또렷해짐 */
.mx .mx-up{opacity:0;transform:translate3d(0,32px,0);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.16,.84,.24,1);transition-delay:var(--d,0ms)}
.mx .mx-up.in{opacity:1;transform:none}
.mx .mx-left{transform:translate3d(-28px,0,0)}
.mx .mx-left.in{transform:none}

/* 2) 큰 문장: 단어가 아래 마스크에서 한 단어씩 솟아오름 */
.mx .mx-split .mx-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.04em .02em .14em;margin:-.04em 0 -.14em}
.mx .mx-split .mx-wi{display:inline-block;opacity:0;transform:translate3d(0,108%,0) rotate(2deg);transform-origin:0 100%;transition:transform .9s cubic-bezier(.16,.84,.24,1),opacity .5s ease;transition-delay:calc(var(--i) * 60ms + var(--d,0ms))}
.mx .mx-split.in .mx-wi{opacity:1;transform:none}

/* 2-1) 강조 형광펜: 단어가 다 올라온 뒤 왼쪽에서 오른쪽으로 칠해짐 */
.mx .a-type:not(.a-dark) .a-big strong,.mx .a-pull .a-big strong{box-shadow:none;background:linear-gradient(var(--hl),var(--hl)) 0 88%/0% .34em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .9s cubic-bezier(.3,.7,.2,1);transition-delay:calc(var(--n,8) * 60ms + 200ms)}
.mx .a-type:not(.a-dark) .a-big.mx-split.in strong,.mx .a-pull .a-big.mx-split.in strong{background-size:100% .34em}
/* 어두운 장면의 노란 강조는 글자가 다 오른 뒤 은은하게 빛남 */
.mx .a-type.a-dark .mx-split strong .mx-wi{transition-property:transform,opacity,text-shadow}
.mx .a-type.a-dark .mx-split.in strong .mx-wi{text-shadow:0 0 18px rgba(255,214,0,.35)}

/* 3) 풀스크린 장면 사진: 스크롤에 따라 천천히 줌아웃 + 시차(스크립트가 --p 값을 넣는다) */
.mx .a-scene:not(.a-hero)>img{transform:translate3d(0,calc((var(--p,.5) - .5) * -9%),0) scale(calc(1.16 - var(--p,.5) * .14));will-change:transform}
.mx .a-scene:not(.a-hero)::after{opacity:calc(.55 + var(--p,.5) * .45)}

/* 3-1) 첫 화면: 사진이 서서히 다가오고 대사 → 큰 문장 순서로 등장 */
.mx .a-hero>img{animation:mx-kenburns 7s cubic-bezier(.2,.6,.2,1) both}
@keyframes mx-kenburns{from{transform:scale(1.14)}to{transform:scale(1)}}

/* 4) 이미지(수익 기록·사진·전자책 표지): 아래에서 커튼이 걷히듯 드러남 */
.mx .mx-img{opacity:0;clip-path:inset(18% 0 0 0 round 10px);transform:translate3d(0,40px,0);transition:clip-path 1.2s cubic-bezier(.16,.84,.24,1),opacity .7s ease,transform 1.2s cubic-bezier(.16,.84,.24,1);transition-delay:var(--d,0ms)}
.mx .mx-img.in{opacity:1;clip-path:inset(0 0 0 0 round 0);transform:none}
.mx .gift-book.mx-img.in,.mx .terrace-books>figure.mx-img.in,.mx .signup-gift-books>figure.mx-img.in{clip-path:none}

/* 4-1) 수익인증: 가로 넘김 대신 세로로 한 장씩 쌓는다(모션과 상관없이 항상 적용되는 배치) */
.a-proofs{overflow-x:hidden;overflow-x:clip}
.a-strip{display:grid;grid-template-columns:1fr;gap:clamp(22px,5vw,36px);overflow:visible;scroll-snap-type:none;max-width:520px;margin:0 auto;padding:0 24px}
.a-strip figure{flex:none;width:100%}
.a-proofs .a-hint{display:none}
/* 내려갈 때마다 카드가 좌·우에서 번갈아 기울어진 채 날아와 제자리에 놓인다 */
.mx .a-strip>figure.mx-img{clip-path:none;transform:translate3d(-56px,60px,0) rotate(-4deg);transition:opacity .7s ease,transform 1.1s cubic-bezier(.16,.84,.24,1)}
.mx .a-strip>figure.mx-img:nth-child(even){transform:translate3d(56px,60px,0) rotate(4deg)}
.mx .a-strip>figure.mx-img.in,.mx .a-strip>figure.mx-img.in:nth-child(even){opacity:1;transform:none}

/* 5) 숫자: 올라가는 동안 살짝 강조 */
.mx b.num.mx-counting{color:inherit;font-variant-numeric:tabular-nums}