/* ============================================================
   global.css — 索多協議 SAS 全站共用樣式
   「服從是唯一的美德。」
   ============================================================ */


/* ============================================================
   @font-face — 源樣明體（GenYoMin TW）
   壓抑的經書感襯線體；若 CDN 未載入則 fallback 至 Noto Serif TC
   來源：github.com/ButTaiwan/genyo-font
   ============================================================ */

@font-face {
  font-family: 'GenYoMin TW';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/ButTaiwan/genyo-font/GenYoMinTW-L.ttf') format('truetype');
  unicode-range: U+4E00-9FFF, U+3000-303F, U+FF00-FFEF, U+0020-007E;
}

@font-face {
  font-family: 'GenYoMin TW';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/ButTaiwan/genyo-font/GenYoMinTW-M.ttf') format('truetype');
  unicode-range: U+4E00-9FFF, U+3000-303F, U+FF00-FFEF, U+0020-007E;
}


/* ============================================================
   A — 文字選取色
   ============================================================ */

::selection {
  background-color: var(--sodo-accent);
  color: var(--landing-accent);
}
::-moz-selection {
  background-color: var(--sodo-accent);
  color: var(--landing-accent);
}

[data-theme="mirror"] ::selection {
  background-color: var(--mirror-accent);
  color: var(--mirror-text-primary);
}
[data-theme="mirror"] ::-moz-selection {
  background-color: var(--mirror-accent);
  color: var(--mirror-text-primary);
}


/* ============================================================
   B — CSS Reset
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  background-color: var(--sodo-bg-primary);
  color: var(--sodo-text-primary);
  font-family: var(--font-industrial);
}

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

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

button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}

ul, ol {
  list-style: none;
}


/* ============================================================
   B — 字體層級
   ============================================================ */

h1 {
  font-family: var(--font-industrial);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.2;
}

h2 {
  font-family: var(--font-industrial);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.3;
}

h3 {
  font-family: var(--font-industrial);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.4;
}

p {
  font-family: var(--font-industrial);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.8;
}

/* 鏡都調性覆寫 */
[data-theme="mirror"] h1 {
  font-family: var(--font-sacred);
  font-weight: 600;
}

[data-theme="mirror"] h2 {
  font-family: var(--font-sacred);
  font-weight: 400;
}

[data-theme="mirror"] h3 {
  font-family: var(--font-sacred);
  font-weight: 300;
}

[data-theme="mirror"] p {
  font-family: var(--font-sacred);
  letter-spacing: 0.05em;
}

/* 宗教典籍體 */
.text-scripture {
  font-family: var(--font-scripture);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.3rem);
}

/* 監控標籤 / 等寬文字 */
.tag-monitor,
.text-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme="mirror"] .tag-monitor,
[data-theme="mirror"] .text-mono {
  font-weight: 300;
}


/* ============================================================
   C — 導航列
   ============================================================ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  transition: background-color var(--transition-smooth),
              backdrop-filter var(--transition-smooth);
  background-color: transparent;
}

.site-nav.scrolled {
  background-color: rgba(26, 26, 29, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 鏡都系頁面導航背景 */
body[data-theme="mirror"] .site-nav.scrolled {
  background-color: rgba(240, 237, 232, 0.88);
}

.site-nav__logo {
  display: flex;
  align-items: center;
  transition: opacity var(--transition-smooth);
}

.site-nav__logo img {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}

body[data-theme="mirror"] .site-nav__logo img {
  filter: brightness(0);
}

.site-nav__logo:hover {
  opacity: 0.75;
}

.site-nav__links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.site-nav__links a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--landing-accent);
  transition: color var(--transition-smooth);
  position: relative;
}

.site-nav__links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--sodo-accent-bright);
  transition: width var(--transition-smooth);
}

.site-nav__links a:hover {
  color: var(--sodo-accent-bright);
}

.site-nav__links a:hover::after {
  width: 100%;
}

body[data-theme="mirror"] .site-nav__links a {
  color: var(--mirror-text-secondary);
}

body[data-theme="mirror"] .site-nav__links a::after {
  background-color: var(--mirror-accent);
}

body[data-theme="mirror"] .site-nav__links a:hover {
  color: var(--mirror-text-primary);
}

/* 子分頁返回首頁按鈕 */
.site-nav__home {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sodo-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--transition-smooth);
  margin-right: 1.5rem;
}

.site-nav__home:hover {
  color: var(--sodo-accent-bright);
}

body[data-theme="mirror"] .site-nav__home {
  color: var(--mirror-text-secondary);
}

body[data-theme="mirror"] .site-nav__home:hover {
  color: var(--mirror-text-primary);
}

/* 導航右側群組（返回 + 連結） */
.site-nav__right {
  display: flex;
  align-items: center;
}


/* ============================================================
   D — 游標系統
   ============================================================ */

/* 全站隱藏原生游標，使用 difference 反色 halo */
[data-cursor="sodo"],
[data-cursor="sodo"] *,
[data-cursor="mirror"],
[data-cursor="mirror"] * {
  cursor: none;
}

/* 光暈 div，由 global.js 控制位置；mix-blend-mode: difference 自動對任何背景反色 */
#cursor-halo {
  position: fixed;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0) 70%);
  border: 1.5px solid #fff;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: var(--z-cursor);
  opacity: 1;
  mix-blend-mode: difference;
  will-change: left, top;
}

#cursor-halo.visible {
  opacity: 1;
}


/* ============================================================
   E — 邊緣標語元件
   ============================================================ */

.edge-tagline {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(204, 51, 51, 0.75);
  pointer-events: none;
  z-index: var(--z-tagline);
  white-space: nowrap;
  opacity: 0;
}

.edge-tagline--top {
  top: 0.8rem;
}

.edge-tagline--bottom {
  bottom: 0.8rem;
}

body[data-theme="mirror"] .edge-tagline {
  color: rgba(184, 168, 138, 0.65);
}


/* ============================================================
   F — 頁面轉場包裹層
   ============================================================ */

.page-wrapper {
  min-height: 100vh;
  padding-top: 4rem; /* 補足固定導航列高度 */
}

/* GSAP 負責實際動畫，這裡僅定義初始狀態 */
.page-wrapper.entering {
  opacity: 0;
  transform: translateY(20px);
}


/* ============================================================
   G — 頁尾
   ============================================================ */

.site-footer {
  padding: 3rem 2rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--sodo-text-secondary);
  border-top: 1px solid var(--sodo-line);
  text-align: center;
  text-transform: uppercase;
}

body[data-theme="mirror"] .site-footer {
  color: var(--mirror-text-secondary);
  border-top-color: var(--mirror-line);
  background-color: var(--mirror-bg-secondary);
}


/* ============================================================
   H — 雜訊紋理覆層（索多區塊用）
   ============================================================ */

.noise-overlay {
  position: relative;
}

.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  z-index: 0;
}

.noise-overlay > * {
  position: relative;
  z-index: 1;
}


/* ============================================================
   I — 掃描線動畫（監控氛圍裝置）
   ============================================================ */

@keyframes scanline {
  0%   { transform: translateX(-100%); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateX(100vw); opacity: 0; }
}

.scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  pointer-events: none;
  animation: scanline 8s linear infinite;
  z-index: 2;
}

/* 全螢幕掃描線（用在首頁 Hero） */
@keyframes scanline-full {
  0%   { left: -5%; opacity: 0; }
  3%   { opacity: 1; }
  97%  { opacity: 1; }
  100% { left: 105%; opacity: 0; }
}

.scanline-full {
  position: absolute;
  top: 50%;
  left: -5%;
  width: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  pointer-events: none;
  animation: scanline-full 8s linear infinite;
  z-index: 2;
}


/* ============================================================
   J — 共用 Accordion 元件
   ============================================================ */

.accordion {
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.accordion__head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  padding: 1.4rem 0.5rem;
  background: transparent;
  border: none;
  color: inherit;
  font-family: var(--font-sacred);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: color 0.3s, padding-left 0.3s;
  text-align: left;
}

.accordion__head:hover {
  padding-left: 1rem;
}

.accordion__num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accordion-accent, currentColor);
  letter-spacing: 0.15em;
}

.accordion__label { flex: 1; }

.accordion__arrow {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--accordion-accent, currentColor);
  transition: transform 0.4s;
  font-weight: 300;
}

.accordion[data-open="true"] .accordion__arrow {
  transform: rotate(45deg);
}

.accordion__body {
  height: 0;
  overflow: hidden;
}

.accordion__body p {
  font-size: 0.95rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
  margin: 0 0 0.6rem;
  padding: 0 0.5rem;
  opacity: 0.85;
}

.accordion__body p:first-child { padding-top: 0.5rem; }
.accordion__body p:last-child  { padding-bottom: 1.2rem; }

/* 頁尾返回首頁按鈕 */
.home-back-wrap {
  display: flex;
  justify-content: center;
  padding: 2rem 2rem 2rem;
}

.home-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.8rem;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity var(--transition-smooth), padding var(--transition-smooth);
}

.home-back-btn:hover {
  opacity: 1;
  padding-left: 2.3rem;
  padding-right: 2.3rem;
}


/* 角色頁尾返回按鈕 */
.char-back-wrap {
  display: flex;
  justify-content: center;
  padding: 4rem 2rem 2rem;
}

.char-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity var(--transition-smooth), padding var(--transition-smooth);
}

.char-back-btn:hover {
  opacity: 1;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}


/* ============================================================
   K — 響應式斷點
   ============================================================ */

/* 手機 Mobile < 768px */
@media (max-width: 767px) {
  .site-nav {
    padding: 0.75rem 1rem;
  }

  .site-nav__links {
    gap: 1rem;
  }

  .site-nav__home {
    margin-right: 0.75rem;
  }

  .site-footer {
    padding: 2rem 1rem;
  }

  /* 手機禁用自訂游標 */
  #cursor-halo { display: none !important; }
  [data-cursor="sodo"],
  [data-cursor="sodo"] *,
  [data-cursor="mirror"],
  [data-cursor="mirror"] * {
    cursor: auto;
  }
}

/* 觸控裝置禁用自訂游標（平板等） */
@media (hover: none) and (pointer: coarse) {
  #cursor-halo { display: none !important; }
  [data-cursor="sodo"],
  [data-cursor="sodo"] *,
  [data-cursor="mirror"],
  [data-cursor="mirror"] * {
    cursor: auto;
  }
}

/* 平板 Tablet 768–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-nav {
    padding: 1rem 1.5rem;
  }
}

/* 桌機 Desktop ≥ 1024px */
@media (min-width: 1024px) {
  /* 桌機特定規則，各分頁的 CSS 中依需求補充 */
}