/* ── 공통 등장 ── */
.ui-motion-enter,
.flow-stagger {
  opacity: 0;
  transform: translateY(10px);
  animation: uiMotionIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes uiMotionIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ui-motion-enter.ui-motion-from-left,
.flow-stagger.ui-motion-from-left {
  transform: translateX(-8px);
  animation-name: uiMotionInX;
}

@keyframes uiMotionInX {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 목록·카드 영역 갱신 (폴링 등) */
.ui-motion-soft {
  animation: uiMotionSoft 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes uiMotionSoft {
  from {
    opacity: 0.72;
  }
  to {
    opacity: 1;
  }
}

/* 펼침/접힘 */
.ui-reveal {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(6px);
  transition:
    max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.48s ease,
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.48s ease;
  margin-top: 0;
}

.ui-reveal.ui-reveal-open {
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 12px;
}

.ui-reveal.ui-reveal-out {
  opacity: 0;
  transform: translateY(-4px);
}

/* 토스트 */
#toast.ui-toast {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

#toast.ui-toast.ui-toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

#toast.ui-toast.ui-toast-out {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
}

/* 드롭다운·메뉴 */
.ui-pop-enter {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  animation: uiPopIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes uiPopIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 로그인·폼 알림 (hidden 대신) */
.alert.ui-alert {
  transition:
    opacity 0.48s ease,
    transform 0.48s ease,
    max-height 0.5s ease,
    margin 0.48s ease,
    padding 0.48s ease;
  max-height: 160px;
  overflow: hidden;
}

.alert.ui-alert.is-hidden {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0;
  pointer-events: none;
}

.alert.ui-alert.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 대시보드 뷰 내부 — step-flow와 통합 */
.dashboard-view-stage > .flow-step.is-active .ui-motion-enter,
.dashboard-view-stage > .flow-step.is-active .flow-stagger {
  opacity: 0;
  transform: translateY(10px);
  animation: uiMotionIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .ui-motion-enter,
  .flow-stagger,
  .ui-motion-soft,
  .ui-pop-enter,
  #toast.ui-toast,
  .alert.ui-alert,
  .dashboard-view-stage > .flow-step.is-active .ui-motion-enter,
  .dashboard-view-stage > .flow-step.is-active .flow-stagger {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .ui-reveal.ui-reveal-open {
    max-height: none;
    opacity: 1;
    transform: none;
  }
}