/* ========================================================================
   ORIGIN 原點網頁工作室 — 全站基礎樣式
   Reset / 版面 / 導覽 / 按鈕 / 表單 / 跑馬燈 / Footer / 顆粒紋理 / RWD 基礎
   （各區塊獨立樣式在 styles-sections.css）
   ======================================================================== */

/* ---------------------------------------------------------------------
   0. Reset
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--color-bg);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 0;
  /* 英文長字不得撐破卡片（320px 檢驗） */
  overflow-wrap: break-word;
}

/* ---- 語言別排版微調：CJK 行高較高、拉丁字較緊 ---- */
html[lang="zh-Hant"] body,
html[lang="ja"] body { line-height: 1.8; }
html[lang="en"] body { line-height: 1.6; }

/* 日文：嚴格斷行規則，避免行頭出現促音/拗音 */
html[lang="ja"] body { line-break: strict; }

/* 英/日文 eyebrow 字距過寬容易折行，收斂至 .12em */
html[lang="en"] .eyebrow,
html[lang="ja"] .eyebrow,
html[lang="en"] .hero__eyebrow,
html[lang="ja"] .hero__eyebrow { letter-spacing: .12em; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
}

button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  /* 標題換行視覺平衡，避免孤字（不支援的瀏覽器自動忽略） */
  text-wrap: balance;
}

::selection { background: var(--color-accent); color: var(--color-bg); }

/* ---------------------------------------------------------------------
   1. 版面工具
   --------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  position: relative;
}

.section { position: relative; padding-block: var(--space-section); }

.section-hairline-top { border-top: var(--border-w) solid var(--color-line); }
.section-hairline-bottom { border-bottom: var(--border-w) solid var(--color-line); }

.eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: var(--space-md);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
  display: inline-block;
}

.section-head { max-width: 46rem; margin-bottom: var(--space-xl); }

.section-head h2 { font-size: var(--text-h2); }

.text-dim { color: var(--color-text-dim); }

.ghost-numeral {
  position: absolute;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--text-ghost);
  color: rgb(var(--accent-rgb) / 0.08);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  top: -2rem;
  right: 2%;
}

/* 主要內容需疊在 ghost numeral 之上 */
.section > .container { z-index: 1; }

/* ---------------------------------------------------------------------
   2. 顆粒紋理疊層（全頁固定，SVG feTurbulence data-URI）
   --------------------------------------------------------------------- */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}

/* skip-link 以 transform 進出（合成器屬性），不動畫 top */
.skip-link {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: calc(var(--z-nav) + 10);
  background: var(--color-accent);
  color: var(--color-bg);
  padding: .8em 1.4em;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transform: translateY(-250%);
  transition: transform var(--dur-fast) var(--ease-out-expo);
}

.skip-link:focus { transform: translateY(0); }

/* ---------------------------------------------------------------------
   3. 導覽列
   --------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding-block: 1.4rem;
  /* 僅過渡合成器/繪製屬性，不過渡 padding-block（版面屬性） */
  transition: background-color var(--dur-normal) var(--ease-out-expo),
              backdrop-filter var(--dur-normal) var(--ease-out-expo),
              border-color var(--dur-normal) var(--ease-out-expo);
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgb(var(--bg-rgb) / .75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--color-line);
  padding-block: .9rem;
}

.nav .container { display: flex; align-items: center; justify-content: space-between; }

.nav__logo {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .02em;
}

.nav__logo .accent { color: var(--color-accent); }

.nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.9rem, .6rem + 1vw, 2.4rem);
}

.nav__links a {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  position: relative;
  padding-block: .4rem;
  transition: color var(--dur-fast) var(--ease-out-expo);
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-normal) var(--ease-out-expo);
}

.nav__links a:hover,
.nav__links a:focus-visible { color: var(--color-text); }
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 1rem; }

.nav__hamburger {
  display: none;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav__hamburger span {
  position: absolute;
  width: 22px;
  height: 1.5px;
  background: var(--color-text);
  transition: transform var(--dur-fast) var(--ease-out-expo), opacity var(--dur-fast);
}

.nav__hamburger span:nth-child(1) { transform: translateY(-6px); }
.nav__hamburger span:nth-child(3) { transform: translateY(6px); }

.nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* 手機全螢幕選單
   注意：此元素必須是 body 直接子元素（不可巢狀在 .nav 內），
   否則 .nav.is-scrolled 的 backdrop-filter 會建立 containing block，
   讓 position:fixed 相對 nav 解析、選單塌陷成 80px。
   z-index 高於 nav（選單開啟時 body.menu-open 只讓漢堡按鈕浮在其上，
   logo / CTA 一律隱藏，不得蓋在選單上）。
   padding-top 預留 nav 高度，內容不會躲在頂列底下。 */
.nav__overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem var(--container-pad) var(--container-pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-normal) var(--ease-out-expo);
}

/* 選單開啟時：整個 nav 抬到 overlay 之上，但只留漢堡按鈕可見可點——
   背景/毛玻璃/hairline 全部關掉，logo 與 CTA 隱藏且不可互動，
   確保視覺上 overlay 之上「只有」漢堡（X）按鈕 */
body.menu-open .nav {
  z-index: calc(var(--z-overlay) + 1);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

body.menu-open .nav__logo,
body.menu-open .nav__actions > :not(.nav__hamburger) {
  opacity: 0;
  pointer-events: none;
}

.nav__overlay.is-open { opacity: 1; visibility: visible; }

.nav__overlay-links { display: flex; flex-direction: column; gap: 1.4rem; margin-bottom: 3rem; }

.nav__overlay-links a {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.5rem + 3vw, 3rem);
  font-weight: 700;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo);
}

.nav__overlay.is-open .nav__overlay-links a { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------
   3.5 語言切換器（桌機 nav + 手機 overlay 各一組）
   --------------------------------------------------------------------- */
.lang-switch { display: flex; align-items: center; gap: .2rem; }

.lang-switch button {
  min-width: 44px;
  min-height: 44px;
  padding: .4em .6em;
  font-family: var(--font-label);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  position: relative;
  transition: color var(--dur-fast) var(--ease-out-expo);
}

.lang-switch button::after {
  content: "";
  position: absolute;
  left: .6em; right: .6em; bottom: .55em;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-normal) var(--ease-out-expo);
}

.lang-switch button:hover,
.lang-switch button:focus-visible { color: var(--color-text); }

.lang-switch button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.lang-switch button.is-active { color: var(--color-accent); }
.lang-switch button.is-active::after { transform: scaleX(1); }

.nav__overlay .lang-switch { margin-bottom: var(--space-md); }

/* ---------------------------------------------------------------------
   4. 按鈕
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 44px;
  padding: .95em 1.9em;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-fast) var(--ease-out-expo),
              box-shadow var(--dur-fast) var(--ease-out-expo),
              background-color var(--dur-fast) var(--ease-out-expo),
              border-color var(--dur-fast) var(--ease-out-expo);
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* 短字按鈕強制單行：nav CTA（EN@320 會折兩行）與 sticky CTA。
   Hero 主 CTA 與方案卡 CTA（EN 文案較長、容器較窄）保留自然換行 */
.nav .btn,
.sticky-cta .btn { white-space: nowrap; }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid var(--color-accent);
}

.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); background: var(--color-accent-hover); }

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-line);
}

.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); }

.btn--full { width: 100%; }
.btn--lg { padding: 1.1em 2.4em; font-size: var(--text-base); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--color-text-dim);
  font-size: var(--text-sm);
  transition: color var(--dur-fast) var(--ease-out-expo);
}

.link-arrow:hover, .link-arrow:focus-visible { color: var(--color-accent); }

/* 箭頭以 transform 位移（合成器屬性），不動畫 gap */
.link-arrow .arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}

.link-arrow:hover .arrow,
.link-arrow:focus-visible .arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   5. 跑馬燈
   --------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--color-line);
  padding-block: 1.4rem;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}

.marquee__item {
  font-family: var(--font-label);
  font-size: clamp(1.1rem, 1rem + .8vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgb(var(--accent-rgb) / .4);
  white-space: nowrap;
  padding-inline: 1.2rem;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------
   6. 表單元件
   --------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }

.field label {
  font-family: var(--font-label);
  font-size: var(--text-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.field input,
.field select,
.field textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: .9em 1em;
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-out-expo), background-color var(--dur-fast);
}

.field textarea { min-height: 120px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-surface-2);
}

.field select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" stroke="%23C9A96A" stroke-width="1.5" fill="none"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1em center;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--color-danger); }

.field__error {
  font-size: var(--text-sm);
  color: var(--color-danger);
  display: none;
}

.field.has-error .field__error { display: block; }

/* 蜜罐欄位：對人類與輔助技術完全隱藏（不可用 display:none——
   部分機器人會跳過 display:none 的欄位），機器人填了後端就靜默丟棄 */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-success {
  display: none;
  text-align: center;
  padding: var(--space-lg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.form-success.is-visible { display: block; }

.form--hidden { display: none; }

/* ---------------------------------------------------------------------
   7. Footer
   --------------------------------------------------------------------- */
.footer { padding-block: var(--space-xl) var(--space-lg); }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}

.footer__brand .nav__logo { display: block; margin-bottom: 1rem; }

.footer h4 {
  font-family: var(--font-label);
  font-size: var(--text-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 1.2rem;
}

.footer__links { display: flex; flex-direction: column; gap: .7rem; }

.footer__links a { color: var(--color-text-dim); transition: color var(--dur-fast); }
.footer__links a:hover, .footer__links a:focus-visible { color: var(--color-accent); }

.footer__bottom {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: var(--text-sm);
  color: var(--color-text-dimmer);
}

/* ---------------------------------------------------------------------
   8. 手機底部 Sticky CTA
   --------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky-cta);
  display: none;
  padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background: rgb(var(--bg-rgb) / .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-line);
  transform: translateY(0);
  transition: transform var(--dur-normal) var(--ease-out-expo);
}

.sticky-cta.is-hidden { transform: translateY(120%); }

/* ---------------------------------------------------------------------
   9. Reveal 動效 & reduced-motion
   --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* ---------------------------------------------------------------------
   10. RWD 基礎
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav .lang-switch { display: none; } /* 手機改用 overlay 內的語言切換器 */
  .nav__hamburger { display: inline-flex; }
  .sticky-cta { display: block; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  body.has-sticky-cta { padding-bottom: 78px; }
}

@media (max-width: 480px) {
  .container { padding-inline: 1.1rem; }
}