/* ==========================================================================
   縮時森林 — Base：reset、typography、grid
   ========================================================================== */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  scroll-padding-top: var(--ts-header-h);
}

html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: clip;
}

body {
  font-family: var(--ts-font-sans-zh);
  font-size: var(--ts-text-base);
  line-height: 1.7;
  color: var(--ts-fg);
  background: var(--ts-bg);
  font-feature-settings: "palt", "kern";
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

ul, ol {
  list-style: none;
}

::selection {
  background: var(--ts-forest);
  color: var(--ts-cream);
}

/* ===== Typography ===== */
.ts-display {
  font-family: var(--ts-font-serif-zh);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ts-display--en {
  font-family: var(--ts-font-serif-en-display);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.025em;
}

.ts-eyebrow {
  font-family: var(--ts-font-mono);
  font-size: var(--ts-text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ts-fg-muted);
}

.ts-eyebrow--accent { color: var(--ts-accent-warm); }

.ts-body {
  font-family: var(--ts-font-sans-zh);
  font-size: var(--ts-text-md);
  line-height: 1.85;
  color: var(--ts-fg);
}

.ts-muted { color: var(--ts-fg-muted); }

.ts-mono {
  font-family: var(--ts-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ===== Container & Grid ===== */
.ts-container {
  width: 100%;
  max-width: var(--ts-container);
  margin-inline: auto;
  padding-inline: var(--ts-gutter);
}

.ts-container--wide {
  max-width: var(--ts-container-wide);
}

.ts-container--narrow {
  max-width: 880px;
}

.ts-section {
  padding-block: var(--ts-sp-8);
}

.ts-section--tight {
  padding-block: var(--ts-sp-6);
}

@media (max-width: 900px) {
  .ts-section { padding-block: var(--ts-sp-6); }
  .ts-section--tight { padding-block: var(--ts-sp-5); }
}

/* ===== Reveal helpers（GSAP 入場前的初始狀態）=====
   只在 JS 偵測到 GSAP 後才生效，避免 JS 失敗時內容永久消失。
   stagger 容器本身保持可見（otherwise 透明 parent 會遮蔽 children）。 */
html.ts-js [data-reveal]:not([data-reveal="stagger"]) {
  opacity: 0;
  transform: translateY(24px);
}
html.ts-js [data-reveal="fade"] {
  transform: none;
}
html.ts-js [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(20px);
}

/* ===== 焦點態 ===== */
:focus-visible {
  outline: 2px solid var(--ts-forest);
  outline-offset: 3px;
  border-radius: var(--ts-radius-xs);
}

/* ===== 圖片占位（漸層 + 噪點）===== */
.ts-img-placeholder {
  position: relative;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(238, 234, 231, 0.85), transparent 60%),
    radial-gradient(140% 100% at 80% 100%, rgba(73, 84, 52, 0.18), transparent 60%),
    linear-gradient(145deg, var(--ts-warm) 0%, var(--ts-moss) 55%, var(--ts-forest) 110%);
  overflow: hidden;
  isolation: isolate;
}
.ts-img-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.17  0 0 0 0 0.20  0 0 0 0.18 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
.ts-img-placeholder > * {
  position: relative;
  z-index: 2;
}

.ts-img-placeholder--dark {
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(163, 172, 153, 0.32), transparent 60%),
    linear-gradient(160deg, var(--ts-navy) 0%, var(--ts-forest-deep) 60%, var(--ts-forest) 110%);
}
.ts-img-placeholder--warm {
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(237, 205, 194, 0.65), transparent 55%),
    linear-gradient(140deg, var(--ts-cream-tint) 0%, var(--ts-peach) 60%, var(--ts-moss) 110%);
}
.ts-img-placeholder--moss {
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(238, 234, 231, 0.6), transparent 60%),
    linear-gradient(160deg, var(--ts-moss) 0%, var(--ts-forest) 110%);
}

/* 圖片內部 label */
.ts-img-label {
  position: absolute;
  inset-block-end: var(--ts-sp-3);
  inset-inline-start: var(--ts-sp-3);
  font-family: var(--ts-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ts-cream);
  background: rgba(40, 44, 60, 0.78); /* A6 2026-05-29：0.55→0.78，cream 字對 chip 對比 3.0→≥6:1 */
  padding: 6px 10px;
  border-radius: var(--ts-radius-xs);
  backdrop-filter: blur(8px);
}

/* 真圖（img_url 有值時渲染，覆蓋 .ts-img-placeholder 漸層佔位）2026-05-29 */
.ts-img-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== 按鈕 ===== */
.ts-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--ts-font-sans-zh);
  font-weight: 500;
  font-size: var(--ts-text-base);
  letter-spacing: 0.04em;
  border-radius: var(--ts-radius-full);
  transition:
    background-color var(--ts-dur-base) var(--ts-ease-natural),
    color            var(--ts-dur-base) var(--ts-ease-natural),
    transform        var(--ts-dur-quick) var(--ts-ease-standard),
    box-shadow       var(--ts-dur-base) var(--ts-ease-natural);
}
.ts-btn:hover { transform: translateY(-1px); }
.ts-btn:active { transform: translateY(0); }

.ts-btn--primary {
  background: var(--ts-forest);
  color: var(--ts-cream);
}
.ts-btn--primary:hover {
  background: var(--ts-forest-deep);
  box-shadow: var(--ts-shadow-md);
}

.ts-btn--ghost {
  background: transparent;
  color: var(--ts-fg);
  border: 1px solid var(--ts-border-strong);
}
.ts-btn--ghost:hover {
  background: var(--ts-warm);
  border-color: var(--ts-forest);
}

.ts-btn--quiet {
  padding: 10px 0;
  background: transparent;
  color: var(--ts-fg);
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}
.ts-btn--quiet:hover {
  color: var(--ts-forest);
}

.ts-btn-arrow {
  display: inline-block;
  transition: transform var(--ts-dur-quick) var(--ts-ease-standard);
}
.ts-btn:hover .ts-btn-arrow { transform: translateX(4px); }

/* ===== Tag chip ===== */
.ts-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-family: var(--ts-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-fg-muted);
  background: var(--ts-warm);
  border-radius: var(--ts-radius-full);
}
.ts-tag--outline {
  background: transparent;
  border: 1px solid var(--ts-border);
}
.ts-tag--accent {
  background: var(--ts-forest-soft);
  color: var(--ts-forest-deep);
}
.ts-tag--peach {
  background: var(--ts-peach);
  color: var(--ts-navy);
}

/* ===== 細節線（葉脈感）===== */
.ts-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ts-border-strong), transparent);
  border: none;
}

/* ===== 浮動呼吸 helper ===== */
@keyframes ts-breath {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-4px); }
}
.ts-breath {
  animation: ts-breath 6s var(--ts-ease-natural) infinite;
}

@keyframes ts-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(8px, -10px); }
  100% { transform: translate(0, 0); }
}
.ts-drift {
  animation: ts-drift 14s var(--ts-ease-natural) infinite;
}

/* ===== 工具類 ===== */
.ts-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ts-grid { display: grid; }
.ts-flex { display: flex; }
.ts-stack > * + * { margin-block-start: var(--ts-sp-3); }
.ts-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-sp-2);
  align-items: center;
}