/*
  Focus 介面進退場時間控制。

  回到整體時的退場速度：
    --focus-panel-exit-duration

  數值越大，左側「思考／設計／武術」與說明區離開舞台越慢。
  建議微調範圍：1.3s～2.2s。

  進場速度維持：
    --focus-panel-enter-duration
*/

:root {
  --focus-panel-enter-duration: 1s;
  --focus-panel-exit-duration: 1.65s;
}

/* 基礎狀態代表退場至畫布左側，因此這裡控制回到整體的速度。 */
.focus-panel {
  transition:
    transform var(--focus-panel-exit-duration) cubic-bezier(.22, .61, .36, 1),
    opacity .72s ease !important;
}

/* 進入領域時，覆寫回目前已驗證的 1 秒進場節奏。 */
body.is-focused .focus-panel {
  transition-duration: var(--focus-panel-enter-duration), .42s !important;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1), ease !important;
  transition-delay: .12s, .1s !important;
}

@media (prefers-reduced-motion: reduce) {
  .focus-panel,
  body.is-focused .focus-panel {
    transition-duration: .01ms, .01ms !important;
    transition-delay: 0ms, 0ms !important;
  }
}