/* ============================================
   Page Transition System
   頁面切換過場動畫、骨架屏、操作 loading 回饋
   遵循 Style 3 (Friendly Minimalism) + 動畫規範
   ============================================ */

/* ========== 1. 頁面切換過場 ========== */

/* content-area 基礎過渡 */
.content-area {
  transition: opacity var(--duration-slow) var(--ease-out);
}

/* 舊頁面淡出 */
.content-area.page-exiting {
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-in);
  pointer-events: none;
}

/* 新頁面淡入 */
.content-area.page-entering {
  opacity: 0;
}

.content-area.page-entering.page-visible {
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-out);
}

/* ========== 2. 頂部流動載入條 (Material Indeterminate) ========== */

.page-progress-bar {
  position: fixed;
  top: 0;                 /* 全螢幕頂部，navbar 上方 */
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 10001;         /* 高於所有元素，包含 navbar */
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  background: var(--primary-50);
  transition: opacity var(--duration-fast) var(--ease-out);
}

.page-progress-bar.active {
  opacity: 1;
}

/* Material Design Indeterminate — 雙色帶交替流動 */
.page-progress-bar .progress-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
  transform-origin: left;
  animation: md-indeterminate-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.page-progress-bar .progress-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
  transform-origin: left;
  animation: md-indeterminate-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
}

@keyframes md-indeterminate-1 {
  0% {
    transform: translateX(-100%) scaleX(0);
  }
  30% {
    transform: translateX(-30%) scaleX(0.3);
  }
  60% {
    transform: translateX(30%) scaleX(0.6);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}

@keyframes md-indeterminate-2 {
  0% {
    transform: translateX(-100%) scaleX(0);
  }
  40% {
    transform: translateX(-30%) scaleX(0.4);
  }
  70% {
    transform: translateX(20%) scaleX(0.5);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}

/* ========== 2b. Modal 內部流動載入條 ========== */

/* 確保含有進度條的容器建立定位上下文 */
:is(.modal-content, .feedback-modal, .downgrade-modal,
    .documents-modal-panel, .share-modal,
    .sheet-preview-modal, .topup-modal-dialog):has(.modal-progress-bar) {
  position: relative;
}

.modal-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--duration-fast, 0.2s) ease;
  pointer-events: none;
  border-radius: var(--radius-2xl, 16px) var(--radius-2xl, 16px) 0 0;
}

.modal-progress-bar.active {
  opacity: 1;
}

.modal-progress-bar .progress-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--primary);
  border-radius: var(--radius-full, 9999px);
  transform-origin: left;
  animation: md-indeterminate-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.modal-progress-bar .progress-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--primary);
  border-radius: var(--radius-full, 9999px);
  transform-origin: left;
  animation: md-indeterminate-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
}

/* 所有情境統一 top: 0，不再需要按 navbar 高度調整 */

/* ========== 3. 卡片入場 Stagger 動畫 ========== */

.stagger-enter {
  opacity: 0;
  transform: translateY(var(--enter-translate-y));
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.stagger-enter.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger 延遲 — 最多 8 個項目 */
.stagger-enter:nth-child(1) { transition-delay: 0ms; }
.stagger-enter:nth-child(2) { transition-delay: calc(var(--stagger-delay) * 1); }
.stagger-enter:nth-child(3) { transition-delay: calc(var(--stagger-delay) * 2); }
.stagger-enter:nth-child(4) { transition-delay: calc(var(--stagger-delay) * 3); }
.stagger-enter:nth-child(5) { transition-delay: calc(var(--stagger-delay) * 4); }
.stagger-enter:nth-child(6) { transition-delay: calc(var(--stagger-delay) * 5); }
.stagger-enter:nth-child(7) { transition-delay: calc(var(--stagger-delay) * 6); }
.stagger-enter:nth-child(8) { transition-delay: calc(var(--stagger-delay) * 7); }

/* ========== 4. 骨架屏脈動 ========== */

@keyframes skeleton-pulse {
  0%   { opacity: 0.6; }
  50%  { opacity: 0.3; }
  100% { opacity: 0.6; }
}

.skeleton {
  background: var(--neutral-200);
  border-radius: var(--radius-md);
  animation: skeleton-pulse 1.5s var(--ease-in-out) infinite;
}

.skeleton-text {
  height: 14px;
  margin-bottom: var(--space-sm);
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-card {
  height: 180px;
  border-radius: var(--radius-xl);
}

/* ========== 5. 操作 Loading 回饋 ========== */

/* 卡片刪除中 — 半透明 + overlay spinner */
.card-deleting {
  position: relative;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.card-deleting::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s var(--ease-linear) infinite;
  z-index: 2;
}

/* 列表項刪除中 */
.row-deleting {
  position: relative;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity var(--duration-normal) var(--ease-out);
}

/* Toggle loading 狀態 */
.toggle-loading {
  pointer-events: none;
  opacity: 0.6;
}

/* 卡片觸發 loading — 邊框主色流光 */
.card-loading {
  position: relative;
  pointer-events: none;
  border-color: var(--primary) !important;
  overflow: hidden;
}

/* 流光色帶 — 沿卡片頂部來回掃動 */
.card-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--primary-light) 30%,
    var(--primary) 50%,
    var(--primary-light) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: card-border-flow 1.4s var(--ease-in-out) infinite;
  z-index: 1;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

@keyframes card-border-flow {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* 按鈕操作中 — 增強版（搭配 buttons.css 的 .btn-loading） */
.btn-action-loading {
  position: relative;
  pointer-events: none;
}

/* ========== 5b. 全畫面處理中遮罩 ========== */

.processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--duration-normal, 0.25s) var(--ease-out, ease-out);
  pointer-events: none;
}

.processing-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* 進度條容器 — 280px 寬 */
.processing-overlay-bar {
  width: 280px;
  height: 3px;
  background: var(--primary-50, #ffe8d6);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
  margin-bottom: var(--space-lg, 24px);
  position: relative;
}

.processing-overlay-bar .progress-line {
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  background: var(--primary, #FF6B35);
  border-radius: var(--radius-full, 9999px);
  transform-origin: left;
  animation: md-indeterminate-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.processing-overlay-bar .progress-line::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  background: var(--primary, #FF6B35);
  border-radius: var(--radius-full, 9999px);
  transform-origin: left;
  animation: md-indeterminate-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
}

/* 圖示 */
.processing-overlay-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-md, 16px);
  color: var(--primary, #FF6B35);
  animation: processing-pulse 2s var(--ease-in-out, ease-in-out) infinite;
}

@keyframes processing-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.95); }
}

/* 步驟文字 */
.processing-overlay-step {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #64748b);
  min-height: 1.5em;
  transition: opacity 0.3s ease;
}

.processing-overlay-step.fade {
  opacity: 0;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .processing-overlay {
    background: rgba(15, 23, 42, 0.88);
  }
}

html[data-theme="dark"] .processing-overlay {
  background: rgba(15, 23, 42, 0.88);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .processing-overlay-icon {
    animation: none;
  }
  .processing-overlay-bar .progress-line,
  .processing-overlay-bar .progress-line::after {
    animation: none;
    transform: translateX(0) scaleX(1);
  }
}

/* ========== 6. Modal 載入進場（overlay 先行 → 內容滑入） ========== */

/* 內容初始狀態：隱藏 + 偏移 */
.modal-content-enter {
  opacity: 0 !important;
  transform: translateY(-20px) !important;
}

/* 內容進場：移除此 class 後自然過渡到 .modal-overlay.show 的 translateY(0) */
/* transition 由 modal.css 的 .modal-content 提供 */

/* ========== 7. 刪除淡出動畫 ========== */

.card-removing {
  opacity: 0;
  transform: scale(var(--enter-scale));
  transition: opacity var(--duration-slow) var(--ease-in),
              transform var(--duration-slow) var(--ease-in);
}

/* ========== 7. 無障礙 — reduced-motion 自動歸零 ========== */
/* Token 系統已在 variables.css 處理，這裡處理 @keyframes */

@media (prefers-reduced-motion: reduce) {
  .stagger-enter {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-progress-bar .progress-line,
  .page-progress-bar .progress-line::after,
  .modal-progress-bar .progress-line,
  .modal-progress-bar .progress-line::after {
    animation: none;
    transform: translateX(0) scaleX(1);
  }

  .content-area.page-exiting,
  .content-area.page-entering {
    opacity: 1;
    transition: none;
  }

  .card-removing {
    transition: none;
  }

  .card-loading::before {
    animation: none;
    background: var(--primary);
    background-size: 100% 100%;
  }
}