/* ========== 自訂主題變數 ========== */
:root {
    --brand-yellow: #facc15;
  }
  
  /* ========== 全站基礎樣式 ========== */
  html {
    scroll-behavior: smooth;
  }
  .shadow-on {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  }
  .section-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
  }
  .section-head .bar {
    width: .375rem;
    height: 2rem;
    border-radius: .5rem;
    background: var(--brand-yellow);
  }
  
  /* ========== 導覽列按鈕樣式（已縮小） ========== */
  .nav-link {
    transition: all 0.3s ease;
    padding: .35rem .75rem;        /* ↓ 比原本更小 (.45rem 1rem) */
    border: 2px solid transparent;
    border-radius: .25rem;
    color: white;                  /* 預設（透明 header）白字 */
    font-weight: 700;              /* ↓ 原本 800，稍微輕一點 */
    font-size: 0.875rem;           /* ↓ text-sm 視覺更精緻 */
    letter-spacing: .02em;
    text-transform: uppercase;
    background: transparent;
    text-decoration: none;
    display: inline-block;
  }
  
  /* hover：不要搶 active 的效果，保持原色與無框 */
  .nav-link:hover {
    border: 2px solid #facc15;  /* 保留黃色邊框 */
    color: #000;                /* 滑過時變黑字 */
  }
  
  /* active：黃字＋黃框底（無論在透明或白底 header 都生效） */
  .nav-link.active {
    color: var(--brand-yellow);
    border-color: var(--brand-yellow);
    background-color: rgba(250, 204, 21, 0.1);
  }
  
  /* ========== Header 狀態切換（捲動後白底） ========== */
  header {
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
  }
  header.header-solid {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 4px solid var(--brand-yellow);
  }
  
/* 白底時：一般連結黑字無框 */
header.header-solid .nav-link {
  color: #000;
  border-color: transparent;
  background-color: transparent;
}

/* 白底時：active 固定黃字＋黃框＋淡黃底 */
header.header-solid .nav-link.active {
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
  background-color: rgba(250, 204, 21, 0.1);
}

/* 白底時：hover 也顯示黃框黃字淡黃底 */
header.header-solid .nav-link:hover {
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
  background-color: rgba(250, 204, 21, 0.1);
}

  
  /* ========== Reveal 動畫區塊（保留原設計） ========== */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .7s ease, transform .7s ease;
      will-change: transform, opacity;
    }
    .reveal.is-visible {
      opacity: 1;
      transform: none;
    }
    .reveal-up { transform: translateY(22px); }
    .reveal-right { transform: translateX(24px); }
    .reveal-left { transform: translateX(-24px); }
    .reveal-zoom { transform: scale(.96); }
    .reveal-fast { transition-duration: .5s; }
  }
  
.card-img{
  width:100%;
  height:200px;          /* ← 和 .flip-card-inner 高度一致 */
  object-fit:cover;      /* ← 滿版裁切 */
  border-radius:0.75rem;
  display:block;
}

/* 翻轉卡片 */
.flip-card{ perspective:1000px; }
.flip-card-inner{
  position:relative; width:100%; height:200px;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  transition:transform .6s;
}
.flip-card:hover .flip-card-inner{ transform:rotateY(180deg); }
.flip-card-front,.flip-card-back{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:1rem; overflow:hidden;
}
.flip-card-front{ display:flex; align-items:center; justify-content:center; }
.flip-card-back{
  background:#facc15; transform:rotateY(180deg);
  display:flex; align-items:center; justify-content:center;
}

/* ✅ 更亮的遮罩（亮度高、圖片更清楚） */
.card-overlay{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.22), rgba(0,0,0,.08));
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;     /* 避免擋到 hover */
}

/* 文字仍清楚可讀 */
.card-title{
  color:#fff; font-weight:800; font-size:1.125rem; /* ~ text-lg */
  text-align:center;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}

:root{
  --brand-yellow:#facc15;         /* 黃 */
  --brand-black:#0b0f19;          /* 黑（柔和一點的黑）*/
}

/* 進場動畫（沿用你現有 reveal） */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
  .reveal.is-visible{opacity:1;transform:none}
}

/* 浮起 + 圖縮放 */
.hover-lift{transition:transform .35s,box-shadow .35s}
.hover-lift:hover{transform:translateY(-6px);box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
.img-zoom{transition:transform .8s}
.group:hover .img-zoom{transform:scale(1.04)}

.h3-brand{
  color:var(--brand-black) !important;  /* 保證不被 text-indigo-800 之類覆蓋 */
  letter-spacing:.01em;
}
.h3-brand::after{
  content:"";
  display:block;
  width:64px;              /* 黃條長度可調 */
  height:6px;
  border-radius:999px;
  background:var(--brand-yellow);
  margin-top:.5rem;
}

/* 黑黃主題 */
.h2-brand{color:var(--brand-black)}
.kicker{letter-spacing:.2em;font-weight:700;color:rgba(0,0,0,.68)}
/* 卡片下方 chips：黃底黑字，hover 反轉 */
.chip{
  display:inline-flex;align-items:center;padding:.62rem 1.05rem;border-radius:.9rem;
  background:var(--brand-yellow);color:var(--brand-black);font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:background .2s,color .2s,transform .2s
}
/* 分隔線略淡 */
.divider{height:1px;width:100%;background:#e5e7eb}
/* 圖片上若要更清楚，可用更淡遮罩（可選） */
.card-overlay-light{position:absolute;inset:0;background:rgba(0,0,0,.10)}
/* 卡片外框：不要給圖片區 padding */
.pack-card{
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 28px -16px rgba(2,6,23,.25);
  transition: transform .3s, box-shadow .3s;
}
.pack-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 36px -16px rgba(2,6,23,.35); }

.pack-card { border-radius: 2rem; }
/* 卡片圖片容器要能放絕對定位元素 */
.pack-img-wrap{
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;           /* 和你的卡片圓角一致 */
}

.chip-on-photo{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
}

.chip-solid{
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.1rem;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 0.9rem;
  background: #f1f5f9;   /* 淺灰底 (slate-100) */
  color: #1e293b;        /* 深灰字 (slate-800) */
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.pack-img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* 佔滿並裁切，不會變形 */
  display: block;                 /* 移除底部空隙 */
}


/* 若瀏覽器不支援 aspect-ratio 的退場方案（可選） */
@supports not (aspect-ratio: 1 / 1){
  .pack-img-wrap{ position: relative; padding-top: 62.5%; } /* 約 16:10 */
  .pack-img{ position: absolute; inset: 0; }
}

/* 進場動畫 */
@keyframes pack-pop{
  from{ opacity:0; transform: translateY(14px) scale(.98); }
  to  { opacity:1; transform: none; }
}

.aboutSwiper {
  width: 100%;
  height: 600px; /* 保證容器有高度 */
}

.swiper-pagination-bullet {
  background: #d1d5db !important; /* 灰色 (未選中) */
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background: #facc15 !important; /* 黃色 (選中) */
}