/* ============================================================
   SOLEINE — Navigation
   圓形展開式導覽（改進版）
   Logo 不動；按鈕在淺弧上等距分布
   ============================================================ */

/* 隱藏原本獨立的終端按鈕（已整合進弧形） */
#terminal-btn { display: none; }

/* ── 容器 ── */
#nav-container {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}

/* ── Logo（不動） ── */
#nav-logo {
  position: relative;
  width: var(--nav-size-collapsed);
  height: var(--nav-size-collapsed);
  cursor: none;
  z-index: 21;
}

#nav-logo-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    var(--color-logo-orange) 0%,
    var(--color-logo-orange) 20%,
    #C4486A 34%,
    var(--color-logo-purple) 50%,
    var(--color-logo-purple) 70%,
    #C4486A 82%,
    var(--color-logo-orange) 100%
  );
  box-shadow:
    0 0 16px rgba(212, 137, 90, 0.35),
    0 0 32px rgba(138, 122, 172, 0.20);
  transition: all var(--transition-elastic);
  animation: logoBreathe 4s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

#nav-logo-inner::after {
  content: '';
  position: absolute;
  width: 40%; height: 40%; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  top: 15%; left: 20%;
  filter: blur(4px);
}

@keyframes logoBreathe {
  0%, 100% {
    box-shadow:
      0 0 16px rgba(212, 137, 90, 0.35),
      0 0 32px rgba(138, 122, 172, 0.20);
  }
  50% {
    box-shadow:
      0 0 24px rgba(212, 137, 90, 0.50),
      0 0 48px rgba(138, 122, 172, 0.30);
  }
}

/* 軌道環 */
#nav-logo-ring {
  position: absolute;
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 1px solid rgba(200, 194, 184, 0.15);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: navLogoRingRotate 12s linear infinite;
  pointer-events: none;
}

#nav-logo-ring::before {
  content: '';
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--silver-300);
  top: -2px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 5px var(--silver-300);
}

@keyframes navLogoRingRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── 展開容器 ── */
#nav-expanded {
  position: absolute;
  bottom: calc(var(--nav-size-collapsed) / 2 - 140px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-med);
}

#nav-expanded.visible {
  opacity: 1;
  pointer-events: all;
}

/* ── 弧形按鈕 ── */
.nav-btn {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: none;
  display: flex; align-items: center; justify-content: center;

  /* 玻璃質感 */
  background: var(--frost-mid);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-inner);

  /* 收合初始狀態 */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: opacity var(--transition-med),
              transform var(--transition-elastic),
              background var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

/* 外層雙框 */
.nav-btn::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--border-outer);
  pointer-events: none;
  transition: border-color var(--transition-fast);
}

/* 展開狀態 */
.nav-btn.revealed {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Hover */
.nav-btn:hover {
  background: var(--frost-strong);
  transform: translate(-50%, -50%) scale(1.12);
}

/* 當前頁面 */
.nav-btn.current {
  border-color: var(--silver-300);
  background: rgba(245, 244, 242, 0.10);
}
.nav-btn.current::before {
  border-color: rgba(200, 194, 184, 0.18);
}


/* ── 內圓（保留各頁面識別色） ── */
.nav-btn-inner {
  width: 28px; height: 28px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: transform var(--transition-elastic), filter var(--transition-fast);
}

.nav-btn:hover .nav-btn-inner {
  transform: scale(1.08);
  filter: brightness(1.25);
}

/* 高光 */
.nav-btn-inner::after {
  content: '';
  position: absolute;
  width: 35%; height: 35%; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  top: 10%; left: 15%;
  filter: blur(2px);
  pointer-events: none;
}

/* ── 標籤（移至中心） ── */
.nav-btn-label {
  display: none;
}

/* 中心標籤容器 */
.nav-center-label {
  position: absolute;
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 22;
}

/* 中心標籤顯示時 */
.nav-center-label.active {
  opacity: 1;
}

.nav-center-label.active::before {
  opacity: 1;
}

/* 中心標籤背景 */
.nav-center-label::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(80, 80, 90, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(120, 120, 130, 0.25);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* ── 各按鈕顏色（內圓保留行星配色，不動） ── */

.nav-btn--observatory {
  border-color: rgba(122, 154, 184, 0.30);
}
.nav-btn--observatory:hover {
  border-color: rgba(168, 184, 216, 0.55);
  box-shadow: 0 0 14px rgba(168, 184, 216, 0.18);
}
.nav-btn--observatory::before { border-color: rgba(122, 154, 184, 0.08); }
.nav-btn--observatory .nav-btn-inner {
  background: radial-gradient(circle at 35% 35%, var(--color-obs-glow), var(--color-obs-primary));
  box-shadow: 0 0 8px rgba(168, 184, 216, 0.28);
}

.nav-btn--commission {
  border-color: rgba(196, 154, 80, 0.30);
}
.nav-btn--commission:hover {
  border-color: rgba(232, 192, 112, 0.55);
  box-shadow: 0 0 14px rgba(232, 192, 112, 0.18);
}
.nav-btn--commission::before { border-color: rgba(196, 154, 80, 0.08); }
.nav-btn--commission .nav-btn-inner {
  background: radial-gradient(circle at 35% 35%, var(--color-comm-glow), var(--color-comm-primary));
  box-shadow: 0 0 8px rgba(232, 192, 112, 0.28);
}

.nav-btn--log {
  border-color: rgba(106, 154, 138, 0.30);
}
.nav-btn--log:hover {
  border-color: rgba(140, 188, 172, 0.55);
  box-shadow: 0 0 14px rgba(140, 188, 172, 0.18);
}
.nav-btn--log::before { border-color: rgba(106, 154, 138, 0.08); }
.nav-btn--log .nav-btn-inner {
  background: radial-gradient(circle at 35% 35%, var(--color-log-glow), var(--color-log-primary));
  box-shadow: 0 0 8px rgba(140, 188, 172, 0.28);
}

.nav-btn--journal {
  border-color: rgba(184, 138, 138, 0.30);
}
.nav-btn--journal:hover {
  border-color: rgba(212, 168, 168, 0.55);
  box-shadow: 0 0 14px rgba(212, 168, 168, 0.18);
}
.nav-btn--journal::before { border-color: rgba(184, 138, 138, 0.08); }
.nav-btn--journal .nav-btn-inner {
  background: radial-gradient(circle at 35% 35%, var(--color-journal-glow), var(--color-journal-primary));
  box-shadow: 0 0 8px rgba(212, 168, 168, 0.28);
}

.nav-btn--terminal {
  border-color: rgba(122, 143, 160, 0.30);
}
.nav-btn--terminal:hover {
  border-color: rgba(168, 184, 200, 0.55);
  box-shadow: 0 0 14px rgba(168, 184, 200, 0.18);
}
.nav-btn--terminal::before { border-color: rgba(122, 143, 160, 0.08); }
.nav-btn--terminal .nav-btn-inner {
  background: radial-gradient(circle at 35% 35%, var(--color-term-glow), var(--color-term-primary));
  box-shadow: 0 0 8px rgba(168, 184, 200, 0.28);
}

/* ── Logo 下落動畫 ── */
.nav-logo-drop {
  animation: logoDrop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes logoDrop {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(8px) scale(0.92); }
  100% { transform: translateY(4px) scale(1); }
}

/* ── Nav Hint ── */
#nav-hint {
  position: fixed;
  bottom: calc(var(--space-lg) + var(--nav-size-collapsed) + 14px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  opacity: 0;
  animation: hintFade 4s ease-in-out 2.5s forwards;
  pointer-events: none;
  z-index: 15;
  white-space: nowrap;
}

@keyframes hintFade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(4px); }
  20%  { opacity: 0.5; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 0.5; }
  100% { opacity: 0; }
}

@media (hover: none), (pointer: coarse) {
  #nav-logo,
  .nav-btn {
    cursor: none;
  }
}