/* === nBUN studio core style（去除膠囊外框版）=== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body{
  font-family: -apple-system, BlinkMacSystemFont, Inter, 'Noto Sans TC',
    'PingFang TC', 'Microsoft JhengHei', Arial, sans-serif;
  line-height: 1.6;
  color: #111;
  background: #fff;
}

.container{
  width: 92%;
  max-width: 1180px;
  margin: 0 auto;
}

.menu--primary{
  list-style: none;
  display: flex;
  gap: 18px;
  padding: 0;
  margin: 0;
}

.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #efefef;
}

.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.site-title{
  text-decoration: none;
  font-weight: 700;
}

/* 首頁不要 header bar */
body.home .site-header{
  display: none;
}

/* ==========================
   中央 SVG（平滑上移 + 縮小 + 漂浮 + 動態隱藏）
   ========================== */

/* 浮動容器：用 padding-top 控制垂直位置 */
#nbunMenu.nbun-center-menu{
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;     /* 從上對齊，用 padding-top 控制垂直位置 */
  pointer-events: none;
  z-index: 10000;

  /* 預設：視窗中間 */
  padding-top: 40vh;

  /* 顯示狀態（給 is-hidden 做動畫用） */
  opacity: 1;
  transform: translateY(0);

  will-change: padding-top, opacity, transform;
  transition:
    padding-top 0.7s cubic-bezier(0.25, 0.9, 0.35, 1.0),
    opacity .28s ease,
    transform .28s ease;
}

/* ✅ 位置狀態：容器真正移動靠這兩條 */
#nbunMenu[data-pos="center"]{
  padding-top: 40vh;
}
#nbunMenu[data-pos="top"]{
  padding-top: 40px;
}

/* ✅ 動態隱藏（JS 加 class） */
#nbunMenu.is-hidden{
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

/* SVG 連結本體 */
#nbunMenu .nbun-center-logo{
  display: inline-block;
  pointer-events: auto;
  text-decoration: none;
  transform-origin: center center;
  
  /* ✅ 酸性設計關鍵：差異化混合模式 */
  mix-blend-mode: difference;
  
  transition:
    transform 0.7s cubic-bezier(0.25, 0.9, 0.35, 1.0),
    filter 0.6s ease-out;
}

/* SVG 尺寸 - 針對新 Logo (長條形) 調整 */
#nbunMenu .nbun-center-logo svg{
  display: block;
  /* 最小寬度 280px，隨螢幕變大，最大寬度 550px */
  width: clamp(280px, 50vw, 550px); 
  height: auto;
}

/* 中央狀態：原始大小 + 漂浮 */
#nbunMenu[data-pos="center"] .nbun-center-logo{
  transform: scale(1);
  animation: nbunFloatMargin 4s ease-in-out infinite;
}

/* 頂部狀態：縮小到 50% 比較剛好 (因為 Logo 本身很長) + 漂浮 */
#nbunMenu[data-pos="top"] .nbun-center-logo{
  transform: scale(0.5); /* 縮得比原本更多一點，因為寬度變寬了 */
  animation: nbunFloatMargin 4s ease-in-out infinite;
}

/* 用 margin 上下晃動，不跟 transform 搶 */
@keyframes nbunFloatMargin{
  0%   { margin-top: 0; }
  25%  { margin-top: -6px; }
  50%  { margin-top: 2px; }
  75%  { margin-top: -3px; }
  100% { margin-top: 0; }
}

/* 手機：SVG 稍微小一點 */
@media (max-width: 767px){
  #nbunMenu .nbun-center-logo svg{
    /* 手機上佔寬度 70% */
    width: clamp(200px, 70vw, 300px);
  }
}
/* 一頁式：內容不足時也至少撐滿一個視窗 */
.nbun-fullpage{
  min-height: 100vh;
}