/* ============================================================
 * Grovyn Blog · 共用樣式（從 blog.css 拆出）
 * 涵蓋：Sub-chips + View transition + Reading progress + GSAP scroll-fade-up + Tweaks trigger + Dark mode
 * 拆檔日期：2026-05-19
 * ============================================================ */

/* ============================================================
 * Sub-chips
 * ============================================================ */
.sub-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 0 36px;
}
.sub-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--ts-line);
  background: transparent;
  color: var(--ts-ink-soft);
  font-family: var(--ts-font-sans-zh);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all var(--ts-dur-base) var(--ts-ease-natural);
  text-decoration: none;
}
.sub-chip .chip-glyph {
  font-family: var(--ts-font-serif-zh);
  color: var(--ts-forest);
  font-weight: 500;
}
.sub-chip:hover { border-color: var(--ts-forest); color: var(--ts-navy); }
.sub-chip.active {
  background: var(--ts-forest);
  color: var(--ts-cream);
  border-color: var(--ts-forest);
}
.sub-chip.active .chip-glyph { color: var(--ts-sun); }

/* ============================================================
 * View transition + reading progress
 * ============================================================ */
.view-fade { animation: fadeUp 420ms var(--ts-ease-natural) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * GSAP scroll-fade-up 預設態
 *   - body.grovyn-anim-ready 才啟用 opacity:0（JS 沒到位仍可看到內容）
 *   - mobile 仍可見、視差關閉
 * ============================================================ */
body.grovyn-anim-ready .gsap-fade-up {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
body.grovyn-anim-ready .gsap-fade-up.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms var(--ts-ease-natural), transform 700ms var(--ts-ease-natural);
}
@media (max-width: 768px) {
  body.grovyn-anim-ready .gsap-fade-up { transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) {
  body.grovyn-anim-ready .gsap-fade-up { opacity: 1; transform: none; }
}

/* Single 標題拆字進場（vanilla SplitText 替代品） */
body.grovyn-anim-ready .gsap-split .gsap-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  will-change: opacity, transform;
}
body.grovyn-anim-ready .gsap-split.is-in .gsap-char {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms var(--ts-ease-natural), transform 600ms var(--ts-ease-natural);
}
@media (prefers-reduced-motion: reduce) {
  body.grovyn-anim-ready .gsap-split .gsap-char { opacity: 1; transform: none; }
}

/* Lottie / SVG divider 容器（雲霧分隔線） */
.grovyn-divider {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 96px;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grovyn-divider svg, .grovyn-divider lottie-player { width: 100%; height: 100%; display: block; }
.grovyn-divider .svg-cloud-path { stroke: var(--ts-forest); stroke-width: 1.2; fill: none; opacity: 0.35; }
@media (max-width: 768px) { .grovyn-divider { height: 64px; } }

/* single.php 下一篇箭頭 Lottie / SVG 容器 */
.next-article .na-arrow-anim {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.next-article .na-arrow-anim svg { width: 100%; height: 100%; }

.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--ts-forest);
  z-index: 4000;
  transition: width 100ms linear;
  pointer-events: none;
}

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

/* ============================================================
 * Tweaks button trigger
 * ============================================================ */
.tweaks-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(40, 44, 60, 0.92);
  color: var(--ts-cream);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  z-index: 3990;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ts-font-mono);
  font-size: 1rem;
  box-shadow: 0 14px 36px rgba(40, 44, 60, 0.25);
  transition: all var(--ts-dur-base) var(--ts-ease-natural);
}
.tweaks-trigger:hover { transform: translateY(-2px); background: var(--ts-forest); }
.tweaks-trigger.is-hidden { display: none; }

/* ============================================================
 * DARK MODE
 * ============================================================ */
body.grovyn-dark-mode {
  background: #282C3C !important;
  color: var(--ts-cream);
}

body.grovyn-dark-mode .grovyn-blog-frame { background: #282C3C; color: var(--ts-cream); }

body.grovyn-dark-mode .blog-head h2,
body.grovyn-dark-mode .article-page h1,
body.grovyn-dark-mode .next-article .na-title,
body.grovyn-dark-mode .article-body h2,
body.grovyn-dark-mode .article-body h3,
body.grovyn-dark-mode .article-body blockquote,
body.grovyn-dark-mode .article-body .practice .pr-title {
  color: var(--ts-cream);
}

body.grovyn-dark-mode .blog-head .blog-intro,
body.grovyn-dark-mode .article-page .ap-subtitle,
body.grovyn-dark-mode .article-body,
body.grovyn-dark-mode .article-body .practice .pr-desc,
body.grovyn-dark-mode .card-excerpt {
  color: rgba(238, 234, 231, 0.78);
}

body.grovyn-dark-mode .card-title { color: var(--ts-cream); }
body.grovyn-dark-mode .card:hover .card-title { color: var(--ts-sun); }
body.grovyn-dark-mode .card-meta,
body.grovyn-dark-mode .card-author-name,
body.grovyn-dark-mode .article-page .ap-meta,
body.grovyn-dark-mode .grovyn-blog-frame .ap-back,
body.grovyn-dark-mode .eyebrow,
body.grovyn-dark-mode .article-body .practice li,
body.grovyn-dark-mode .article-foot .af-tag {
  color: rgba(238, 234, 231, 0.62);
  border-color: rgba(255, 255, 255, 0.08);
}
body.grovyn-dark-mode .article-page .ap-meta { border-top-color: rgba(255,255,255,0.08); border-bottom-color: rgba(255,255,255,0.08); }
body.grovyn-dark-mode .article-foot { border-top-color: rgba(255,255,255,0.08); }
body.grovyn-dark-mode .article-body .practice li { border-top-color: rgba(255,255,255,0.08); }
body.grovyn-dark-mode .article-body .practice li:last-child { border-bottom-color: rgba(255,255,255,0.08); }

body.grovyn-dark-mode .empty-state { border-color: rgba(255,255,255,0.1); }
body.grovyn-dark-mode .empty-state .es-en { color: var(--ts-sun); }
body.grovyn-dark-mode .empty-state .es-title { color: var(--ts-cream); }
body.grovyn-dark-mode .empty-state .es-desc { color: rgba(238,234,231,0.6); }

body.grovyn-dark-mode .sub-chip { color: rgba(238,234,231,0.7); border-color: rgba(255,255,255,0.12); }
body.grovyn-dark-mode .sub-chip:hover { color: var(--ts-cream); border-color: var(--ts-sun); }
body.grovyn-dark-mode .sub-chip.active { background: var(--ts-sun); color: var(--ts-forest-deep); border-color: var(--ts-sun); }
body.grovyn-dark-mode .sub-chip.active .chip-glyph { color: var(--ts-forest-deep); }

body.grovyn-dark-mode .grovyn-blog-frame a.page-numbers { color: rgba(238,234,231,0.7); }
body.grovyn-dark-mode .grovyn-blog-frame a.page-numbers:hover { background: rgba(255,255,255,0.06); color: var(--ts-cream); }

/* Filter bar v2：dark mode（active 反相 cream 底 navy 字，2026-05-22） */
body.grovyn-dark-mode .filter-bar { border-bottom-color: rgba(255,255,255,0.1); }
body.grovyn-dark-mode .filter-tab { color: rgba(238, 234, 231, 0.7); }
body.grovyn-dark-mode .filter-tab:hover { color: var(--ts-cream); background: rgba(255, 255, 255, 0.06); }
body.grovyn-dark-mode .filter-tab.active { background: var(--ts-cream); color: var(--ts-navy); }
body.grovyn-dark-mode .filter-tab--child { color: rgba(238, 234, 231, 0.62); }
body.grovyn-dark-mode .filter-tab--child:hover { color: var(--ts-cream); background: rgba(255, 255, 255, 0.06); }
body.grovyn-dark-mode .filter-tab--child.active { background: var(--ts-cream); color: var(--ts-navy); }
body.grovyn-dark-mode .filter-tabs--children { border-top-color: rgba(255, 255, 255, 0.1); }
body.grovyn-dark-mode .result-count { color: rgba(238,234,231,0.62); }
body.grovyn-dark-mode .grovyn-blog-frame .page-numbers.current { background: var(--ts-sun); color: var(--ts-forest-deep); border-color: var(--ts-sun); }

body.grovyn-dark-mode .article-body strong,
body.grovyn-dark-mode .article-body em,
body.grovyn-dark-mode .article-page .ap-eyebrow,
body.grovyn-dark-mode .article-page .ap-meta .ap-sense,
body.grovyn-dark-mode .next-article .na-arrow,
body.grovyn-dark-mode .article-foot .af-sign .af-mark,
body.grovyn-dark-mode .article-body .practice li::before,
body.grovyn-dark-mode .article-body .science-card .sc-label,
body.grovyn-dark-mode .article-body .science-card .sc-body strong {
  color: var(--ts-sun);
}

body.grovyn-dark-mode .article-body h2::before { background: var(--ts-sun); }
body.grovyn-dark-mode .article-body blockquote { border-left-color: var(--ts-sun); }
body.grovyn-dark-mode .article-body figure figcaption::before { color: var(--ts-sun); }
body.grovyn-dark-mode .article-body figure figcaption { color: rgba(238,234,231,0.6); }

body.grovyn-dark-mode .article-body .science-card {
  background: rgba(238, 231, 141, 0.06);
  border-color: rgba(238, 231, 141, 0.18);
}
body.grovyn-dark-mode .article-body .science-card .sc-body { color: rgba(238,234,231,0.85); }

body.grovyn-dark-mode .article-body figure .img-wrap,
body.grovyn-dark-mode .article-page .ap-hero-img { background: #1E2230; }

body.grovyn-dark-mode .next-article { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
body.grovyn-dark-mode .next-article:hover { background: rgba(255,255,255,0.06); border-color: var(--ts-sun); }
body.grovyn-dark-mode .next-article .na-label { color: rgba(238,234,231,0.6); }

body.grovyn-dark-mode .cta-block.cta-stat { background: rgba(238, 231, 141, 0.08); color: var(--ts-cream); }
body.grovyn-dark-mode .cta-block.cta-stat .cta-stat-num { color: var(--ts-sun); }
body.grovyn-dark-mode .cta-block.cta-stat .cta-stat-label { color: rgba(238,234,231,0.7); }
body.grovyn-dark-mode .cta-block.cta-stat .cta-link { background: var(--ts-sun); color: var(--ts-forest-deep); }
body.grovyn-dark-mode .cta-block.cta-dark { background: linear-gradient(135deg, #232636 0%, #2F3721 100%); }

body.grovyn-dark-mode .read-progress { background: var(--ts-sun); }

/* 深色模式卡片圖略降亮度飽和度，避免過曝（spec B-6） */
body.grovyn-dark-mode .card .card-img img { filter: brightness(.85) saturate(.88); }

/* ============================================================
 * Focus-visible a11y（spec B-1，統一於 shared 末尾）
 * ============================================================ */
.filter-tab:focus-visible,
.sub-chip:focus-visible,
.card:focus-visible,
.grovyn-blog-frame .page-numbers:focus-visible,
.ap-back:focus-visible,
.hero-feature:focus-visible {
  outline: 2px solid var(--ts-forest);
  outline-offset: 3px;
}
body.grovyn-dark-mode .filter-tab:focus-visible,
body.grovyn-dark-mode .sub-chip:focus-visible,
body.grovyn-dark-mode .card:focus-visible,
body.grovyn-dark-mode .grovyn-blog-frame .page-numbers:focus-visible,
body.grovyn-dark-mode .ap-back:focus-visible,
body.grovyn-dark-mode .hero-feature:focus-visible {
  outline-color: var(--ts-sun);
}

/* ============================================================
 * AJAX 載入 skeleton（filter-bar 切換時 blog.js 注入 .card--skeleton）
 * ============================================================ */
.card--skeleton { pointer-events: none; }
.card--skeleton .card-img--skel,
.card--skeleton .card-meta--skel,
.card--skeleton .card-title--skel,
.card--skeleton .card-excerpt--skel {
  background: linear-gradient(90deg, rgba(40,44,60,.05) 25%, rgba(40,44,60,.11) 37%, rgba(40,44,60,.05) 63%);
  background-size: 400% 100%;
  animation: grovyn-skel 1.4s ease infinite;
  border-radius: 8px;
}
.card--skeleton .card-img--skel { aspect-ratio: 16 / 11; width: 100%; }
.card--skeleton .card-meta--skel { height: 12px; width: 42%; margin-top: 16px; border-radius: 4px; }
.card--skeleton .card-title--skel { height: 22px; width: 82%; margin-top: 12px; }
.card--skeleton .card-excerpt--skel { height: 14px; width: 100%; margin-top: 12px; border-radius: 4px; }
@keyframes grovyn-skel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
body.grovyn-dark-mode .card--skeleton .card-img--skel,
body.grovyn-dark-mode .card--skeleton .card-meta--skel,
body.grovyn-dark-mode .card--skeleton .card-title--skel,
body.grovyn-dark-mode .card--skeleton .card-excerpt--skel {
  background: linear-gradient(90deg, rgba(238,234,231,.05) 25%, rgba(238,234,231,.11) 37%, rgba(238,234,231,.05) 63%);
  background-size: 400% 100%;
}
@media (prefers-reduced-motion: reduce) {
  .card--skeleton .card-img--skel,
  .card--skeleton .card-meta--skel,
  .card--skeleton .card-title--skel,
  .card--skeleton .card-excerpt--skel { animation: none; }
}

/* ============================================================
 * RWD 響應式優化（2026-06-01）— 手機麵包屑
 * 鐵則：只用斷點覆寫，桌機 base 不動。
 * ============================================================ */
@media (max-width: 720px) {
  .eyebrow { letter-spacing: 0.1em; gap: 6px; padding: 18px 4px 12px; }
}