/* ==========================================================================
   Lumina Polish — 流光之境 UI/UX 質感升級層
   對應 docs/UIUX_UPGRADE_PLAN_2026-07-15.md SPEC-UI-1 / UI-3 / UI-4
   規則：只新增，不改 design-system.css / design-system-overrides.css /
   typography.css / navbar-responsive-fix.css 既有值。載入順序放所有 CSS 最後。
   ========================================================================== */

:root {
  --gold-glow: rgba(212, 165, 61, .55);
}

/* --------------------------------------------------------------------
   SPEC-UI-1A — 內頁 hero 標題對比修復（方案 a：深字＋白暈托底）
   只命中內頁 .hero-section 裡的 .text-white（首頁走 .hero-title，不受影響）
   -------------------------------------------------------------------- */
.hero-section h1.text-white,
.hero-section .text-white {
  color: var(--neutral-800, #1f2937) !important; /* 蓋過 bootstrap .text-white 的唯一許可 !important */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .65), 0 0 24px rgba(255, 255, 255, .55);
}

.hero-section p.text-white {
  color: var(--neutral-700, #374151) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 0 18px rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------
   SPEC-UI-1B — 按鈕系統統一（二階制）
   2026-07-15 user 拍板 B 方案「墨棕精品路線」:主要實心鈕改深墨棕+米白字
   (對比 ~12:1,原香檳金白字只有 ~2.2:1 導致按鈕「浮浮的」),hover 泛金光暈;
   次要動作維持金框 outline。.custom-btn 原為磚紅,一併收斂。
   -------------------------------------------------------------------- */
.btn-primary,
.custom-btn,
.btn-cta {
  background: linear-gradient(135deg, #3a352c, #2b2721);
  border: none;
  color: #f7f2e9;
}

.btn-primary:hover,
.custom-btn:hover,
.btn-cta:hover {
  background: linear-gradient(135deg, #454035, #332e27);
  color: #fffdf8;
}

.btn-primary,
.custom-btn {
  transition: transform var(--duration-normal, .25s) ease, box-shadow .25s ease, background .25s ease;
}

.btn-primary:hover,
.custom-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(212, 165, 61, .16), 0 8px 20px -8px var(--gold-glow);
}

.btn-outline-primary:hover {
  background: rgba(212, 165, 116, .12);
}

.btn-primary:focus-visible,
.btn-outline-primary:focus-visible,
.custom-btn:focus-visible,
.btn-cta:focus-visible {
  outline: 2px solid var(--primary-600, #bf945f);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   SPEC-UI-1C — Footer 調和（水彩背景上加一層米白紗）
   .site-footer::before 已存在（custom.css，暖色 radial watermark），
   在同一 pseudo-element 補一層米白紗色作為背景最後一層，不砍掉原本裝飾。
   -------------------------------------------------------------------- */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    /* 靜態霧斑(2026-07-15 煙霧感):footer 不動畫,只鋪霧 */
    radial-gradient(800px 220px at 25% 30%, rgba(255, 253, 248, .18), transparent 70%),
    radial-gradient(900px 260px at 78% 70%, rgba(255, 255, 255, .14), transparent 70%),
    radial-gradient(circle at 20% 20%, rgba(212, 165, 116, .08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(212, 165, 116, .05) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(255, 255, 255, .03) 0%, transparent 50%),
    rgba(247, 242, 233, .62);
  pointer-events: none;
}

/* --------------------------------------------------------------------
   煙霧感 B — 段落柔霧過渡(2026-07-15):灰底 section 上下緣霧化,
   內容像從霧中浮現。純靜態漸層,零動畫成本。admin 不載本檔。
   -------------------------------------------------------------------- */
.section-bg { position: relative; }
.section-bg::before,
.section-bg::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 88px;
  pointer-events: none;
}
.section-bg::before {
  top: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}
.section-bg::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}

.site-footer .copyright-text {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------
   SPEC-UI-3A — Hero gradient-mesh 光暈漂移
   -------------------------------------------------------------------- */
.hero-section::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    /* 晨霧層(2026-07-15 煙霧感):橫長橢圓白霧,疊在光暈之上 */
    radial-gradient(900px 260px at 30% 62%, rgba(255, 253, 248, .10), transparent 70%),
    radial-gradient(1100px 300px at 75% 40%, rgba(255, 255, 255, .08), transparent 70%),
    radial-gradient(600px 420px at 22% 30%, rgba(212, 165, 116, .22), transparent 70%),
    radial-gradient(520px 360px at 78% 18%, rgba(232, 180, 184, .18), transparent 70%),
    radial-gradient(700px 520px at 60% 85%, rgba(196, 181, 224, .16), transparent 70%);
  animation: mesh-drift 34s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes mesh-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3.5%, 1.5%, 0) scale(1.06); }
}

/* --------------------------------------------------------------------
   SPEC-UI-3B — Grain 顆粒材質（僅 hero；footer::after 已被
   custom.css `display:none !important` 佔用且需額外 cascade 手術，
   footer 飽和度已靠 1C 米白紗處理，故此項只做 hero，效益/風險比不划算的部分跳過）
   -------------------------------------------------------------------- */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------
   SPEC-UI-3C — 暖棕陰影 + 卡片 hover + 卡圖統一調和層
   涵蓋全站實際使用的卡片類別（非僅 bootstrap .card）
   -------------------------------------------------------------------- */
.service-card,
.course-card,
.blog-card,
.activity-card,
.process-card,
.feature-card,
.notice-card,
.testimonial-card,
.healing-service-card,
.card {
  box-shadow: 0 10px 30px -12px rgba(120, 100, 60, .18) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.service-card:hover,
.course-card:hover,
.blog-card:hover,
.activity-card:hover,
.process-card:hover,
.feature-card:hover,
.notice-card:hover,
.testimonial-card:hover,
.healing-service-card:hover,
.card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px -12px rgba(120, 100, 60, .28), 0 0 0 1px rgba(212, 165, 61, .15) !important;
}

.service-image,
.course-image img,
.blog-image img,
.activity-card img,
.card-img-top {
  filter: saturate(.92) sepia(.05);
}

/* --------------------------------------------------------------------
   SPEC-UI-3D — 留白加大（section 級，桌機間距目標 ≥120px）
   手機既有 80px（tooplate-wedding-lite.css）已達標 ≥72px，不動。
   -------------------------------------------------------------------- */
@media (min-width: 992px) {
  .section-padding {
    padding-top: var(--space-24, 6rem);
    padding-bottom: var(--space-24, 6rem);
  }
}

/* --------------------------------------------------------------------
   SPEC-UI-3E — Navbar 通透感（user 核准，timebox 30 分鐘）
   navbar-responsive-fix.css 無此規則衝突，992-1399px 已實測無跑版。
   -------------------------------------------------------------------- */
.navbar {
  background-color: rgba(255, 253, 248, .78) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------------
   SPEC-UI-4A — 首頁 hero logo 進場動效（流光/呼吸/浮動/星芒）
   DOM：.float-wrap > .breathe-wrap > (img.hero-banner-img + .sweep + .twinkle*)
   -------------------------------------------------------------------- */
.float-wrap {
  animation: logo-float 6.4s ease-in-out infinite;
}

.breathe-wrap {
  position: relative;
  display: inline-block;
  animation: logo-breathe 6.4s ease-in-out infinite;
}

.breathe-wrap .hero-banner-img {
  animation: logo-reveal 1.4s cubic-bezier(.22, .61, .36, 1) 1 forwards;
}

@keyframes logo-reveal {
  0%   { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(9px) drop-shadow(0 0 0 rgba(212, 165, 61, 0)); }
  65%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) drop-shadow(0 0 10px var(--gold-glow)); }
}

@keyframes logo-breathe {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(212, 165, 61, .28)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 22px rgba(212, 165, 61, .6)); transform: scale(1.018); }
}

@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 240, 200, .85) 48%, rgba(212, 165, 61, .9) 52%, transparent 70%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: url(../images/RFlogo-removebg.png);
  mask-image: url(../images/RFlogo-removebg.png);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: sweep 7s ease-in-out infinite;
  animation-delay: 1.4s;
}

@keyframes sweep {
  0%, 8%   { opacity: 0;  background-position: -70% 0; }
  22%      { opacity: .9; }
  42%      { opacity: .9; background-position: 160% 0; }
  52%, 100% { opacity: 0; background-position: 160% 0; }
}

/* 手機 hero logo 白色方塊——真兇定位(2026-07-15 第二輪,user 線索:
   「有光時光會把圖照出來」=sweep 正常、是 logo 圖本身被畫壞):
   iOS Safari 對「含透明 PNG 的元素」做 filter:drop-shadow 動畫有渲染 bug,
   整個元素會畫成實心白色方塊。呼吸光暈=drop-shadow 動畫,正中此雷。
   修法:手機的進場與呼吸改 transform/opacity-only(不碰 filter);
   sweep 手機維持關閉(小螢幕效果本就有限)。
   ⚠️ 前一版的 @supports not(mask-image:url("")) 保險已撤——url("") 在部分
   瀏覽器判無效使條件反轉,誤殺了桌機的 sweep。 */
@media (max-width: 991.98px) {
  .sweep { display: none !important; }
  .breathe-wrap {
    animation-name: logo-breathe-m;
  }
  .breathe-wrap .hero-banner-img {
    animation-name: logo-reveal-m;
    filter: none !important;
  }
}
@keyframes logo-reveal-m {
  0%   { opacity: 0; transform: translateY(14px) scale(.97); }
  65%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes logo-breathe-m {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}

.twinkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8e6 0%, var(--gold-glow) 60%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  animation: twinkle 3.2s ease-in-out infinite;
}

.twinkle.t1 { top: 18%; left: 12%; animation-delay: .5s; }
.twinkle.t2 { top: 12%; left: 82%; animation-delay: 1.7s; }
.twinkle.t3 { top: 78%; left: 76%; animation-delay: 2.6s; }

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  50%      { opacity: 1; transform: scale(1.15); }
}

/* --------------------------------------------------------------------
   SPEC-UI-4B — Scroll reveal 節奏微調（stagger + easing，位移 ≤16px）
   只調卡片格線（main 內 .row 直屬欄位），不動全站泛用 .fade-in，
   降低對其他區塊（footer/表單）意外波及的風險。
   -------------------------------------------------------------------- */
.service-card.fade-in,
.course-card.fade-in,
.blog-card.fade-in {
  transform: translateY(16px);
  /* !important:否則被上方 .card 系的 transition shorthand !important(:136)整組壓掉,
     淡入 easing 與下方 stagger delay 都會失效(2026-07-15 CDP 實測) */
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease !important;
}

main .row > [class*="col-"]:nth-child(1) .fade-in { transition-delay: 0ms !important; }
main .row > [class*="col-"]:nth-child(2) .fade-in { transition-delay: 70ms !important; }
main .row > [class*="col-"]:nth-child(3) .fade-in { transition-delay: 140ms !important; }
main .row > [class*="col-"]:nth-child(4) .fade-in { transition-delay: 210ms !important; }
main .row > [class*="col-"]:nth-child(n+5) .fade-in { transition-delay: 210ms !important; }

/* --------------------------------------------------------------------
   全域 prefers-reduced-motion：動效一律靜止
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-section::before { animation: none !important; }

  .float-wrap,
  .breathe-wrap {
    animation: none;
  }

  .breathe-wrap .hero-banner-img {
    animation: none;
    opacity: 1;
    transform: none;
    filter: drop-shadow(0 0 10px var(--gold-glow));
  }

  .sweep,
  .twinkle {
    display: none;
  }

  .fade-in,
  .service-card.fade-in,
  .course-card.fade-in,
  .blog-card.fade-in {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .service-card,
  .course-card,
  .blog-card,
  .activity-card,
  .process-card,
  .feature-card,
  .notice-card,
  .testimonial-card,
  .healing-service-card,
  .card,
  .btn-primary,
  .custom-btn {
    transition: none !important;
  }

  .service-card:hover,
  .course-card:hover,
  .blog-card:hover,
  .activity-card:hover,
  .process-card:hover,
  .feature-card:hover,
  .notice-card:hover,
  .testimonial-card:hover,
  .healing-service-card:hover,
  .card:hover,
  .btn-primary:hover,
  .custom-btn:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------
   導航列精緻化（2026-07-15 user 回報「好醜」）
   病根:navbar-responsive-fix.css @media(min-width:992px) 把 nav-link
   截成 max-width:150px + ellipsis(「REIKI靈氣課程」變刪節號);
   tooplate :335 的 hover/active 色還是磚紅 --custom-btn-bg-color。
   admin 頁不載本檔,不受影響。
   -------------------------------------------------------------------- */

/* 1. 解除桌機截字:選單文字必須完整可讀,hover 才展開是反模式 */
@media (min-width: 992px) {
  .navbar-nav .nav-link {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* 2. 連結字色/字距 + 流光底線(方案一,2026-07-15)
   ::after = 靜底線(hover/active 浮現);::before = 一道金光 hover 時從左流到右,
   流過後留下亮著的底線——與首頁 logo sweep 同一套動效語言。 */
.navbar-nav .nav-link {
  position: relative;
  color: var(--neutral-700, #4d483f) !important;
  letter-spacing: .03em;
}
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: calc(100% - 4px);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #d4a574 25%, #c69963 75%, transparent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.navbar-nav .nav-link::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 7px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent 25%, rgba(255, 238, 190, 1) 45%, #ffd98a 50%, rgba(226, 184, 119, 1) 55%, transparent 75%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: -90% 0;
  filter: drop-shadow(0 0 6px rgba(255, 214, 140, .9));
  opacity: 0;
  pointer-events: none;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #a97e4f !important; /* 深一階的品牌金,取代磚紅 */
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
}
.navbar-nav .nav-link:hover::before {
  animation: nav-flow 1.2s ease-out;
}
@keyframes nav-flow {
  0%   { opacity: 0; background-position: -90% 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; background-position: 190% 0; }
}
/* active 底線:6 秒週期的光暈呼吸,呼應 logo breathe */
.navbar-nav .nav-link.active::after {
  animation: nav-glow 6s ease-in-out infinite;
}
@keyframes nav-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(212, 165, 61, .3); opacity: .85; }
  50%      { box-shadow: 0 0 12px rgba(212, 165, 61, .75); opacity: 1; }
}

/* 2a. 方案二:游標跟隨光暈(2026-07-15)——一團暖光跟著滑鼠在導航列上游走,
   「流光」做進互動本身。桌機+滑鼠限定;座標由 animations.js 寫 --glow-x/y。 */
@media (min-width: 992px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .navbar { overflow: hidden; }
  .navbar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(160px 100px at var(--glow-x, -300px) var(--glow-y, 50%),
      rgba(255, 226, 168, .38),
      rgba(212, 165, 116, .14) 45%,
      transparent 72%);
    opacity: var(--glow-o, 0);
    transition: opacity .3s ease;
  }
}

/* 2b. 捲動收縮(.nav-scrolled 由 animations.js 掛):高度收窄+毛玻璃變濃 */
.navbar {
  transition: padding .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.navbar-brand img { transition: height .3s ease; }
@media (min-width: 992px) {
  .navbar.nav-scrolled {
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: rgba(255, 253, 248, .92) !important;
    box-shadow: 0 2px 18px -8px rgba(120, 100, 60, .22);
  }
  .navbar.nav-scrolled .navbar-brand img { height: 44px; }
}

/* 3.(已撤)聯絡與交通 CTA 藥丸鈕——user 拍板改回與其他項一致(2026-07-15) */

/* 4. 導航容器放寬(9 項全文字在預設 .container 1320px 塞不下) */
@media (min-width: 1200px) {
  .navbar > .container { max-width: min(1400px, 96vw); }
  .navbar-expand-lg .navbar-nav .nav-link { margin-left: 18px; }
}
.navbar-brand span { letter-spacing: .06em; }

/* 5. 滑鼠點擊不留方框/底色(navbar-responsive-fix:214 對 :focus 硬加
   outline+底色,滑鼠點了就冒醜方框);鍵盤 Tab 的 focus-visible 才顯示 */
@media (min-width: 992px) {
  .navbar-nav .nav-link:focus {
    outline: none !important;
    background-color: transparent !important;
  }
  .navbar-nav .nav-link:focus-visible {
    outline: 2px solid #d4a574 !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
  }
  /* 舊補丁 hover 規則(navbar-responsive-fix:151)整包封死:
     max-width 展開 + 金色底色塊 + 圓角——hover 只留底線與變色 */
  .navbar-nav .nav-link:hover {
    max-width: none !important;
    background-color: transparent !important;
  }
}

/* 5b. 全站雲霧飄過(2026-07-15 user 加碼):固定全視窗霧層,兩團大雲影
   90 秒週期極慢橫向漂移,飄過所有內容(含 navbar)。透明度壓在 9-11%,
   pointer-events:none 不擋任何互動。 */
/* v3(2026-07-15):user 給了 21st.dev smoke-ring 參考——要的是有「絮狀紋理」的
   真雲霧,不是柔光色斑。做法:用同款分形噪聲(7 octaves)離線烘焙成兩張含 alpha 的
   WebP 紋理(images/fog-layer-1/2.webp,由 numpy+PIL 生成,重生成腳本見 git log),
   雙層對向漂移做出景深。transform-only 動畫,GPU 合成,零 runtime 噪聲運算。 */
body::before,
body::after {
  content: "";
  position: fixed;
  left: -25vw;
  width: 150vw;
  z-index: 99;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
body::before {
  top: 2vh;
  height: 64vh;
  background-image: url(../images/fog-layer-1.webp);
  opacity: .5;
  animation: fog-drift-1 42s ease-in-out infinite alternate;
}
body::after {
  bottom: 4vh;
  height: 54vh;
  background-image: url(../images/fog-layer-2.webp);
  opacity: .42;
  animation: fog-drift-2 26s ease-in-out infinite alternate;
}
@keyframes fog-drift-1 {
  from { transform: translateX(-9vw); }
  to   { transform: translateX(13vw); }
}
@keyframes fog-drift-2 {
  from { transform: translateX(11vw); }
  to   { transform: translateX(-13vw); }
}
/* 手機:1920px 紋理壓進窄視窗會糊成一坨濃霧蓋掉整個 hero
   (2026-07-15 user 實機回報)——改原始比例裁切+大降透明度,只留一層 */
@media (max-width: 991.98px) {
  body::before {
    background-size: auto 100%;
    background-position: 30% 0;
    opacity: .22;
  }
  body::after { display: none; }
}

/* 5c. Footer 品牌 logo 呼吸光暈(user 點名 .footer-logo-img;去背 PNG 用
   drop-shadow 才會沿著圖形發光,box-shadow 會變成方形光框) */
.footer-logo-img {
  animation: footer-logo-breathe 6s ease-in-out infinite;
}
@keyframes footer-logo-breathe {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(212, 165, 61, .25)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 18px rgba(212, 165, 61, .6)); transform: scale(1.02); }
}

/* 5d. Navbar logo 放大(user:有點小)。兩件事:
   (1) 圖檔換裁邊版 RFlogo-nav.png(原檔 500x500 只有 48%x63% 是圖案,其餘透明邊);
   (2) navbar-responsive-fix 在 992-1399 各區間用 !important 壓 45-55px,必須帶
       !important 才蓋得掉(裁邊版更窄,70px 在窄桌機也塞得下,實測 1024)。 */
@media (min-width: 992px) {
  .navbar-brand img { height: 70px !important; }
  .navbar.nav-scrolled .navbar-brand img { height: 50px !important; }
}

/* 6. 手機版全螢幕霧面選單(2026-07-15):取代 Bootstrap 半屏下拉,
   選單展開=整片霧色覆蓋,項目置中、逐項浮現。品牌/漢堡鈕抬 z-index 保持可點。 */
@media (max-width: 991.98px) {
  /* navbar 的 backdrop-filter 會變成 fixed 子元素的 containing block,
     全螢幕 overlay 會被關進 navbar 盒子——手機版拿掉(overlay 自帶霧化) */
  .navbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: rgba(255, 253, 248, .96) !important;
  }
  .navbar-brand,
  .navbar-toggler {
    position: relative;
    z-index: 2;
  }
  .navbar-collapse {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 1;
    padding: 110px 24px 40px;
    background:
      radial-gradient(700px 320px at 20% 12%, rgba(232, 180, 184, .14), transparent 70%),
      radial-gradient(800px 380px at 85% 85%, rgba(212, 165, 116, .14), transparent 70%),
      radial-gradient(600px 300px at 70% 30%, rgba(196, 181, 224, .10), transparent 70%),
      rgba(253, 250, 244, .96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    height: auto !important;
    overflow-y: auto;
    transition: opacity .35s ease, visibility .35s ease;
  }
  .navbar-collapse.collapsing { transition: opacity .35s ease, visibility .35s ease; }
  .navbar-collapse.show {
    opacity: 1;
    visibility: visible;
  }
  .navbar-collapse .navbar-nav {
    align-items: center;
    gap: 2px;
  }
  .navbar-collapse .nav-link {
    display: inline-block;
    font-size: 1.3rem;
    padding: 12px 20px !important;
    opacity: 0;
    transform: translateY(10px);
  }
  .navbar-collapse.show .nav-link {
    animation: mobile-nav-in .45s cubic-bezier(.22, .61, .36, 1) forwards;
  }
  .navbar-collapse.show .nav-item:nth-child(1) .nav-link { animation-delay: .05s; }
  .navbar-collapse.show .nav-item:nth-child(2) .nav-link { animation-delay: .1s; }
  .navbar-collapse.show .nav-item:nth-child(3) .nav-link { animation-delay: .15s; }
  .navbar-collapse.show .nav-item:nth-child(4) .nav-link { animation-delay: .2s; }
  .navbar-collapse.show .nav-item:nth-child(5) .nav-link { animation-delay: .25s; }
  .navbar-collapse.show .nav-item:nth-child(6) .nav-link { animation-delay: .3s; }
  .navbar-collapse.show .nav-item:nth-child(7) .nav-link { animation-delay: .35s; }
  .navbar-collapse.show .nav-item:nth-child(8) .nav-link { animation-delay: .4s; }
  .navbar-collapse.show .nav-item:nth-child(n+9) .nav-link { animation-delay: .45s; }
  /* 選單開啟時鎖住背景捲動(class 由 animations.js 掛在 body) */
  body.nav-open { overflow: hidden; }
}
@keyframes mobile-nav-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-nav .nav-link::after { transition: none !important; animation: none !important; }
  .navbar-nav .nav-link:hover::before { animation: none !important; }
  .navbar, .navbar-brand img { transition: none !important; }
  .navbar-collapse { transition: none !important; }
  .navbar-collapse .nav-link { opacity: 1 !important; transform: none !important; animation: none !important; }
  body::before, body::after { animation: none !important; }
  .footer-logo-img { animation: none !important; }
}