/* ===================================================================
   統一 UI（整理＋註解）
   1) Loader
   2) 頁首進度條
   3) Header（透明→上色、縮小、字色切換）
   4) Reveal（標題/卡片進場，可重複）
   5) 背景閃爍（計數器 ≥ 10）
   6) 容器寬度（桌機）
   7) CursorDot 紅點
   8) Hero / 全螢幕影片
   9) 服務區（SVG 曲線跑馬燈 + 磁吸 hover）
   10) 選單 / Logo 切換
   11) Footer
   12) UI 元件（卡片、標題）
   =================================================================== */
body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
               "Noto Sans TC", Roboto, Helvetica, Arial, sans-serif;
}

/* ===== 1) Loader ===== */
.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  background: var(--bs-body-bg, #fff);
  transition: opacity .3s ease;
}

.loader-overlay.is-fading {
  opacity: 0;
  pointer-events: none;
}

.loader-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.loader-logo {
  height: 40px;
  width: auto;
  opacity: .95;
}

.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, .15);
  border-top-color: #3a7bd5;
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

/* ===== 2) 頁首進度條 ===== */
#progressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: #3a7bd5;
  z-index: 2100;
  pointer-events: none;
  transition: width 80ms linear;
  box-shadow: 0 0 6px rgba(0, 0, 0, .15);
}


/* ===== 3) Header（透明→上色、縮小、字色切換） ===== */
#siteHeader {
  background: transparent !important;
  border-color: transparent !important;
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, padding 180ms ease;
}

#siteHeader .container {
  transition: padding 180ms ease;
}

#siteHeader.shrink .container {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}

#siteHeader.header-solid {
  background: rgba(255, 255, 255, .8) !important;
  border-color: rgba(0, 0, 0, .06) !important;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
}

#siteHeader.header-solid .container {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}

/* Menu 預設白字（透明 header 狀態） */
header .navbar-nav .nav-link,
header .lang-switch a {
  color: #fff;
  transition: color .3s ease;
}

header .navbar-nav .nav-link:hover,
header .lang-switch a:hover {
  color: #e5e7eb;
}

/* Header 有底色時切換成深字 */
header.header-scrolled .navbar-nav .nav-link,
header.header-scrolled .lang-switch a {
  color: #222;
}

header.header-scrolled .navbar-nav .nav-link:hover,
header.header-scrolled .lang-switch a:hover {
  color: #000;
}

/* 固定 header 疊在最上層 */
header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
}


/* ===== 4) Reveal（可重複觸發） ===== */
.reveal-h2 {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px);
  transition: opacity 1s ease, filter 1s ease, transform 1s ease;
}

.reveal-h2.in-view {
  opacity: 1;
  filter: none;
  transform: none;
}

.reveal-card {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}

.reveal-card.in-view {
  opacity: 1;
  transform: none;
  filter: none;
}

/* 通用 .reveal（欄位/其他元素） */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

  .reveal-h2,
  .reveal-card,
  .reveal {
    transition-duration: 200ms;
    transform: none;
    filter: none;
  }
}


/* ===== 5) 背景閃爍（計數 ≥10） ===== */
@keyframes bgFlash {
  0% {
    background-color: var(--bs-body-bg);
  }

  50% {
    background-color: #ffe066;
  }

  100% {
    background-color: var(--bs-body-bg);
  }
}

.flash-bg {
  animation: bgFlash .5s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .flash-bg {
    animation: none !important;
  }
}


/* ===== 6) 容器寬度（桌機） ===== */
@media (min-width:1200px) {
  .container {
    max-width: 1320px;
  }
}


/* ===== 7) CursorDot 紅點 ===== */
#cursorDot {
  position: fixed;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2000;
  opacity: .9;
  background: rgba(255, 59, 48, .9);
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1);
  transform-origin: center;
  will-change: transform, filter;
  box-shadow: 0 0 12px rgba(255, 59, 48, .6), 0 0 24px rgba(255, 59, 48, .4);
  backdrop-filter: blur(3px);
  filter: blur(.2px);
}

#cursorDot.is-hidden {
  opacity: 0;
  box-shadow: none;
}

@keyframes cursorPulse {
  0% {
    transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(1);
    box-shadow: 0 0 12px rgba(255, 59, 48, .6), 0 0 24px rgba(255, 59, 48, .4);
  }

  40% {
    transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(1.8);
    box-shadow: 0 0 24px rgba(255, 59, 48, .85), 0 0 48px rgba(255, 59, 48, .6);
  }

  100% {
    transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(1);
    box-shadow: 0 0 12px rgba(255, 59, 48, .6), 0 0 24px rgba(255, 59, 48, .4);
  }
}

#cursorDot.pulse {
  animation: cursorPulse 320ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  #cursorDot.pulse {
    animation: none;
    box-shadow: 0 0 18px rgba(255, 59, 48, .9), 0 0 36px rgba(255, 59, 48, .65);
  }
}


/* ===== 8) Hero / 全螢幕影片 ===== */
#heroVideo {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
}

#heroSection {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  background: transparent;
  z-index: 1;
}

#heroSection video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#heroSection .position-relative {
  z-index: 2;
}

#heroSection .bg-dark.bg-opacity-50 {
  z-index: 1;
}

@media (max-width:599px) {
  #heroSection {
    min-height: 90vh;
  }
}

#videoSection {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

#videoSection video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

#videoSection .position-relative {
  z-index: 1;
}

video::-webkit-media-controls {
  display: none !important;
}


/* ===== 9) 服務區（SVG 曲線跑馬燈 + 磁吸 hover） ===== */
/* — Apple 風曲線字幕（顏色在 <linearGradient id="appleGrad"> 調整） — */
#service {
  background: rgba(255, 255, 255, 0);
  position: relative;
}

#service .curve-marquee {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 160px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

#service .marquee-text {
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(26px, 5vw, 46px);
  letter-spacing: .06em;
  fill: url(#appleGrad);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .05));
  dominant-baseline: middle;
  text-anchor: start;
}

#service .marquee-text tspan {
  letter-spacing: .1em;
}

/* — 磁吸 hover（桌機） — */
@media (hover:hover) and (pointer:fine) {
  .magnet {
    transform: translateZ(0);
    transition: transform .18s ease, box-shadow .18s ease;
    will-change: transform;
    perspective: 800px;
  }

  .magnet-inner {
    transition: transform .18s ease;
    will-change: transform;
  }

  .magnet.hovering {
    box-shadow: 0 14px 30px rgba(0, 0, 0, .05);
  }
}

/* 使用者偏好減少動態：停用動畫 */
@media (prefers-reduced-motion: reduce) {
  #service .curve-marquee animate {
    display: none;
  }
}

/* 舊的「影片上方跑馬燈 UL」如果將來要用，保留樣式 */
.video-marquee {
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  pointer-events: none;
  z-index: 2;
  height: auto;
}

.video-marquee .marquee__track {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(16px, 4vw, 40px);
  will-change: transform;
  white-space: nowrap;
}

.video-marquee .marquee__track li {
  list-style: none;
  white-space: nowrap;
  padding: .45rem 1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, #fff 40%, transparent);
  background: color-mix(in oklab, rgba(0, 0, 0, .35), transparent);
  backdrop-filter: blur(2px);
  color: #fff;
  font-weight: 700;
  letter-spacing: .06em;
}

@media (prefers-reduced-motion: reduce) {
  .video-marquee {
    position: static;
    padding: .75rem 0;
  }

  .video-marquee .marquee__track {
    position: static;
    transform: none !important;
  }
}


/* ===== 10) 選單 / Logo 切換 ===== */
.navbar-toggler {
  border-color: rgba(255, 255, 255, .35);
}

.navbar-toggler .navbar-toggler-icon {
  filter: invert(1) grayscale(1);
}

#siteHeader.header-solid .navbar-toggler {
  border-color: rgba(0, 0, 0, .2);
}

#siteHeader.header-solid .navbar-toggler .navbar-toggler-icon {
  filter: none;
}

.navbar .nav-link.active {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width:991.98px) {
  #mainNav .nav-link {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
}

/* Logo 以 content:url 切換（若你改用 JS 切 src，可移除此段以免混淆） */
.logo-img{
  display:block;
  height:38px; width:auto; object-fit:contain;
  transition: opacity .2s ease;
}

@media (max-width:767.98px) {
  .logo-img {
    height: 30px;
  }
}

/* #siteHeader:not(.header-solid) .logo-img {
  content: url("assets/img/logo-light.png");
}

#siteHeader.header-solid .logo-img {
  content: url("assets/img/logo-dark.png");
}

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
  #siteHeader:not(.header-solid) .logo-img {
    content: url("assets/img/logo-light@2x.png");
  }

  #siteHeader.header-solid .logo-img {
    content: url("assets/img/logo-dark@2x.png");
  }
} */

/* 服務卡片圖示（帶圈數字：\2780 ~ \2785） */
.service-icon::before {
  content: "\2780";
  font-size: 2.5rem;
  display: inline-block;
  line-height: 1;
  color: var(--accent, #ed481b);
  color: var(--accent, #ed481b);
}

.service-icon-2::before {
  content: "\2781" !important;
}

.service-icon-3::before {
  content: "\2782" !important;
}

.service-icon-4::before {
  content: "\2783" !important;
}

.service-icon-5::before {
  content: "\2784" !important;
}

.service-icon-6::before {
  content: "\2785" !important;
}


/* ===== 11) Footer ===== */
.footer {
  background: #0f1216;
  color: #eaeaea;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .95rem;
  padding: 15px 0;
}

.footer .footer-copy {
  align-self: flex-end;

}

.footer-info p {
  margin-bottom: 0;
  line-height: 1.5;
}

@media (max-width:767.98px) {
  .footer {
    text-align: center;
  }

  .footer .footer-copy {
    align-self: center;
    margin-top: .5rem;
  }
}

/* Footer 既有樣式保留，新增 QR 區塊樣式 */
.footer-info p {
  margin-bottom: 0;
}
.footer .qr-wrap{
  display: inline-flex;
  flex-direction: column;
  gap: .35rem;
  align-items: center;

}

.footer .qr-img{
  width: 60px;
  height: 60px;
  object-fit: contain;
  
  padding: 0;             /* 留白避免裁邊 */
  /* border-radius: 10px; */
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.footer .qr-caption{
  font-size: .7rem;
  opacity: .85;
}

/* 手機置中：公司資訊與 QR 垂直堆疊 */
@media (max-width: 767.98px){
  .footer .footer-info{
    justify-content: center !important;
    text-align: center;
  }
}


/* ===== 12) UI 元件（卡片、標題） ===== */
.card {
  /* 玻璃白（建議配合 fixed hero 影片） */
  background: rgba(255, 255, 255, .40);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
}

h5 {
  color: #125430;
  color: #ffffff;
}

/* 你原本指定的服務標題色，保留 */


/* 漢堡展開時固定 header 實心（提升到 ID 規則，壓過 #siteHeader 的 transparent） */
#siteHeader.menu-open-force {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

/* 展開時的選單字色（與 header-scrolled 相同邏輯） */
#siteHeader.menu-open-force .navbar-nav .nav-link,
#siteHeader.menu-open-force .lang-switch a {
  color: #222;
}
#siteHeader.menu-open-force .navbar-nav .nav-link:hover,
#siteHeader.menu-open-force .lang-switch a:hover {
  color: #000;
}


/* ===== Language Switch (pill segmented) ===== */
.lang-switch{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px;
  border-radius: 9999px;
  background: #f1f2f6;                /* 淺底 */
  box-shadow: inset 0 0 0 1px #e6e8ef; /* 內描邊 */
}

.lang-switch .btn{
  border: 0 !important;
  background: transparent !important;
  color: #5a5f73 !important;
  padding: 4px 12px !important;
  line-height: 1 !important;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 9999px !important;
  min-width: 38px;                 /* ← 更小的觸控寬度 */
  font-size: 0.78rem !important;   /* ← 字變小 */

}

.lang-switch .btn.is-active{
  background: #145833 !important;      /* 深色選中 */
  color: #fff !important;
}

.lang-switch .btn:focus-visible{
  outline: 2px solid #3a7bd5;
  outline-offset: 2px;
}


/* ===== Brand Typography (JP) ===== */
:root{
  --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
               "Noto Sans TC", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;

  /* 調整整體節奏：字距、行高偏日系 */
  --lh-body: 1.7;
  --lh-heading: 1.25;
  --track-tight: -0.01em;  /* 大標題微收緊 */
  --track-normal: 0.01em;  /* 本文微拉開，易讀 */
}

/* 全站本文／UI */
body{
  font-family: var(--font-sans);
  line-height: var(--lh-body);
  letter-spacing: var(--track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1; /* 日文比例寬度（仮名等） */
}

/* 標題使用明朝體呈現品牌感 */
h1, h2, .brand-title{
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-tight);
}

/* 次標題（較克制的品牌感） */
h3, h4, .brand-subtitle{
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: calc(var(--lh-heading) + 0.05);
}

/* 導覽／按鈕／標籤：清晰的 sans */
.navbar .nav-link,
.btn,
.badge,
.lang-switch .btn{
  font-family: var(--font-sans);
  font-weight: 500;            /* JP UI 推薦 500 */
  letter-spacing: 0.02em;
}

/* 英數對齊（價格、統計、計數器） */
.num-tabular{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "pnum" 0, "palt" 0;
}

/* Hero 特別款（大標更優雅） */
.hero-title{
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* 小尺寸說明文字（維持清晰） */
.small-note{
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}

/* 在深色 header 固定時，導覽字色對比 */
#siteHeader.header-solid .nav-link{ color:#111; }
#siteHeader:not(.header-solid) .nav-link{ color:#fff; }




/* ===== Logo + Brand Name ===== */
.brand-name{
  font-family: var(--font-serif, "Shippori Mincho"), "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
  padding-left: .25rem;
  color: #fff;
  transition: color .25s ease, opacity .25s ease;
  margin-top: 6px;
}

/* Header 填滿時字色變深 */
#siteHeader.header-solid .brand-name,
#siteHeader.menu-open-force .brand-name{
  color:#222;
}

/* 漸入 */
.brand-name.show{
  opacity: 1;
}
.brand-name{
  opacity: .95;
}