/* motion.css — motion.js 가 프레임 단위로 그리는 모션의 CSS 쪽 절반.
   styles.css 의 "===== 애니메이션 =====" 블록에서 노드 재생성 때마다 처음부터
   재생되던 @keyframes v2-pop / v2-toast 진입 애니메이션을 걷어내고, 여기에는
   (1) 스프링이 건드리지 않는 상태 전환 (2) 합성 힌트 (3) 감소 모션 폴백만 남긴다.
   styles.css 다음에 로드된다(index.html). */

/* ---- keyed list 행 래퍼 ----
   Motion.list 의 create() 가 반환하는 요소에 붙는다.
   height/opacity/transform 을 JS 가 직접 쓰므로 여기에 transition 을 두면 서로 싸운다.
   overflow:hidden 은 enter/exit 동안만 JS 가 인라인으로 건다 — 상시로 두면 카드 그림자가 잘린다. */
.m-row {
  transition: none;
}
.m-row > * {
  will-change: transform;
}

/* 자산 탭: 종목 카드가 .asset-group 의 직접 flex 자식이었는데 keyed 렌더로
   .asset-group__items 안으로 한 겹 들어갔다 — 종목 간 간격(8px)을 여기서 유지한다. */
.asset-group__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 종목 카드 매수 로트 disclosure — 기본 접힘. 높이는 Motion.disclose 가 스프링으로 그린다.
   내부에 실제 내용(.lot-list)이 한 겹 들어 있어야 offsetHeight 측정이 된다. */
.holding-item__lots[data-lots] {
  overflow: hidden;
  height: 0;
}
.holding-item__lots[data-lots] .lot-item {
  will-change: transform;
}
.holding-chevron {
  will-change: transform;
}

/* ---- 탭 진입 스태거 ----
   Motion.staggerIn 이 opacity/transform 을 매 프레임 직접 쓰는 동안에만 붙는다.
   styles.css 의 `.view-panel.is-active { transition: opacity .16s }` 같은 규칙이
   스프링과 싸워 페이드가 곡선을 따라오지 못하는 것을 막는다. 끝나면 JS 가 떼어낸다. */
.m-staggering {
  transition: none !important;
  will-change: opacity, transform;
}

/* ---- 숫자 ticker ----
   Motion.ticker 가 매 프레임 텍스트를 갈아 끼우므로 폭이 고정돼야 흔들리지 않는다.
   (앱의 요약 숫자는 이미 tabular-nums 지만 keyed 렌더로 새로 만드는 노드까지 커버) */
.m-num {
  font-variant-numeric: tabular-nums;
}

/* ---- 예산 바 ----
   styles.css 의 `.budget-bar span { transition: width .6s ease }` 를 제거하고
   Motion.bars 가 스프링으로 그린다. */
.budget-bar span {
  transition: none;
  will-change: width;
}

/* ---- 바텀 시트 ----
   위치·딤 불투명도는 Motion.sheet 가 매 프레임 잡는다. CSS 는 초기 상태만.
   기존 `.sheet-overlay.is-open` 토글 규칙(styles.css)은 Motion.sheet(...).open()/.close() 로 대체. */
.sheet-overlay {
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.sheet-overlay.is-open {
  /* 클래스 토글은 더 이상 쓰지 않는다 — 남아 있어도 무해하도록 초기화 */
  opacity: 1;
}
.sheet-overlay__backdrop {
  opacity: 0;
  transition: none;
  will-change: opacity;
}
.sheet {
  opacity: 1;
  transform: translateY(110%);
  transition: none;
  will-change: transform;
}
.sheet-overlay.is-open .sheet {
  transform: translateY(110%);
}

/* 그랩바 — 끌어서 닫기 + 위로는 러버밴딩. 터치 타깃을 위해 상하 패딩을 넉넉히 준다. */
.sheet__grab {
  display: flex;
  justify-content: center;
  padding: 8px 0 10px;
  cursor: grab;
  touch-action: none;
}
.sheet__grab:active {
  cursor: grabbing;
}
.sheet__grab > span {
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--txt) 24%, transparent);
}

/* ---- 저장 버튼 모핑(M1) ----
   .morph-btn 은 Motion.morphButton 이 width/border-radius 를 직접 그리므로 overflow:hidden 으로
   내부 라벨이 줄어드는 폭 밖으로 삐져나오지 않게 가둔다. 체크 아이콘은 버튼 중앙에 겹쳐 둔다. */
.morph-btn {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.morph-btn .mb-label {
  display: inline-block;
  will-change: opacity, filter;
}
.morph-btn .mb-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  will-change: transform;
}
.morph-btn .mb-check svg {
  width: 22px;
  height: 22px;
}

/* ---- 토글 스위치 ----
   위치는 Motion.toggle 이 knob 의 transform 으로 직접 그린다 — CSS 쪽 left 전환은 없앤다. */
.toggle i {
  transition: none;
  will-change: transform;
}

/* ---- 작은 팝오버(필터 등) ----
   Motion.reveal 이 opacity/scale/filter/visibility 를 매 프레임 잡는다. 초기 상태만 여기서. */
.m-reveal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.94);
  transition: none;
}

/* ---- 토스트 ----
   styles.css 의 `.toast { animation: v2-toast ... }` 를 제거하고 Motion.toast 가 그린다.
   hidden 속성은 더 이상 쓰지 않으므로 초기 상태는 투명 + 아래로. */
.toast {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  animation: none;
}
.toast[hidden] {
  /* 혹시 남아 있어도 무해 */
  display: none;
}

/* ---- 감소 모션 ----
   motion.js 는 prefers-reduced-motion 을 감지해 스프링을 건너뛰고 목표값을 즉시 적용한다.
   CSS 쪽은 "이동"만 끈다 — 색·배경·불투명도 전환은 상태 이해를 돕는 요소라 남긴다
   (Emil: reduced-motion = fewer & gentler, not zero). styles.css 의 옛 전역 소등 블록은 삭제하고
   이 블록이 유일한 감소 모션 규칙이 된다. */
@media (prefers-reduced-motion: reduce) {
  /* @keyframes(팝오버 v2-pop 등)는 movement 이므로 즉시 끝낸다 */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* 위치가 바뀌는 전환만 제거 — 토글 노브 슬라이드, 시트/토스트 이동, 눌림 스케일, 다이얼로그 스케일 */
  .toggle i,
  .sheet,
  .toast,
  .confirm-card,
  .confirm-dim {
    transition: none !important;
  }
  .toast,
  .confirm-card {
    transform: none;
  }
  button:not(:disabled):active,
  [role="button"]:active {
    transform: none;
  }
}