/* index-circle-nav.css */

/* 圓形導覽主容器 */
.circle-nav {
  position: relative;
  width: min(640px, 92vw);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: 50%;

  /* 背景格紋 */
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/20px 20px;

  /* 使用設計 token */
  --count: 9; /* 預設分段數（可以由 JS 或 token覆寫） */
  --ring-inset: var(--circle-ring-inset, 3%);
  --ring-thickness: var(--circle-ring-thickness, 22px);
  --hub-inset: var(--circle-hub-inset, 14%);
  --radius: var(--circle-radius, calc(min(640px, 92vw) / 2 - 72px));
  --seg-w: var(--circle-seg-w, clamp(110px, 30%, 180px));
  --seg-h: var(--circle-seg-h, clamp(40px, 7.5vw, 56px));
}

/* 彩虹環背景繪製 */
.circle-nav::before {
  content:"";
  position:absolute;
  inset: var(--ring-inset);
  z-index: var(--z-background, 0);
  pointer-events: none;
  border-radius:50%;

  background: conic-gradient(
    #3b82f6, #8b5cf6, #22c55e, #f59e0b, #ef4444, #38bdf8, #3b82f6
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--ring-thickness)),
    #000 0
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--ring-thickness)),
    #000 0
  );
  box-shadow: 0 10px 24px rgba(0,0,0,.35) inset;
}

/* 中心 Hub（logo/主圖示） */
.circle-nav .hub {
  position: absolute;
  inset: var(--hub-inset);
  z-index: var(--z-content, 1);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 20% 20%, #141923, #0f131b);
  border: 1px solid #1e2430;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.circle-nav .hub img {
  width: 60%;
  height: auto;
  border-radius: 12px;
}

/* 分段導航按鈕：seg */
.circle-nav .seg {
  /* 利用 token 和 --i 作角度/位置分段排布 */
  --angle: calc(360deg * var(--i) / var(--count, 9));
  --neg-angle: calc(-360deg * var(--i) / var(--count, 9));
  --h: calc(var(--i) * 360deg / var(--count, 9));

  position: absolute;
  left: 50%; top: 50%;
  z-index: var(--z-content, 2);
  width: var(--seg-w);
  height: var(--seg-h);

  /* 以 token 定義半徑參數！ */
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateX(var(--radius))
    rotate(var(--neg-angle));
  transform-origin: center center;

  text-decoration: none;
  color: #f1f5ff;
  border-radius: 999px;
  border: 1px solid hsl(var(--h) 70% 60% / .35);

  background: linear-gradient(
    180deg,
    hsl(var(--h) 88% 64% / .66),
    hsl(var(--h) 78% 46% / .66)
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 2px;
}
.circle-nav .seg .inner svg {
  width: 20px;
  height: 20px;
  opacity: .95;
}
.circle-nav .seg .inner span {
  font-weight: 600;
  letter-spacing: .2px;
}
.circle-nav .seg:hover {
  filter: brightness(1.38) saturate(1.55);
}
.circle-nav .seg:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.35),
    0 6px 18px rgba(0,0,0,.28);
}

/* 響應式 (行動裝置等) */
@media (max-width: 480px) {
  .circle-nav {
    --radius: calc(min(640px, 92vw) / 2 - 60px);
    --seg-w: 56px;
    --seg-h: 56px;
  }
  .circle-nav .seg .inner span {
    display: none;
  }
}

/* Keep the content-level brand hub bounded and visible after desktop rules. */
@media (max-width: 767px) {
  .circle-nav .hub {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 auto;
    width: clamp(120px, 34vw, 160px);
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }

  .circle-nav .hub img {
    display: block;
    width: 80%;
    max-height: 80%;
    height: auto;
    object-fit: contain;
  }
}