/* 애니메이션 공용 — 11단계
   🔴 라이브러리 0개. CSP(script-src 'self')라 외부 스크립트를 못 쓰고,
      쓸 이유도 없다. 여기 있는 게 전부다.

   🔴 숨기는 규칙은 **전부 `.js-motion` 아래에만** 둔다.
      조건 없이 opacity:0 을 걸면 JS 가 실패했을 때 내용이 영원히 안 보인다.
      motion-init.js 가 표시를 붙이지 못하면 아무것도 안 숨는다 → 그냥 다 보인다.

   🔴 움직이는 속성은 transform 과 opacity 뿐이다.
      width·top·margin 을 움직이면 매 프레임 화면 전체를 다시 재는 셈이라 폰에서 버벅인다. */

/* ── B. 화면에 들어오면 아래에서 올라오며 나타남 ───────────── */
.js-motion [data-rise]{
  opacity:0;
  transform:translateY(var(--m-rise));
  transition:opacity var(--m-base) var(--m-ease),
             transform var(--m-base) var(--m-ease);
}
.js-motion [data-rise].is-in{ opacity:1; transform:none }

/* ── C. 여러 개가 차례로 ────────────────────────────────────
   --i 는 motion.js 가 넣는다. 🔴 8번째까지만 늦춘다 —
   30장이면 마지막이 1.2초 뒤에 나와서 "느리다" 가 된다. */
.js-motion [data-rise][style*="--i"]{
  transition-delay:calc(var(--i) * var(--m-stagger));
}

/* ── D. 누르면 살짝 작아짐 ─────────────────────────────────
   :active 만 쓴다. JS 없이 되고, 손을 떼면 바로 돌아온다. */
/* 🔴 처음엔 button 과 .btn 에만 걸어 두었다.
   헤더의 「사진 올리기」는 <a class="cta"> 라서 **눌러도 아무 반응이 없었다** (실측).
   누를 수 있는 것에는 전부 건다. */
.js-motion button:active,
.js-motion .btn:active,
.js-motion .cta:active,
.js-motion .icon:active,
.js-motion .size:active{ transform:scale(var(--m-press)) }
.js-motion button,.js-motion .btn,.js-motion .cta,.js-motion .icon,
.js-motion .size{ transition:transform var(--m-fast) var(--m-ease) }

/* ── E. 히어로 사진이 아주 천천히 커짐 ──────────────────────
   8초에 1.04배. 정지 사진인데도 살아 있어 보인다.
   🔴 무한 반복하지 않는다 — 한 번만. 계속 움직이면 읽는 데 방해가 된다. */
@keyframes hero-breathe{ from{ transform:scale(1) } to{ transform:scale(1.04) } }
.js-motion [data-breathe]{
  animation:hero-breathe 8s var(--m-ease) forwards;
  transform-origin:center;
}

/* ── A. 저절로 넘어가는 단계 목록 ───────────────────────────
   owner 가 mixtiles 에서 콕 집은 효과.
   지금 단계만 핑크·굵게, 왼쪽 막대가 0→100% 로 자란다. */
.steps-auto{ list-style:none; margin:0; padding:0 }
.steps-auto li{ position:relative; padding:var(--s3) 0 var(--s3) var(--s5) }
/* 왼쪽 세로 막대 — 회색 바탕 */
.steps-auto li::before{
  content:''; position:absolute; left:0; top:var(--s2); bottom:var(--s2);
  width:3px; border-radius:2px; background:var(--c-border);
}
/* 그 위에 핑크가 자라 오른다
   🔴 height 를 움직이면 안 된다. 매 프레임 레이아웃을 다시 재는 셈이라 폰에서 버벅인다.
      (내가 이 파일 맨 위에 적어 놓고 처음엔 height 로 만들었다 — 자체 검사에서 걸렸다)
      높이는 처음부터 다 준 뒤 **transform:scaleY** 로 늘린다. 겉보기는 같고 훨씬 가볍다. */
.steps-auto li::after{
  content:''; position:absolute; left:0; top:var(--s2);
  width:3px; height:calc(100% - var(--s4)); border-radius:2px;
  background:var(--c-btn-point-bg);
  transform:scaleY(0); transform-origin:top;
}
.js-motion .steps-auto li.is-on::after{
  animation:step-grow var(--m-step) linear forwards;
}
@keyframes step-grow{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
/* 🔴 동작을 끈 분에게는 막대가 안 자란다. 대신 켜진 단계를 꽉 채워 표시한다. */
.steps-auto li.is-on::after{ transform:scaleY(1) }

.steps-auto button{
  display:block; width:100%; text-align:left; background:none; border:0;
  padding:0; font:inherit; cursor:pointer;
  font-size:var(--t-btn); font-weight:600; color:var(--c-text-mute);
  min-height:var(--tap);
  transition:color var(--m-base) var(--m-ease);
}
/* 🔴 켜진 단계는 핫핑크 + 굵게.
   font-size 를 **이 규칙 안에** 다시 적는다. 두 가지 이유다.
     ① --t-lg 는 clamp(18px,…) 라 최소가 18px 인데, WCAG '큰 글씨' 는 18.66px 부터다.
        18px 굵게로는 완화 근거가 없다 — 좁은 폰에서 기준 미달이 된다. --t-btn(19px)을 쓴다.
     ② 검사기가 "색과 크기가 같은 규칙에 있는지" 로 완화 근거를 확인한다.
   색만으로 알리지 않는다 — 굵기와 왼쪽 막대가 함께 바뀐다. */
.steps-auto li.is-on button{ color:var(--c-text-brand); font-weight:700;
  font-size:var(--t-btn) }

/* 단계마다 딸린 사진 — 켜진 것만 보인다 */
.steps-shot{ position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--c-surface-alt); aspect-ratio:3/2 }
.steps-shot img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0 }
.js-motion .steps-shot img{ transition:opacity var(--m-slow) var(--m-ease) }
.steps-shot img.is-on{ opacity:1 }

/* ── F. 담겼을 때 숫자가 튀어오름 ──────────────────────────── */
@keyframes pop{ 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
.js-motion [data-pop].is-pop{ animation:pop var(--m-slow) var(--m-ease) }

/* 하단 고정 바가 아래에서 올라옴 */
@keyframes bar-up{ from{ transform:translateY(100%) } to{ transform:none } }
.js-motion .sticky[data-bar]{ animation:bar-up var(--m-base) var(--m-ease) }

/* ── 🔴 동작 줄이기 — 마지막 방어선 ─────────────────────────
   motion-init.js 가 이미 .js-motion 을 안 붙이지만,
   설정을 켠 채로 새로고침 없이 바뀌는 경우까지 여기서 막는다. */
@media (prefers-reduced-motion:reduce){
  .js-motion [data-rise]{ opacity:1 !important; transform:none !important }
  .js-motion [data-breathe]{ animation:none !important }
  .js-motion .steps-auto li.is-on::after{ animation:none !important;
    transform:scaleY(1) !important }
  .js-motion [data-pop].is-pop{ animation:none !important }
  .js-motion .sticky[data-bar]{ animation:none !important }
}