/* ════════════════════════════════════════════════════════════
   home-extra.css — 主頁動畫疊加層
   全 scope `.home-next`，疊在 home-v2 / home-v3 / look-feed-embed 之上。
   主頁 `/`（index.html）不引用本檔，零影響。
   動畫中樞：public/js/home-motion.js（GSAP）。
   規則：禁裸 hex（走 token / color-mix / named color）；圓角走 --r-*。
   ════════════════════════════════════════════════════════════ */

/* ── 驗證頁區域變數（scope 到頁面 class，不污染 :root）── */
.home {
  /* §5 換頁鈕 ⇄ send 對稱：到橘線距離由單一 token 控制，避免兩處硬寫 drift */
  --edge-gap: var(--baseline);   /* 8px */
}

/* ════════════════════════════════════════════════════════════
   §5 LOG⇄LOOK 切換：edge-nav 對齊（沿用 home-v2 容器風格，只統一 token 源）
   - edge-nav 到橘線距離 = send 到橘線距離 = var(--edge-gap)
   - 右緣對齊維持 home-v2 的 right: var(--gutter)
   - 斷點沿用既有 max-width:1023px（與 home-v2 edge-nav 一致）
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .home .edge-nav    { bottom: var(--edge-gap); }
  .home .input-panel { padding-top: var(--edge-gap); }
}

/* 過場容器層 hint：GSAP 對 .swipe-page 做交叉顯影時用 GPU 合成，避免閃爍。
   位移由 swipe.js / visualViewport 獨佔，GSAP 只動 opacity/filter（見 motion.js）。 */
.home .swipe-page { will-change: opacity, filter; }

/* ════════════════════════════════════════════════════════════
   §3.3 內容顯影（僅底部）：feed 底部 120px 漸層淡出
   - LOOK feed 與 LOG 熱門列皆顯示；不做頂部遮罩（會永久遮住剛進場卡片頂部）
   - 錨定 .swipe-wrap（relative），蓋在 feed 與輸入框之間
   ════════════════════════════════════════════════════════════ */
.home[data-mode="look"] .swipe-wrap::after,
.home[data-mode="log"] .swipe-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(to top, var(--paper) 0%, transparent 100%);
  pointer-events: none;
  z-index: 10;   /* 在卡片之上、edge-nav(z40) 之下 */
}
/* 鍵盤開啟時 feed 收合，底部遮罩讓位（避免蓋住輸入區上緣）*/
.home.keyboard-open .swipe-wrap::after { display: none; }

/* ════════════════════════════════════════════════════════════
   §8 prefers-reduced-motion：名牌收起、分隔線靜態、保留底部遮罩
   （motion.js 也會 gate；此處作 CSS 兜底，雙保險）
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .home .swipe-page { will-change: auto; }
}