/* MOTION1015i — 지게차연구소 움직임. 영상 파일 없이 CSS·JS 만. «움직임 줄이기» 설정이면 전부 멈춘 그림 */
:root{--m-ease:cubic-bezier(.16,1,.3,1)}

/* 1. 첫 화면 — 글자가 차례로 올라오고, 사진이 오른쪽에서 들어온 뒤 가격표가 뜬다 */
html.m-on .hero-txt>*{animation:m-rise .9s var(--m-ease) both}
html.m-on .hero-txt>*:nth-child(2){animation-delay:.08s}
html.m-on .hero-txt>*:nth-child(3){animation-delay:.18s}
html.m-on .hero-txt>*:nth-child(4){animation-delay:.3s}
html.m-on .hero-car{animation:m-slide 1.1s var(--m-ease) .12s both}
html.m-on .hero-car img{animation:m-settle 1.6s var(--m-ease) .12s both}
html.m-on .hero-car .hc-cap{animation:m-pop .7s var(--m-ease) .75s both}
.hero .kicker{position:relative}
html.m-on .hero .kicker::after{content:"";display:block;width:56px;height:3px;border-radius:3px;background:var(--blue);margin-top:8px;transform-origin:left;animation:m-grow .9s var(--m-ease) .35s both}
@keyframes m-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes m-slide{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes m-settle{from{transform:scale(1.05)}to{transform:none}}
@keyframes m-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes m-grow{from{transform:scaleX(0)}to{transform:none}}

/* 2. 아래로 내려가면 칸들이 차례로 들어온다 (JS 가 화면 밖에 있는 것에만 m-pre 를 붙임 → JS 없으면 그냥 보임) */
.m-pre{opacity:0;transform:translateY(18px)}
.m-in{opacity:1;transform:none;transition:opacity .7s var(--m-ease),transform .8s var(--m-ease);transition-delay:var(--m-d,0s)}

/* 3. 형식 칸 — 손을 올리면 살짝 떠오르고 화살표가 민다 */
.tile{transition:transform .45s var(--m-ease),border-color .2s,box-shadow .3s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tile em::after{content:"→";display:inline-block;margin-left:4px;opacity:0;transform:translateX(-4px);transition:transform .45s var(--m-ease),opacity .3s}
.tile:hover em::after{opacity:1;transform:none}

/* 4. 매물 카드 — 사진이 조금 다가오고 제원 알약이 차례로 파랗게 */
.card .ph{overflow:hidden}
.card .ph img{transition:transform .7s var(--m-ease)}
.card:hover .ph img,.card-a:focus-visible .ph img{transform:scale(1.04)}
.card .mini li{transition:background-color .3s,color .3s}
.card:hover .mini li{background:var(--blue-l);color:var(--blue-d)}
.card:hover .mini li:nth-child(2){transition-delay:.05s}
.card:hover .mini li:nth-child(3){transition-delay:.1s}
.card:hover .mini li:nth-child(4){transition-delay:.15s}

/* 5. 렌탈 시작까지 — 파란 줄이 차례로 채워지고 점이 칸마다 멈춘다 */
.steps.m-run{position:relative}
.steps.m-run li{transition:border-color .35s,box-shadow .35s,transform .5s var(--m-ease)}
.steps.m-run li.on{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
.steps.m-run li.now{transform:translateY(-3px)}
.m-rail{position:absolute;pointer-events:none;background:var(--line);border-radius:3px}
.m-rail i{position:absolute;inset:0;background:var(--blue);border-radius:3px;transform-origin:left top}
.m-dot{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:3px solid var(--blue);background:transparent;box-shadow:0 0 0 5px rgba(31,95,214,.14);pointer-events:none}

/* 6. 모든 쪽 제목부 — 글자가 차례로 올라오고 밑줄이 그어진다 */
html.m-on .page-h .wrap>:not(.ph-ill){animation:m-rise .85s var(--m-ease) both}
html.m-on .page-h .wrap>:nth-child(2){animation-delay:.05s}
html.m-on .page-h .wrap>:nth-child(3){animation-delay:.13s}
html.m-on .page-h .wrap>:nth-child(4){animation-delay:.21s}
html.m-on .page-h .wrap>:nth-child(5){animation-delay:.29s}
html.m-on .page-h .ph-ill{animation:m-fade 1s var(--m-ease) .2s both}
.page-h .kicker{position:relative}
html.m-on .page-h .kicker::after{content:"";display:block;width:56px;height:3px;border-radius:3px;background:var(--blue);margin-top:8px;transform-origin:left;animation:m-grow .9s var(--m-ease) .3s both}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
/* 7. 카드·알약 — 손을 올리면 살짝 떠오름 */
.rcard,.rplans li,.area3>li,.rkinds>li,.vcard{transition:transform .45s var(--m-ease),box-shadow .3s}
@media (hover:hover){.rcard:hover,.rplans li:hover,.area3>li:hover,.rkinds>li:hover,.vcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}}

@media (prefers-reduced-motion:reduce){
  html.m-on .page-h .wrap>*,html.m-on .page-h .kicker::after{animation:none!important}
  .rcard:hover,.rplans li:hover,.area3>li:hover,.rkinds>li:hover,.vcard:hover{transform:none}
  html.m-on .hero-txt>*,html.m-on .hero-car,html.m-on .hero-car img,html.m-on .hero-car .hc-cap,html.m-on .hero .kicker::after{animation:none!important}
  .m-pre{opacity:1;transform:none}
  .tile:hover,.card:hover .ph img{transform:none}
  .m-dot,.m-rail{display:none}
}