/*
  모든 모션은 요소가 뷰포트에 들어올 때 inc/motion.js(IntersectionObserver)가
  .is-inview 클래스를 1회만 부여하면서 시작된다.
  섹션 루트: .m-fill / .m-grow / .m-glow / .m-step / .m-fade
  대상 자식: .m-fill__bar / .m-grow__item / .m-glow__bulb / .m-step__item / .m-fade__item
  .m-grow__item, .m-step__item, .m-fade__item 은 순서를 style="--d:0,1,2..."로 지정한다.
*/

/* m-fill: 게이지 좌→우 채움 (1.4s) */
.m-fill__bar { width: 0; }
.m-fill.is-inview .m-fill__bar { animation: mFill 1.4s ease-out forwards; }

/* m-grow: 막대 좌측 기준 가로 확대 (1.0s, 항목별 0.2s 지연) */
.m-grow__item { transform: scaleX(0); transform-origin: left; }
.m-grow.is-inview .m-grow__item {
  animation: mGrow 1.0s ease-out forwards;
  animation-delay: calc(var(--d, 0) * 0.2s);
}

/* m-glow: 전구 밝기 (2.6s 무한 반복, 히어로 전용) */
.m-glow__bulb { opacity: .4; }
.m-glow.is-inview .m-glow__bulb { animation: mGlow 2.6s ease-in-out infinite; }

/* m-step: 위→아래 순차 등장 (0.15s 간격) */
.m-step__item { opacity: 0; transform: translateY(-12px); }
.m-step.is-inview .m-step__item {
  animation: mStep .5s ease-out forwards;
  animation-delay: calc(var(--d, 0) * 0.15s);
}

/* m-fade: 순차 페이드인 (0.04s 간격, 캘린더 전용) */
.m-fade__item { opacity: 0; }
.m-fade.is-inview .m-fade__item {
  animation: mFade .4s ease-out forwards;
  animation-delay: calc(var(--d, 0) * 0.04s);
}

@keyframes mFill  { to { width: 100%; } }
@keyframes mGrow  { to { transform: scaleX(1); } }
@keyframes mGlow  { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes mStep  { to { opacity: 1; transform: translateY(0); } }
@keyframes mFade  { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .m-fill__bar, .m-grow__item, .m-glow__bulb, .m-step__item, .m-fade__item {
    animation: none !important;
  }
  .m-fill__bar  { width: 100%; }
  .m-grow__item { transform: none; }
  .m-glow__bulb { opacity: 1; }
  .m-step__item, .m-fade__item { opacity: 1; transform: none; }
}