/* =========================================================
   모모듀 움직임(모션) — 홈 화면에만 더해지는 효과
   1) 첫 화면: 바뀌는 업종 이름 · 밑줄 그리기 · 떠다니는 물감 번짐
   2) "말만 하세요" 이야기 장면: 대화 → 홈페이지가 만들어짐 → 예약 알림
   3) 스크롤하면 하나씩 떠오르기 · 가격 숫자 올라가기
   움직임을 줄이는 설정을 켠 사람에게는 멈춘 화면을 보여 줘요.
   ========================================================= */

/* ---------- 1) 첫 화면 ---------- */
.ha { position: relative; isolation: isolate; }
.mo-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.mo-blob--a { width: 420px; height: 420px; background: #FFD3C7; top: -120px; left: -140px; animation: mo-drift 18s ease-in-out infinite alternate; }
.mo-blob--b { width: 360px; height: 360px; background: #FFE7B8; top: 60px; right: -120px; animation: mo-drift 22s ease-in-out -6s infinite alternate-reverse; }
.mo-blob--c { width: 300px; height: 300px; background: #D9EEDF; top: 360px; left: 30%; opacity: .4; animation: mo-drift 26s ease-in-out -12s infinite alternate; }
@keyframes mo-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(60px, 40px) scale(1.12); }
  100% { transform: translate(-30px, 80px) scale(.94); }
}

/* 바뀌는 업종 이름: 우리 [카페] 홈페이지 */
.mo-word { display: inline-block; vertical-align: bottom; height: 1.36em; overflow: hidden; position: relative; transition: width .5s cubic-bezier(.2, .8, .2, 1); color: var(--accent-text); }
.mo-word__list { display: flex; flex-direction: column; align-items: flex-start; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
.mo-word__list span { display: block; height: 1.36em; white-space: nowrap; }

/* 밑줄이 붓으로 그어지듯 */
.ha__title em::after { transform-origin: left center; transform: scaleX(0); animation: mo-brush .9s .9s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes mo-brush { to { transform: scaleX(1); } }

/* 무료 시안 버튼이 살짝 숨 쉬듯 */
.ha__cta { animation: ha-up .7s .3s both, mo-pulse 2.8s 2s ease-in-out infinite; }
@keyframes mo-pulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(255, 127, 102, .35), 0 0 0 0 rgba(255, 127, 102, .45); }
  50%      { box-shadow: 0 10px 24px rgba(255, 127, 102, .35), 0 0 0 12px rgba(255, 127, 102, 0); }
}

/* ---------- 2) "말만 하세요" 이야기 장면 ---------- */
.mo-story { padding: 56px 0 72px; text-align: center; }
.mo-story__label { display: inline-block; font-weight: 700; font-size: 15px; color: var(--accent-text); background: var(--accent-tint); border-radius: 999px; padding: 4px 14px; }
.mo-story__title { font-size: 30px; letter-spacing: -0.04em; margin-top: 12px; }
.mo-story__sub { color: var(--muted); margin-top: 8px; font-size: 17px; }

.mo-stage { position: relative; margin: 36px auto 0; max-width: 980px; height: 440px; }

/* 왼쪽: 휴대폰 대화 */
.mo-phone { position: absolute; left: 0; top: 30px; width: 230px; height: 400px; background: var(--ink); border-radius: 34px; padding: 10px; box-shadow: var(--shadow); z-index: 3; }
.mo-phone__screen { height: 100%; background: #F4EEE7; border-radius: 26px; padding: 34px 12px 12px; display: flex; flex-direction: column; gap: 10px; text-align: left; overflow: hidden; position: relative; }
.mo-phone__screen::before { content: ""; position: absolute; top: 10px; left: 50%; width: 70px; height: 16px; margin-left: -35px; background: var(--ink); border-radius: 999px; }
.mo-phone__who { font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: center; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.mo-bubble { max-width: 86%; font-size: 14px; line-height: 1.45; padding: 9px 12px; border-radius: 16px; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .4s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.mo-bubble--me { align-self: flex-end; background: var(--accent); color: var(--ink); border-bottom-right-radius: 4px; }
.mo-bubble--mo { align-self: flex-start; background: var(--white); border-bottom-left-radius: 4px; }
.mo-bubble--typing { display: flex; gap: 4px; padding: 12px 14px; }
.mo-bubble--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-light); animation: mo-dot 1s infinite; }
.mo-bubble--typing i:nth-child(2) { animation-delay: .15s; }
.mo-bubble--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mo-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

/* 오른쪽: 노트북 화면에서 홈페이지가 만들어짐 */
.mo-laptop { position: absolute; right: 0; top: 0; width: 700px; z-index: 1; }
.mo-screen { position: relative; background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 50px rgba(34, 32, 31, .16); aspect-ratio: 1200 / 760; }
.mo-screen .ha-bar { height: 26px; }
.mo-site { position: absolute; inset: 26px 0 0; padding: 18px; display: grid; grid-template-rows: 22px 1fr 90px; gap: 14px; }
.mo-sk { background: #F1ECE6; border-radius: 10px; opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.mo-sk--nav { display: flex; justify-content: space-between; background: none; }
.mo-sk--nav b, .mo-sk--nav i { background: #F1ECE6; border-radius: 6px; }
.mo-sk--nav b { width: 90px; }
.mo-sk--nav i { width: 240px; }
.mo-sk--hero { background: linear-gradient(120deg, #F6E2D3, #F1ECE6); }
.mo-sk--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; background: none; }
.mo-sk--row span { background: #F1ECE6; border-radius: 10px; }
.mo-real { position: absolute; inset: 26px 0 0; width: 100%; height: calc(100% - 26px); object-fit: cover; object-position: top; opacity: 0; transform: scale(1.03); transition: opacity .5s, transform .9s cubic-bezier(.2, .8, .2, 1); }

/* 붓 커서 */
.mo-cursor { position: absolute; z-index: 4; left: 78%; top: 30%; width: 26px; height: 26px; opacity: 0; transition: left 1s cubic-bezier(.6, 0, .2, 1), top 1s cubic-bezier(.6, 0, .2, 1), opacity .3s; pointer-events: none; }
.mo-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.mo-cursor::after { content: ""; position: absolute; left: -10px; top: -10px; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; transform: scale(.4); }
.mo-cursor.is-click::after { animation: mo-ripple .6s ease-out; }
@keyframes mo-ripple { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }

/* 예약 알림 */
.mo-toast { position: absolute; z-index: 5; left: 190px; top: 0; display: flex; gap: 10px; align-items: center; background: var(--white); border-radius: 18px; padding: 12px 16px; box-shadow: 0 18px 40px rgba(34, 32, 31, .22); text-align: left; opacity: 0; transform: translateY(-16px) scale(.9); transition: opacity .4s, transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.mo-toast__icon { width: 38px; height: 38px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; font-size: 19px; }
.mo-toast b { display: block; font-size: 14.5px; }
.mo-toast small { font-size: 13px; color: var(--muted); }

/* 아래 단계 표시 */
.mo-steps { list-style: none; padding: 0; margin: 28px auto 0; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mo-steps li { font-size: 15px; font-weight: 700; color: var(--muted); padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); transition: background .3s, color .3s, border-color .3s; }
.mo-steps li.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* 장면 순서: data-step 이 바뀌면 그 장면까지 보여요 */
.mo-stage[data-step="1"] .mo-b1,
.mo-stage[data-step="2"] .mo-b1, .mo-stage[data-step="2"] .mo-b2,
.mo-stage[data-step="3"] .mo-b1, .mo-stage[data-step="3"] .mo-b3,
.mo-stage[data-step="4"] .mo-b1, .mo-stage[data-step="4"] .mo-b3,
.mo-stage[data-step="5"] .mo-b1, .mo-stage[data-step="5"] .mo-b3,
.mo-stage[data-step="6"] .mo-b1, .mo-stage[data-step="6"] .mo-b3 { opacity: 1; transform: none; }

/* 홈페이지 화면은 첫 말풍선과 함께 바로 그려지기 시작해요 */
.mo-stage[data-step="1"] .mo-sk, .mo-stage[data-step="2"] .mo-sk { opacity: 1; transform: none; }
.mo-sk:nth-child(2) { transition-delay: .12s; }
.mo-sk:nth-child(3) { transition-delay: .24s; }
.mo-stage[data-step="2"] .mo-real, .mo-stage[data-step="3"] .mo-real, .mo-stage[data-step="4"] .mo-real,
.mo-stage[data-step="5"] .mo-real, .mo-stage[data-step="6"] .mo-real { opacity: 1; transform: none; }
.mo-stage[data-step="5"] .mo-cursor, .mo-stage[data-step="6"] .mo-cursor { opacity: 1; left: 29%; top: 85%; }
.mo-stage[data-step="6"] .mo-toast { opacity: 1; transform: none; }

/* ---------- 3) 스크롤하면 떠오르기 ---------- */
.mo-rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 110ms); }
.mo-rv.is-in { opacity: 1; transform: none; }
.process li.mo-rv { transition-delay: calc(var(--i, 0) * 180ms); }
.process li.mo-rv::after { content: ""; position: absolute; left: 0; top: -4px; height: 4px; width: 0; background: var(--accent); transition: width .9s ease; transition-delay: calc(var(--i, 0) * 180ms + .3s); }
@media (min-width: 900px) { .process li.mo-rv.is-in::after { width: 100%; } }

/* ---------- 휴대폰 화면 ---------- */
@media (max-width: 899px) {
  .mo-stage { height: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .mo-phone, .mo-laptop { position: relative; left: auto; right: auto; top: auto; }
  .mo-phone { height: 330px; width: 250px; }
  .mo-laptop { width: 100%; }
  .mo-toast { left: 50%; top: 290px; margin-left: -130px; width: 260px; }
}
@media (min-width: 900px) {
  .mo-story__title { font-size: 40px; }
}

/* ---------- 움직임 줄이기 설정 ---------- */
@media (prefers-reduced-motion: reduce) {
  .mo-blob, .ha__cta, .ha__title em::after { animation: none; }
  .ha__title em::after { transform: none; }
  .mo-rv { opacity: 1; transform: none; transition: none; }
}