/* =========================================================
   靈火殿 · 語之卷 專用樣式  —  aphorisms.css
   行動端優先 · 深色柔光 · 版心 + 卡片 + 導覽 + 雙欄
   ========================================================= */

/* ---- 基底：深色柔光主題 ---- */
:root{
  --bg: #0d0f12;
  --panel: #12151a;
  --ink: #e9e4d6;             /* 主字色（微暖） */
  --muted: #b9b3a2;           /* 次字色 */
  --accent: #ffe7b5;          /* 柔金光 */
  --line: rgba(255, 240, 200, .22);
  --line-strong: rgba(255, 240, 200, .44);
  --glow: rgba(255, 245, 210, .55);
}

html,body{
  background: radial-gradient(1200px 600px at 50% -10%, #1a1f27 0%, #0d0f12 55%) fixed;
  color: var(--ink);
  font-family: ui-serif, "Noto Serif TC", "Songti TC", "PingFang TC",
               "Microsoft JhengHei", serif;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

/* ---- 版心 ---- */
.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 1.6rem 1.1rem 3.2rem;
}

/* ---- 頁首：標題與副標 ---- */
.header{
  margin: 1.2rem 0 1.6rem;
}
.header h1{
  margin: 0;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  letter-spacing: .06em;
  color: var(--accent);
  text-shadow: 0 0 .6rem var(--glow);
}
.subtitle{
  margin-top: .6rem;
  color: var(--muted);
  font-size: .98rem;
}

/* ---- 輕柔連結（殿內共用語氣） ---- */
.lf-soft-link{
  color: rgba(255,240,200,.82);
  text-decoration: none;
  transition: filter .35s ease, color .35s ease;
}
.lf-soft-link:hover{
  color: #fff8dc;
  filter: drop-shadow(0 0 .8rem rgba(255,240,200,.35));
}

/* ---- 段落輔助 ---- */
.lead{
  margin: 1.2rem 0 1.4rem;
  color: var(--muted);
}

/* =========================================================
   卡片系（箴言卡／語燈牆項目）
   以 .aph-card 為底，內可放引言、作者、細註
   ========================================================= */
.aph-card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.04));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.2rem 1.2rem 1.15rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .35s ease, box-shadow .35s ease, transform .25s ease;
}
.aph-card:hover{
  border-color: var(--line-strong);
  box-shadow: 0 16px 36px rgba(0,0,0,.34), 0 0 24px rgba(255,245,210,.06);
  transform: translateY(-2px);
}

.aph-quote{
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  letter-spacing: .02em;
}
.aph-author{
  margin-top: .9rem;
  text-align: right;
  font-size: .92rem;
  color: var(--muted);
}

/* ---- 牆面 / 清單：行動端單欄 → 桌面雙欄 ---- */
.aph-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0 0;
}
@media (min-width: 900px){
  .aph-grid{
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1.1rem;
  }
}

/* =========================================================
   按鈕與導覽
   ========================================================= */

/* 「下一站」主按鈕（來客版出口） */
.next-btn{
  display: inline-block;
  margin-top: 1.2rem;
  padding: .55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  font-size: .95rem;
  color: var(--ink);
  opacity: .86;
  transition: all .35s ease;
}
.next-btn:hover{
  opacity: 1;
  border-color: var(--line-strong);
  color: #fff8dc;
  text-shadow: 0 0 .6rem var(--glow);
}

/* 頁尾：小提示文案 */
.note{
  opacity: .72;
  font-size: .9rem;
}

/* 低調輔助導覽（回首頁、回上一卷等） */
.nav-buttons{
  text-align: center;
  margin-top: 1.2rem;
}
.nav-buttons a{
  display: inline-block;
  text-decoration: none;
  padding: .45rem .9rem;
  margin: .12rem .2rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: rgba(255,240,200,.9);
  font-size: .95rem;
  transition: all .35s ease;
}
.nav-buttons a:hover{
  border-color: var(--line-strong);
  color: #fff8dc;
  text-shadow: 0 0 .5rem rgba(255,245,210,.45);
}

/* 指定「回靈火殿」一致光感 */
.back-hall{
  display: inline-block;
  margin-top: 1.2rem;
  padding: .45rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  font-size: .95rem;
  color: rgba(255,240,200,.88);
  opacity: .82;
  transition: all .35s ease;
}
.back-hall:hover{
  opacity: 1;
  color: #fff8dc;
  border-color: var(--line-strong);
  text-shadow: 0 0 .6rem var(--glow);
}

/* ---- 區塊分節（卷內小標、引導分隔） ---- */
.section{
  margin: 1.8rem 0 1.4rem;
  padding-top: .4rem;
  border-top: 1px dashed rgba(255,240,200,.16);
}

/* ---- 行內標籤（如「卷一」小徽記） ---- */
.badge{
  display: inline-block;
  padding: .18rem .5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .82rem;
  color: var(--muted);
}

/* =========================================================
   輔助：英文字體細緻度、圖片、細字
   ========================================================= */
.en{ color: #cbd5f5; font-size: .9rem; opacity: .85; }
small, .small{ font-size: .88rem; color: var(--muted); }

/* ---- 圖片（若某卷插圖） ---- */
img{
  max-width: 100%;
  border-radius: 10px;
  display: block;
}

/* =========================================================
   頁尾區域（雙層文案＋導覽區）
   ========================================================= */
footer{
  text-align: center;
  opacity: .85;
  margin: 2.4rem 0 1.6rem;
}
footer .layer{
  margin: .35rem 0;
}
/* -----------------------------
   語焰版光入場（Aphorisms Ignite）
   需搭配 <body class="lf-ready"> 觸發
-------------------------------- */

/* 基礎：初始狀態先關燈，待 lf-ready 再點亮 */
.aph-hero h1,
.aph-hero .subtitle,
.aph-item,
.aph-item .by,
.aph-footer,
.back.lf-soft-link,
.next-btn {
  opacity: 0;
  transform: translateY(.35rem);
  transition: none;
}

/* 點亮節奏（全域開場微光） */
@keyframes aph-ignite-fade {
  0%   { opacity: 0; filter: brightness(.8) blur(.5px); }
  100% { opacity: 1; filter: brightness(1) blur(0); }
}
@keyframes aph-ignite-rise {
  0%   { opacity: 0; transform: translateY(.5rem); }
  100% { opacity: 1; transform: translateY(0); }
}
/* 邊框微燼（卡片邊緣有一圈很淡的熱暈） */
@keyframes aph-ember {
  0%   { box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 var(--glow); }
  100% { box-shadow: 0 .3rem 1rem rgba(0,0,0,.28), 0 0 .6rem var(--glow); }
}
/* 導覽鍵一次性脈衝 */
@keyframes aph-pulse {
  0%   { box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 var(--glow); }
  50%  { box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 1.1rem var(--glow); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 .4rem var(--glow); }
}

/* 觸發：進場順序與延遲 */
body.lf-ready .aph-hero h1 {
  animation: aph-ignite-fade .6s ease-out .05s both, aph-ignite-rise .6s ease-out .05s both;
}
body.lf-ready .aph-hero .subtitle {
  animation: aph-ignite-fade .6s ease-out .12s both, aph-ignite-rise .6s ease-out .12s both;
  opacity: .92; /* 字副題微柔 */
}

/* 卡片逐一點亮（瀑布式延遲） */
body.lf-ready .aph-item {
  background: rgba(255,255,255,.02); /* 與原卡片底一致即可；若已有就不會覆蓋 */
  animation: aph-ignite-rise .55s cubic-bezier(.2,.6,.2,1) both,
             aph-ember .6s ease-out .2s both;
}
body.lf-ready .aph-item:nth-child(1)  { animation-delay: .10s, .25s; }
body.lf-ready .aph-item:nth-child(2)  { animation-delay: .18s, .33s; }
body.lf-ready .aph-item:nth-child(3)  { animation-delay: .26s, .41s; }
body.lf-ready .aph-item:nth-child(4)  { animation-delay: .34s, .49s; }
body.lf-ready .aph-item:nth-child(5)  { animation-delay: .42s, .57s; }
/* 如有更多，延續每張 +.08s 即可 */

/* 引文署名稍後浮現，像火苗回息 */
body.lf-ready .aph-item .by {
  animation: aph-ignite-fade .45s ease-out both;
  animation-delay: .18s; /* 以卡片自身動畫為基準，自然銜接 */
}

/* 頁尾與導覽鍵在最後點一下光 */
body.lf-ready .aph-footer {
  animation: aph-ignite-rise .5s ease-out .62s both;
}
body.lf-ready .back.lf-soft-link,
body.lf-ready .next-btn {
  animation: aph-ignite-fade .5s ease-out .64s both, aph-pulse .9s ease-out .78s 1 both;
}

/* 可選：滑過卡片更有「語焰」微抬與淡光，維持你既有 hover 即可 */
.aph-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.32), 0 0 .8rem var(--glow);
}

/* 無障礙：使用者偏好減少動態時，關閉入場動畫 */
@media (prefers-reduced-motion: reduce) {
  .aph-hero h1,
  .aph-hero .subtitle,
  .aph-item,
  .aph-item .by,
  .aph-footer,
  .back.lf-soft-link,
  .next-btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none;
  }
}