/* AIDRA 버튼 마이크로 인터랙션 — Amicro(MIT) 13종을 vanilla CSS 로 포팅.
 * 형태·variant 는 button.css. JS 몫(좌표·상태 래치)은 buttonMotion.js.
 *
 * 두 갈래로 나뉜다 —
 *   ① 상태를 말하는 모션(morph·color-morph·배지): 실제 상태(.is-on/.is-confirmed/.has-badge)에 묶인다.
 *      모션 축소 설정에서도 살아 있어야 한다(즉시 전환될 뿐) → 미디어쿼리 밖.
 *   ② 장식 모션(rotate·shake·pulse·ring 흔들림·glare·sparkle·slide-arrow·text-reveal·expand-ring):
 *      hover/focus 로만 돈다 → (hover: hover) + (prefers-reduced-motion: no-preference) 안.
 *
 * hover 규칙에는 항상 :focus-visible 을 같이 걸어 준다 — 원본이 onFocus 에 같은 핸들러를 물린 것과
 * 같은 취지로, 키보드 사용자도 동일한 피드백을 받아야 한다.
 */

/* ══ ① 상태 모션 — 실제 상태에 묶인다 ══ */

.btn__ico--a,
.btn__ico--b {
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--btn-spring);
}

/* 아이콘 A↔B 교차. is-on = 지속 상태(재생/일시정지·잠금·북마크), is-confirmed = 성공 직후 일시 래치.
 * ⚠️ .btn--swap 게이트가 반드시 필요하다 — B 겹 없이 .is-on 만 붙은 버튼(선택 상태를 쓰는 칩·탭·
 *   활성 내비)에서 A 겹을 지우면 아이콘이 아무것도 없이 사라진다. btn() 이 iconOn 이 있을 때만 붙인다. */
.btn--swap.is-on .btn__ico--a,
.btn--swap.is-confirmed .btn__ico--a { opacity: 0; transform: scale(0.5); }
.btn--swap.is-on .btn__ico--b,
.btn--swap.is-confirmed .btn__ico--b { opacity: 1; transform: scale(1); }

/* color-morph — 켜지면 채워진 아이콘이 색을 얻는다. 색은 호출부가 --btn-on-color 로 바꿀 수 있다. */
.btn-m-color-morph.is-on .btn__ico--b { color: var(--btn-on-color, var(--accent)); }
.btn-m-color-morph.is-on { color: var(--btn-on-color, var(--accent)); }

/* 알림 배지 — 실제 미읽음 수(setBadge)에만 반응한다. hover 와 무관. */
.btn.has-badge > .btn__icons::after {
  content: attr(data-badge);
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  letter-spacing: 0;
}
.btn.has-badge > .btn__icons { overflow: visible; }

/* ══ ② 장식 모션 ══ */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* ── slide-arrow: A 가 왼쪽으로 빠지고 B 가 오른쪽에서 들어온다 ── */
  .btn-m-slide-arrow .btn__icons--tail { width: 0; opacity: 0; transition: width var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
  .btn-m-slide-arrow:hover .btn__ico--a,
  .btn-m-slide-arrow:focus-visible .btn__ico--a { opacity: 0; transform: translateX(-10px); }
  .btn-m-slide-arrow:hover .btn__icons--tail,
  .btn-m-slide-arrow:focus-visible .btn__icons--tail { width: 16px; opacity: 1; }
  .btn-m-slide-arrow:hover .btn__icons--tail .btn__ico--b,
  .btn-m-slide-arrow:focus-visible .btn__icons--tail .btn__ico--b { opacity: 1; transform: translateX(0); }
  .btn-m-slide-arrow .btn__icons--tail .btn__ico--b { transform: translateX(10px); }

  /* ── rotate: 재생성·새로고침·설정 ── */
  .btn-m-rotate:hover .btn__ico--a,
  .btn-m-rotate:focus-visible .btn__ico--a { transform: rotate(180deg); }

  /* ── shake: 삭제 계열 경고 ── */
  .btn-m-shake:hover .btn__ico--a,
  .btn-m-shake:focus-visible .btn__ico--a { animation: btn-shake 0.4s var(--ease); }

  /* ── pulse: 좋아요·리액션 ── */
  .btn-m-pulse:hover .btn__ico--a,
  .btn-m-pulse:focus-visible .btn__ico--a { animation: btn-pulse 0.4s var(--ease); }

  /* ── ring: 알림 벨이 흔들리며 bell-ring 으로 바뀐다 ── */
  .btn-m-ring:hover .btn__ico--a,
  .btn-m-ring:focus-visible .btn__ico--a { opacity: 0; transform: rotate(15deg) scale(0.8); }
  .btn-m-ring:hover .btn__ico--b,
  .btn-m-ring:focus-visible .btn__ico--b { opacity: 1; transform: rotate(0) scale(1); animation: btn-ring 0.5s var(--ease); }
  .btn-m-ring .btn__ico--b { transform: rotate(-15deg) scale(0.8); }

  /* ── text-reveal: 라벨 두 장을 위로 밀어 올린다 + 아이콘 45° ── */
  .btn-m-text-reveal:hover .btn__label-col,
  .btn-m-text-reveal:focus-visible .btn__label-col { transform: translateY(calc(-1 * var(--btn-reveal-h))); }
  .btn-m-text-reveal:hover .btn__ico--a,
  .btn-m-text-reveal:focus-visible .btn__ico--a { transform: rotate(45deg); }

  /* ── glare: 비스듬한 광택 띠가 지나간다 ── */
  .btn-m-glare:hover::before,
  .btn-m-glare:focus-visible::before { animation: btn-glare 0.85s var(--ease) 0s infinite; animation-delay: 0s; }

  /* ── sparkle: AI 생성 완료 — 별 두 개가 시차를 두고 튄다 ── */
  .btn-m-sparkle:hover .btn__ico--a,
  .btn-m-sparkle:focus-visible .btn__ico--a { opacity: 0; transform: translateY(-15px) scale(0.8); }
  .btn-m-sparkle:hover .btn__ico--b,
  .btn-m-sparkle:focus-visible .btn__ico--b { opacity: 1; transform: translateY(0) scale(1); }
  .btn-m-sparkle .btn__ico--b { transform: translateY(15px) scale(0.8); }
  .btn-m-sparkle:hover .btn__spark,
  .btn-m-sparkle:focus-visible .btn__spark { opacity: 1; transform: scale(1) rotate(0); }
  .btn-m-sparkle:hover .btn__spark--2,
  .btn-m-sparkle:focus-visible .btn__spark--2 { transition-delay: 0.05s; }
}

/* glare 의 광택 띠 — 애니메이션이 없어도 자리는 잡아 둔다(hover 밖에서 보이지 않게 x 를 밖으로). */
.btn-m-glare { overflow: hidden; }
.btn-m-glare::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  transform: skewX(-20deg) translateX(-150%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  pointer-events: none;
  z-index: 1;
}

/* sparkle 의 별 두 개 — clip-path 로 그린 4각 별(외부 자산 0). */
.btn__spark {
  position: absolute;
  background: currentColor;
  opacity: 0;
  transform: scale(0) rotate(-45deg);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--btn-spring);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  pointer-events: none;
}
.btn__spark--1 { top: -6px; right: -5px; width: 7px; height: 7px; color: #ffe89a; }
.btn__spark--2 { top: 0; left: -7px; width: 5px; height: 5px; color: #ffd24a; }

/* ── expand-ring: 저장·제출이 실제로 성공한 순간(ping) 링이 한 번 퍼진다 ── */
.btn-m-expand-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-m-expand-ring.is-ping::after { animation: btn-expand-ring 0.6s ease-out; }
}

/* text-reveal 의 클립 구조 — 겉은 자르고 안이 움직인다.
 * ⚠️ 1em 으로는 한글이 잘린다(13px 에서 ㅡ·ㄴ 아래 획이 날아감) — 라틴만 보고 잡으면 놓치는 값이다.
 *   한 칸 높이를 --btn-reveal-h 로 묶어 두고 클립·각 줄·이동량이 같은 값을 쓰게 한다. */
.btn__label--reveal { --btn-reveal-h: 1.45em; display: block; height: var(--btn-reveal-h); overflow: hidden; }
.btn__label-col {
  display: block;
  transition: transform var(--t-fast) var(--btn-spring);
}
.btn__label-col > span { display: block; height: var(--btn-reveal-h); line-height: var(--btn-reveal-h); }

/* ══ keyframes ══ */

@keyframes btn-shake {
  0%   { transform: translateY(0) rotate(0); }
  25%  { transform: translateY(-2px) rotate(-10deg); }
  50%  { transform: translateY(0) rotate(10deg); }
  75%  { transform: translateY(-2px) rotate(-10deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes btn-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes btn-ring {
  0%   { transform: rotate(0); }
  25%  { transform: rotate(12deg); }
  50%  { transform: rotate(-10deg); }
  75%  { transform: rotate(6deg); }
  100% { transform: rotate(0); }
}

@keyframes btn-glare {
  0%   { transform: skewX(-20deg) translateX(-150%); }
  /* 0.85s 지나간 뒤 1s 쉬었다 다시 — 원본의 repeatDelay 1s 를 한 사이클 안에 접었다. */
  46%  { transform: skewX(-20deg) translateX(150%); }
  100% { transform: skewX(-20deg) translateX(150%); }
}

@keyframes btn-expand-ring {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}