/* 모션 — 화면에 들어오면 나타나고, 벗어나면 되돌아가서 위로 스크롤할 때도 다시 재생 */

/* 스크롤 진행 막대 */
.progress{position:fixed;top:0;left:0;z-index:50;width:100%;height:4px;background:#FFD43B;transform:scaleX(var(--p,0));transform-origin:0 50%}

/* 페이드업 · 팝 */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),translate .25s ease;transition-delay:var(--d,0s),var(--d,0s),0s}
.js .rv.pop{transform:scale(.86)}
.js .rv.in{opacity:1;transform:none}

/* 형광펜이 왼쪽에서 오른쪽으로 칠해짐 */
.js mark{background-size:0% 100%;background-repeat:no-repeat;transition:background-size .9s cubic-bezier(.2,.7,.2,1) .35s}
.js .in mark{background-size:100% 100%}

/* 체크 · 주차 번호 · 비교표 O 가 톡 튀어나옴 */
.js .checklist li::before{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0s) + .25s)}
.js .checklist li.in::before{transform:scale(1)}
.js .wk-num{opacity:0;transform:scale(.6) rotate(-12deg);transition:transform .5s cubic-bezier(.3,1.6,.5,1) .25s,opacity .3s .25s}
.js .week.in .wk-num{opacity:1;transform:none}
.js .cmp-table .o{transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1) calc(var(--i,0) * 60ms + .2s)}
.js .table-wrap.in .o{transform:scale(1)}

/* 강조 문장 — 형광펜이 칠해진 뒤 한 번 콩 */
.js .st-line.in mark{animation:stamp .6s cubic-bezier(.3,1.6,.5,1) 1.15s both}
@keyframes stamp{40%{transform:scale(1.12) rotate(-2deg)}}

/* 후기 빨간 박스가 사진이 나타난 뒤 톡 찍힘 */
.js .hl-box{opacity:0;transform:scale(1.12);transition:opacity .35s ease .45s,transform .45s cubic-bezier(.3,1.6,.5,1) .45s}
.js .in .hl-box{opacity:1;transform:none}

/* 선착순 점이 깜빡임 */
.seats-limit::before{animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* 상시 모션 — 은은하게 */
.star{display:inline-block;animation:twinkle 2.4s ease-in-out infinite}
.hero-kicker .star:last-child{animation-delay:1.2s}
.plan-badge,.medal{animation:float 2.8s ease-in-out infinite}
.btn-cta{position:relative}
.btn-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;animation:ring 2.2s ease-out infinite}
@keyframes twinkle{50%{transform:rotate(90deg) scale(1.25)}}
@keyframes float{50%{translate:0 -5px}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,200,0,.6)}100%{box-shadow:0 0 0 16px rgba(255,200,0,0)}}

/* 버튼 마우스 올림 */
.btn,.btn-cta{transition:translate .25s ease,filter .25s ease}
.btn:hover,.btn-cta:hover{translate:0 -3px;filter:brightness(1.04)}

/* 움직임 줄이기 설정을 켠 사용자는 모션 없이 */
@media (prefers-reduced-motion:reduce){
  .js .rv,.js mark,.js .checklist li::before,.js .wk-num,.js .cmp-table .o,.js .hl-box{opacity:1!important;transform:none!important;transition:none!important;background-size:100% 100%!important}
  .star,.plan-badge,.medal,.btn-cta::after,.st-line mark,.plan-premium::before,.seats-limit::before{animation:none!important}
}