/* 페이지 진입 */
body.flow-page .login-card {
  animation: flowPageIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes flowPageIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 단계 전환 — 비활성 단계는 display:none으로 높이에 포함되지 않음 */
.flow-stage {
  position: relative;
  margin-top: 4px;
}

.flow-stage > .flow-step {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.65s;
}

.flow-stage > .flow-step:not(.is-active):not(.is-leaving):not(.is-entering) {
  display: none;
}

.flow-stage > .flow-step.is-leaving {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.flow-stage > .flow-step.is-active,
.flow-stage > .flow-step.is-entering {
  position: relative;
}

.flow-stage > .flow-step.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.flow-stage > .flow-step.is-leaving {
  opacity: 0;
  transform: translateY(-10px);
}

.flow-stage > .flow-step.is-entering {
  opacity: 0;
  transform: translateY(14px);
}

.flow-stage > .flow-step.is-active.is-entering {
  opacity: 1;
  transform: translateY(0);
}

/* 서브 패널 (탭, 이메일 박스 등) */
.flow-panel-stage {
  position: relative;
  min-height: 120px;
}

.flow-panel-stage > .flow-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.52s;
}

.flow-panel-stage > .flow-panel:not(.is-active):not(.is-leaving) {
  display: none;
}

.flow-panel-stage > .flow-panel.is-leaving {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.flow-panel-stage > .flow-panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.flow-panel-stage > .flow-panel.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.flow-reveal {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.68s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.55s ease,
    margin 0.55s ease;
  margin-top: 0;
}

.flow-reveal.is-open {
  max-height: 480px;
  opacity: 1;
  margin-top: 12px;
}

/* 알림 */
.alert.flow-alert {
  transition:
    opacity 0.52s ease,
    transform 0.52s ease,
    max-height 0.58s ease,
    margin 0.52s ease,
    padding 0.52s ease;
  max-height: 120px;
  overflow: hidden;
}

.alert.flow-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.flow-alert.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 대시보드 — 로그인과 동일한 진입·전환 */
body.dashboard-flow .sidebar {
  animation: flowPageIn 0.88s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.dashboard-flow .page-header {
  animation: flowPageIn 0.9s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.dashboard-flow .dashboard-view-stage {
  animation: flowPageIn 0.92s 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-header.is-meta-flow .page-header-left h1,
.page-header.is-meta-flow .page-desc {
  animation: flowMetaIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes flowMetaIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.flow-page .login-card,
  body.dashboard-flow .sidebar,
  body.dashboard-flow .page-header,
  body.dashboard-flow .dashboard-view-stage,
  .page-header.is-meta-flow .page-header-left h1,
  .page-header.is-meta-flow .page-desc,
  .flow-stage > .flow-step,
  .flow-panel-stage > .flow-panel,
  .flow-reveal,
  .alert.flow-alert {
    animation: none !important;
    transition: none !important;
  }

  .flow-stage > .flow-step:not(.is-active):not(.is-leaving):not(.is-entering) {
    display: none;
  }

  .flow-stage > .flow-step.is-active,
  .flow-panel-stage > .flow-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    display: block;
    position: relative;
  }
}