/* 사이트 전체에 쓰는 움직임: 누르면 눌리고, 나타날 때 올라오고, 화면을 옮길 때 부드럽게 바뀐다.
   움직임 줄이기 설정을 켠 사용자에게는 모두 꺼진다. */
@media (prefers-reduced-motion: no-preference) {
  /* 화면 이동: 같은 사이트 안에서는 깜빡임 없이 부드럽게 겹쳐 바뀐다(지원하는 브라우저) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: dp-vt-out .18s ease both; }
  ::view-transition-new(root) { animation: dp-vt-in .32s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes dp-vt-out { to { opacity: 0; } }
  @keyframes dp-vt-in { from { opacity: 0; transform: translateY(8px); } }

  /* 버튼·링크 버튼: 올라오고 눌린다 */
  .btn, .analysis-v2-submit, .ask__btn, .store-cta, .dp-pressable, .app-promo__card, .upsell__ghost {
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn:hover:not(:disabled), .analysis-v2-submit:hover:not(:disabled), .store-cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, .16); }
  .btn:active:not(:disabled), .analysis-v2-submit:active:not(:disabled), .store-cta:active:not(:disabled), .app-promo__card:active { transform: translateY(0) scale(.97); box-shadow: none; }

  /* 입력칸: 포커스를 받으면 은은하게 빛난다 */
  input:not([type=checkbox]):not([type=radio]), textarea, select { transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
  input:not([type=checkbox]):not([type=radio]):focus-visible, textarea:focus-visible, select:focus-visible { box-shadow: 0 0 0 4px rgba(18, 107, 255, .14); }

  /* 칩·탭·알약: 가볍게 반응 */
  .filter-chip, .app-tab a, .recent-row .analysis-v2-recent-chip, .plan-chip, .app-subtabs button { transition: transform .18s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; }
  .filter-chip:hover, .plan-chip:hover { transform: translateY(-1px); }

  /* 스크롤하면 올라오며 나타난다 (JS가 켜져 있을 때만 시작 상태를 숨긴다) */
  html.js-motion .dp-reveal { opacity: 0; transform: translateY(22px); }
  html.js-motion .dp-reveal.is-in { opacity: 1; transform: none; transition: opacity .7s ease var(--dp-d, 0s), transform .8s cubic-bezier(.16, 1, .3, 1) var(--dp-d, 0s); }
  html.dp-motion-safe .dp-reveal { opacity: 1; transform: none; }

  /* 결과가 그려질 때: 줄이 차례로 올라온다 */
  .dp-row-in { animation: dp-row-in .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--dp-d, 0s); }
  @keyframes dp-row-in { from { opacity: 0; transform: translateY(10px); } }

  /* 숫자가 바뀔 때 살짝 튄다 */
  .dp-num-pop { animation: dp-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes dp-pop { 0% { transform: scale(.88); } 100% { transform: scale(1); } }

  /* 불러오는 중: 빛이 지나가는 뼈대 */
  .dash-skeleton, .skeleton, .store-state .skeleton { position: relative; overflow: hidden; }
  .dash-skeleton::after, .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .65) 50%, transparent 80%); transform: translateX(-100%); animation: dp-shimmer 1.3s ease-in-out infinite; }
  @keyframes dp-shimmer { to { transform: translateX(100%); } }

  /* 살아 있는 표시: 코인, 상태 점, 진행 막대 */
  .dash-coin__icon, .store-top__coin-icon { animation: dp-coin 3.6s ease-in-out infinite; }
  @keyframes dp-coin { 0%, 100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-2px) rotate(-6deg); } 70% { transform: translateY(0) rotate(4deg); } }
  .dash-status__dot { animation: dp-dot 1.8s ease-in-out infinite; }
  @keyframes dp-dot { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 5px transparent; } }
  .usage__bar i, .kw-summary__bar span, .aeo-donut { transition: width .9s cubic-bezier(.16, 1, .3, 1), --aeo-score .9s ease; }
  .pack-coins i { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
  .pricing-card--pack:hover .pack-coins i:nth-child(odd) { transform: translateY(-3px) rotate(-4deg); }
  .pricing-card--pack:hover .pack-coins i:nth-child(even) { transform: translateY(-5px) rotate(5deg); }

  /* 사이드바 메뉴: 눌렀을 때 아이콘이 반응 */
  .app-nav__item svg { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
  .app-nav__item:hover svg { transform: translateX(2px) scale(1.12); }
  .app-promo__go { transition: transform .22s ease; }
  .app-promo__card:hover .app-promo__go { transform: translateX(4px); }
}