/* 에이치태그 가이드 공통 모션 (2026-10-09)
   - 스크립트가 붙인 클래스(html.hm)가 있을 때만 동작한다. 스크립트가 없거나 실패하면 모든 내용이 그대로 보인다.
   - 움직임 줄이기 설정(prefers-reduced-motion)을 켠 사용자에게는 아무 움직임도 주지 않는다. */

/* 1) 스크롤하면 아래에서 떠오르는 등장 */
/* 관찰자나 스크립트가 중단돼도 텍스트는 숨기지 않는다. */
.rv{opacity:1!important;transform:none!important;}
html.hm .hm-pre{opacity:1;transform:none;}
html.hm .hm-pre.hm-in{animation:hmReveal .65s cubic-bezier(.2,.7,.3,1) both;}

/* 2) 첫 화면 배경 빛 번짐이 천천히 움직임 */
@keyframes hmDrift{0%{transform:translate3d(0,0,0) scale(1);}100%{transform:translate3d(-40px,26px,0) scale(1.08);}}
@keyframes hmDrift2{0%{transform:translate3d(0,0,0) scale(1);}100%{transform:translate3d(36px,-22px,0) scale(1.06);}}
html.hm .hero::before,html.hm #hero::before{animation:hmDrift 14s ease-in-out infinite alternate;}
html.hm .hero::after,html.hm #hero::after{animation:hmDrift2 17s ease-in-out infinite alternate;}

/* 3) 에이치태그 소개 첫 화면 대화창: 말풍선이 차례로 도착 */
@keyframes hmMsg{0%{opacity:0;transform:translateY(10px) scale(.97);}100%{opacity:1;transform:none;}}
html.hm .ha-msgs > *{opacity:0;animation:hmMsg .5s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes hmBadge{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
html.hm .ha-badge{animation:hmBadge 3.2s ease-in-out 2.6s infinite;}

/* 4) 카카오톡 상담 카드: QR 주변에 부드러운 신호 */
@keyframes hmPing{0%{box-shadow:0 0 0 0 rgba(254,229,0,.0),0 0 0 0 rgba(37,99,235,.28);}70%{box-shadow:0 0 0 0 rgba(254,229,0,0),0 0 0 12px rgba(37,99,235,0);}100%{box-shadow:0 0 0 0 rgba(254,229,0,0),0 0 0 0 rgba(37,99,235,0);}}
html.hm .hm-kakao .hm-qr{animation:hmPing 2.6s ease-out 1s infinite;}

/* 5) 랭킹 안내 흐름 칩: 차례로 켜지고 마지막 칩은 은은하게 강조 */
@keyframes hmPop{0%{opacity:0;transform:scale(.85);}100%{opacity:1;transform:none;}}
html.hm .flow.hm-go .chip,html.hm .flow.hm-go .arw{opacity:0;animation:hmPop .42s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes hmGlow{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}50%{box-shadow:0 0 0 6px rgba(255,255,255,.0),0 6px 18px rgba(0,0,0,.14);}}
html.hm .flow.hm-go .chip.fin{animation:hmPop .42s cubic-bezier(.2,.7,.3,1) forwards,hmGlow 2.4s ease-in-out 2s infinite;}

/* 6) 계산식 상자의 + = 기호가 살짝 튀어 오름 */
html.hm .formula.hm-go .op{animation:hmPop .5s cubic-bezier(.3,1.6,.5,1) both;}

/* 7) 막대 그래프(에이치태그 소개의 일하는 구조): 왼쪽에서 밀려 들어옴 */
@keyframes hmSlide{0%{opacity:0;transform:translateX(-24px);}100%{opacity:1;transform:none;}}
html.hm .ha-bars.hm-go .ha-bar{opacity:0;animation:hmSlide .6s cubic-bezier(.2,.7,.3,1) forwards;}

/* 8) 회사 홈: 발견 → 위치 확인 → 결제, 2초 이내에 끝나는 대표 모션. */
@keyframes hmPhone{from{opacity:.25;translate:0 36px}to{opacity:1;translate:0 0}}
@keyframes hmCheck{from{scale:.75}to{scale:1}}
@keyframes hmReveal{from{opacity:.55;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes hmJourney{from{opacity:.55;translate:0 20px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes hmLogo{to{transform:translateX(-50%)}}
html.hm .phone{animation:hmPhone .8s cubic-bezier(.2,.7,.3,1) both}
/* LCP가 되는 전경 폰은 즉시 표시하고, 뒤쪽 두 폰만 순차 등장한다. */
html.hm .phone-one{animation:none}
html.hm .phone-two{animation-delay:.25s}html.hm .phone-three{animation-delay:.5s}
html.hm .mock-check{animation:hmCheck .45s cubic-bezier(.2,1.5,.4,1) 1.1s both}
html.hm [data-reveal].hm-in{animation:hmReveal .65s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--reveal-delay,0s)}
html.hm [data-journey].hm-in .journey-illustration{animation:hmJourney .85s cubic-bezier(.2,.7,.3,1) both}
html.hm [data-journey].hm-in .journey-stages li{animation:hmReveal .55s ease-out both;animation-delay:.2s}
html.hm [data-journey].hm-in .journey-stages li:nth-child(2){animation-delay:.35s}
html.hm [data-journey].hm-in .journey-stages li:nth-child(3){animation-delay:.5s}
html.hm .logo-track{animation:hmLogo 35s linear infinite}
.logo-section:hover .logo-track,.logo-section:focus-within .logo-track,.logo-section.is-paused .logo-track,.logo-section:has(#pause-logos:checked) .logo-track{animation-play-state:paused}
/* reduced-motion은 이전 페이지의 인라인 모션도 함께 멈춘다. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.hm .hm-pre,.rv,html.hm .ha-msgs>*,html.hm .ha-bars.hm-go .ha-bar,html.hm .flow.hm-go .chip,html.hm .flow.hm-go .arw{opacity:1!important;transform:none!important;translate:none!important}
}
html.hm .hm-pre.hm-in{animation-delay:var(--reveal-delay,0s)}

/* 서비스 카드: 진입은 한 번, 자세히 보기 링크의 hover와 포커스에만 반응한다. */
@keyframes hmServiceArt{from{opacity:.45;scale:.92}to{opacity:1;scale:1}}
@keyframes hmServiceBrand{from{opacity:.5;translate:0 12px;rotate:-16deg}to{opacity:1;translate:0 0;rotate:-9deg}}
@media(prefers-reduced-motion:no-preference){
  .service-card:not(.pending){transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
  .service-illustration,.service-brand,.service-spark,.service-orbit{transition:translate .35s ease,rotate .35s ease,scale .35s ease,opacity .35s ease}
  html.hm .service-card.hm-in .service-illustration{animation:hmServiceArt .7s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:var(--reveal-delay,0s)}
  html.hm .service-card.hm-in .service-brand{animation:hmServiceBrand .65s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:calc(var(--reveal-delay,0s) + .1s)}
  .service-card:not(.pending):is(:hover,:focus-within){transform:translateY(-4px)}
  .service-card:not(.pending):is(:hover,:focus-within) .service-illustration{translate:5px -7px;scale:1.035}
  .service-card:not(.pending):is(:hover,:focus-within) .service-brand{translate:-2px -5px;rotate:0deg}
  .service-card:not(.pending):is(:hover,:focus-within) .service-spark{rotate:45deg;scale:1.1;opacity:1}
  .service-card:not(.pending):is(:hover,:focus-within) .service-orbit{rotate:-10deg}
}
/* 진행 과정/전담 관리: 콘텐츠는 정적으로 보이며 진입 때에만 짧게 움직인다. */
@keyframes hmProcessObject{from{opacity:.65;translate:0 16px;rotate:-3deg;scale:.94}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes hmProcessAccent{from{opacity:.2;scale:.5;rotate:-35deg}to{opacity:1;scale:1;rotate:12deg}}
@keyframes hmPromiseRibbon{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:no-preference){
  html.hm [data-process-step].hm-entered .process-art img{animation:hmProcessObject .7s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:var(--process-delay,0s)}
  html.hm [data-process-step].hm-entered .process-accent{animation:hmProcessAccent .55s ease-out backwards;animation-delay:calc(var(--process-delay,0s) + .15s)}
  html.hm [data-promise-main].hm-entered .promise-art img{animation:hmProcessObject .8s cubic-bezier(.2,.7,.3,1) backwards}
  html.hm [data-promise-main].hm-entered .promise-ribbon path{animation:hmPromiseRibbon 1.2s ease-out both}
  html.hm [data-promise-item].hm-entered .promise-icon{animation:hmProcessObject .6s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:var(--promise-delay,0s)}
}
@media(min-width:761px){.process-card:nth-child(2){--process-delay:.15s}.process-card:nth-child(3){--process-delay:.3s}.process-card:nth-child(4){--process-delay:.45s}.promise-item:nth-child(2){--promise-delay:.1s}.promise-item:nth-child(3){--promise-delay:.2s}.promise-item:nth-child(4){--promise-delay:.3s}}