/* ============================================
   Proposal Slides — 16:9 等比例縮放框架
   設計畫布：1920 × 1080（固定，非 RWD）
   ============================================ */

:root {
  --stage-w: 1920;
  --stage-h: 1080;
  --sidebar-expanded: 280px;
  --color-bg: #ffffff;
  --color-slide: #ffffff;
  --color-text: #111111;
  --color-muted: #888888;
  --color-border: #e8e8e8;
  --color-accent: #111111;
  --color-thumb-active: #111111;
  --color-thumb-idle: #dddddd;
  --nav-size: 44px;
  --nav-inset: 24px;
  --transition-fast: 200ms ease;
  --transition-panel: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --cover-red: #e22d2a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- Viewport：sidebar + 投影片區 --- */
#viewport {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  background: #000;
  position: relative;
}

.stage-wrap {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.stage {
  position: relative;
  width: calc(var(--stage-w) * 1px);
  height: calc(var(--stage-h) * 1px);
  background: #000;
  overflow: hidden;
  transform-origin: center center;
  box-shadow: none;
  flex-shrink: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* --- 浮動切換鈕 + 左側可收合面板 --- */
.sidebar-fab {
  position: fixed;
  top: 16px;
  left: 16px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  transition: left var(--transition-panel), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sidebar-fab:hover {
  background: #f5f5f5;
  border-color: #ccc;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

.sidebar-fab-icon {
  display: block;
  width: 14px;
  height: 14px;
  position: relative;
}

.sidebar-fab-icon::before,
.sidebar-fab-icon::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
  border-radius: 1px;
  transition: transform var(--transition-fast);
}

.sidebar-fab-icon::before {
  width: 2px;
  height: 14px;
  left: 6px;
  top: 0;
}

.sidebar-fab-icon::after {
  width: 14px;
  height: 2px;
  left: 0;
  top: 6px;
}

#viewport.sidebar-open .sidebar-fab {
  left: calc(var(--sidebar-expanded) + 16px);
}

.sidebar-fab[aria-expanded="true"] .sidebar-fab-icon::before {
  transform: rotate(90deg);
}

.sidebar {
  flex-shrink: 0;
  width: 0;
  height: 100%;
  z-index: 50;
  overflow: hidden;
  transition: width var(--transition-panel);
  pointer-events: none;
}

.sidebar.is-expanded {
  width: var(--sidebar-expanded);
  pointer-events: auto;
}

.sidebar-panel {
  width: var(--sidebar-expanded);
  height: 100%;
  padding: 16px;
  background: #fafafa;
  border-right: 1px solid var(--color-border);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
}

.sidebar-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
  padding-top: 44px;
}

.thumbnails {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- 簡報區 --- */
.slides {
  position: absolute;
  inset: 0;
  background: var(--color-slide);
  cursor: pointer;
}

.slide {
  position: absolute;
  inset: 0;
  background: var(--color-slide);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0ms;
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.slide-content {
  width: 100%;
  height: 100%;
  padding: 64px 80px;
  color: var(--color-text);
}

/* --- 左右切換按鈕（固定於瀏覽器視窗邊界） --- */
.nav-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: var(--nav-size);
  height: var(--nav-size);
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-accent);
  cursor: pointer;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-btn__icon {
  display: block;
  flex-shrink: 0;
}

#stage-wrap:hover ~ .nav-btn,
.nav-btn:hover,
.nav-btn:focus-visible {
  opacity: 1;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.82);
}

.nav-btn:disabled {
  opacity: 0 !important;
  cursor: default;
}

.nav-prev {
  left: var(--nav-inset);
  transition: opacity var(--transition-fast), background var(--transition-fast), left var(--transition-panel);
}

#viewport.sidebar-open .nav-prev {
  left: calc(var(--sidebar-expanded) + var(--nav-inset));
}

.nav-next {
  right: var(--nav-inset);
}

/* ============================================
   進場動畫預設（data-animate）
   ============================================ */

[data-animate] {
  opacity: 0;
}

.slide.is-active [data-animate].is-animated {
  opacity: 1;
}

/* fade */
[data-animate="fade"].is-animated {
  animation: anim-fade var(--anim-dur, 600ms) var(--anim-ease, ease) var(--anim-delay, 0ms) both;
}

/* fade-up */
[data-animate="fade-up"].is-animated {
  animation: anim-fade-up var(--anim-dur, 600ms) var(--anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0ms) both;
}

/* fade-down */
[data-animate="fade-down"].is-animated {
  animation: anim-fade-down var(--anim-dur, 600ms) var(--anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0ms) both;
}

/* fade-left */
[data-animate="fade-left"].is-animated {
  animation: anim-fade-left var(--anim-dur, 600ms) var(--anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0ms) both;
}

/* fade-right */
[data-animate="fade-right"].is-animated {
  animation: anim-fade-right var(--anim-dur, 600ms) var(--anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0ms) both;
}

/* scale */
[data-animate="scale"].is-animated {
  animation: anim-scale var(--anim-dur, 600ms) var(--anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0ms) both;
}

/* slide-up */
[data-animate="slide-up"].is-animated {
  animation: anim-slide-up var(--anim-dur, 700ms) var(--anim-ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0ms) both;
}

@keyframes anim-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes anim-fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes anim-fade-down {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes anim-fade-left {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes anim-fade-right {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes anim-scale {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes anim-slide-up {
  from { opacity: 0; transform: translateY(80px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-animate].is-animated {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}