/* ==========================================================================
   landing.css — 首頁介紹頁（scrollytelling：全屏照片 ＋ 疊字 ＋ 捲動敘事）
   前綴一律 .st-，不會撞到 app.css / pixel.css 的任何選擇器。

   四根支柱（缺一個就顯得廉價）：
     1. 視差——照片慢速位移，字正常速度，產生景深。
     2. 方向性 scrim——三張照片亮部位置不同，逐張配漸層，絕不統一壓黑。
     3. 進場——序號→標題→內文錯開 60ms 淡入上浮，只播一次。
     4. 降級——prefers-reduced-motion 下全關。

   與樣板的唯一刻意分歧：最後一屏不回淺色底，改用 App 的深藍＋琥珀。
   樣板的淺色底是為淺色 App 收束用的；本站 App 是深色駕駛艙，
   落在淺色會在點進 App 的瞬間出現色調斷崖。
   ========================================================================== */

:root {
  --st-ink: #050a12;                    /* scrim 用的深色，帶一點藍，配合機艙夜色 */
  --st-accent: var(--amber, #ffb454);   /* 沿用 App 的 CTA 琥珀 */
}

/* 最小 reset：本頁只載 tokens.css（顏色／字體變數）＋本檔，沒有 app.css，
   所以 box-sizing 與 body 邊界要自己補。tokens.css 已給 body 底色與字體。 */
* { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; }

.st-root {
  font-family: var(--font-cjk);
}

/* ---- 全屏照片段落 ---- */

.st-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;      /* 字沉在下半部，是這個版式的預設語法 */
  overflow: hidden;           /* 關住視差位移的溢出 */
  padding: 0 20px 72px;
  color: #fff;
}

.st-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* scale 是給視差位移留的裁切餘裕，否則位移時會露出照片邊緣。JS 會覆寫 transform。 */
  transform: scale(1.12);
  will-change: transform;
}

.st-hero__scrim {
  position: absolute;
  inset: 0;
}

/* === scrim：逐張照片配，這裡是質感的分水嶺 === */

/* 01｜夜航進場：本來就暗，但下緣整排儀表在發光、頂部 overhead panel 也亮。
   底部要厚到吃得住那排儀表，頂部另壓一層托住字標。 */
.st-hero--1 .st-hero__scrim {
  background:
    radial-gradient(90% 60% at 20% 100%, rgba(5, 10, 18, 0.6) 0%, rgba(5, 10, 18, 0) 72%),
    linear-gradient(to top, rgba(5, 10, 18, 0.92) 0%, rgba(5, 10, 18, 0.66) 40%, rgba(5, 10, 18, 0.2) 62%, rgba(5, 10, 18, 0) 78%),
    linear-gradient(to bottom, rgba(5, 10, 18, 0.6) 0%, rgba(5, 10, 18, 0) 30%);
}

/* 02｜推力桿特寫：最亮的是正中央下方的推力桿與左右兩排按鈕燈，剛好落在字上。
   除了底部漸層，再從正下方補一顆 radial 把推力桿壓下去。 */
.st-hero--2 .st-hero__scrim {
  background:
    radial-gradient(80% 55% at 50% 100%, rgba(5, 10, 18, 0.72) 0%, rgba(5, 10, 18, 0) 70%),
    linear-gradient(to top, rgba(5, 10, 18, 0.88) 0%, rgba(5, 10, 18, 0.5) 40%, rgba(5, 10, 18, 0) 70%);
}

/* 03｜日出駕駛艙：三張裡最難的一張——整片下半的儀表板與遮陽板都被朝陽打亮，
   亮部不是一個點而是一整片，正好鋪在字底下。故底部漸層要濃、而且要拖得夠高
   （到 78% 才收乾淨），否則白字會浮在橘色面板上顯髒。上緣的天空沒有字，不壓。 */
.st-hero--3 .st-hero__scrim {
  background: linear-gradient(
    to top,
    rgba(5, 10, 18, 0.94) 0%,
    rgba(5, 10, 18, 0.9) 34%,
    rgba(5, 10, 18, 0.78) 56%,
    rgba(5, 10, 18, 0.42) 72%,
    rgba(5, 10, 18, 0.08) 86%,
    rgba(5, 10, 18, 0) 95%
  );
}

/* 04｜同步機房：整體偏暗，機架面板本身已經夠深，底部只要基本的由下往上漸層托字。
   真正的難點在右側——一整條從上到下都在發光的藍色走道門口，貫穿整個畫面高度，
   不是集中在一點，所以另補一顆貼右緣、縱向拉滿的 radial 把它單獨壓下去。 */
.st-hero--4 .st-hero__scrim {
  background:
    radial-gradient(50% 95% at 94% 50%, rgba(5, 10, 18, 0.68) 0%, rgba(5, 10, 18, 0.32) 45%, rgba(5, 10, 18, 0) 72%),
    linear-gradient(to top, rgba(5, 10, 18, 0.88) 0%, rgba(5, 10, 18, 0.5) 38%, rgba(5, 10, 18, 0.12) 60%, rgba(5, 10, 18, 0) 74%);
}

/* 05｜程式碼特寫：跟前面幾張都不同——這張沒有單一亮部，整面都是零星發光的字元，
   從畫面中段一路散布到底部，字底下踩不到一塊乾淨的深色。所以由下往上的漸層要
   拉得比 01/03 更高、更早進入深值，才壓得住這些散落的亮字；只有左上角那攤
   柔焦暖色散景本來就沒有清晰字元、也不會疊到文字，可以留淺。 */
.st-hero--5 .st-hero__scrim {
  background: linear-gradient(
    to top,
    rgba(5, 10, 18, 0.95) 0%,
    rgba(5, 10, 18, 0.88) 45%,
    rgba(5, 10, 18, 0.62) 65%,
    rgba(5, 10, 18, 0.3) 82%,
    rgba(5, 10, 18, 0.1) 92%,
    rgba(5, 10, 18, 0) 100%
  );
}

/* 06｜霧夜落地：上半的霧空本來就深，亮部全在下半——左下整片白色進場燈、
   中下兩排紅色終端燈一路延伸到畫面右緣。底部漸層要厚實壓住整片燈海，
   另補一顆貼左下的 radial 單獨壓最亮的白燈群，字才站得穩。 */
.st-hero--6 .st-hero__scrim {
  background:
    radial-gradient(70% 55% at 18% 100%, rgba(5, 10, 18, 0.7) 0%, rgba(5, 10, 18, 0) 68%),
    linear-gradient(to top, rgba(5, 10, 18, 0.92) 0%, rgba(5, 10, 18, 0.7) 36%, rgba(5, 10, 18, 0.28) 58%, rgba(5, 10, 18, 0) 76%);
}

.st-hero__text,
.st-wordmark,
.st-hint {
  position: relative;
  z-index: 2;
}

.st-hero__text {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

/* 序號：細字 ＋ 大字距 ＋ 前置短橫線；等寬數字避免 0/1 抖動 */
.st-hero__num {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--font-data);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.28em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.62);
}

.st-hero__num::before {
  content: '';
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}

.st-hero__title {
  margin: 0;
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  /* 靠陰影撐對比，不要用描邊——描邊在照片上一定顯髒 */
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45);
}

.st-hero__body {
  margin: 20px 0 0;
  max-width: 19em;            /* 一行約 19 個中文字，再寬就不好讀 */
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}

/* ---- 字標：只放在第一屏 ---- */
/* left/right 0 ＋ 內縮到與 .st-hero__text 同一條 480px 欄，否則寬螢幕上
   字標會貼最左邊、內文卻置中，兩者對不齊。 */
.st-wordmark {
  position: absolute;
  top: calc(32px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  width: 100%;
  max-width: calc(480px + 40px);
  margin: 0 auto;
  padding: 0 20px;
}

.st-wordmark__name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(26px, 3.2vw, 38px);   /* 桌面上要撐得住滿版照片，故跟著視窗放大 */
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5);
}

.st-wordmark__sub {
  display: inline-block;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);   /* 短橫線分隔，是版式而不是兩行字疊著 */
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 500;
  letter-spacing: 0.34em;
  /* letter-spacing 會在最後一個字後面也加一格，右側看起來像沒對齊——負 margin 補回來 */
  margin-right: -0.34em;
  color: rgba(255, 255, 255, 0.68);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
}

/* ---- 捲動提示：一條會呼吸的細線，不是彈跳箭頭 ---- */

.st-hint {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 44px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  cursor: pointer;
}

.st-hint__line {
  width: 1px;
  height: 20px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
  transform-origin: bottom;
  animation: st-breathe 2.4s ease-in-out infinite;
}

@keyframes st-breathe {
  0%, 100% { transform: scaleY(0.4); opacity: 0.35; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ---- 進場：序號 → 標題 → 內文，錯開 60ms ---- */
/* 一律掛在 html.js 底下（那個 class 由 index.html 的 inline script 加）。
   沒有 JS 就沒有 IntersectionObserver，永遠不會補上 .is-revealed——
   若無條件把字設成 opacity:0，關掉 JS 的人與爬蟲會看到一片空白的照片。 */

.js .st-root:not(.is-static) [data-st-reveal] > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .st-root:not(.is-static) [data-st-reveal].is-revealed > * {
  opacity: 1;
  transform: none;
}

.js .st-root:not(.is-static) [data-st-reveal] > *:nth-child(2) { transition-delay: 60ms; }
.js .st-root:not(.is-static) [data-st-reveal] > *:nth-child(3) { transition-delay: 120ms; }
.js .st-root:not(.is-static) [data-st-reveal] > *:nth-child(4) { transition-delay: 180ms; }

/* ==========================================================================
   最後一屏：入口區
   刻意不做成卡片＋箭頭——那是通用 App 語彙，會跟前面的編排感斷開。
   改成「目錄」：細線分隔 ＋ 序號 ＋ 右側小標籤。
   ========================================================================== */

.st-outro {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 64px 20px;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  color: var(--text);
}

.st-outro__inner {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.st-outro__kicker {
  margin: 0;
  font-family: var(--font-data);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.28em;
  margin-right: -0.28em;
  color: var(--st-accent);
}

.st-outro__title {
  margin: 12px 0 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.st-list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);   /* 第一條線落在 list 上緣 */
}

.st-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  /* baseline 而非 start：三欄字級不同，盒子頂端對齊會讓序號與標籤往上飄 */
  align-items: baseline;
  column-gap: 16px;
  position: relative;
  width: 100%;
  min-height: 76px;
  padding: 20px 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* 這條線取代箭頭：hover / focus 時由左往右畫滿。
   左右撐滿後用 scaleX 縮放，不要動 width——縮放只跑合成層，不會每幀重排。 */
.st-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--st-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.st-item:hover::after,
.st-item:focus-visible::after {
  transform: scaleX(1);
}

.st-item:hover .st-item__num,
.st-item:hover .st-item__tag,
.st-item:focus-visible .st-item__num,
.st-item:focus-visible .st-item__tag {
  color: var(--st-accent);
}

/* 手機沒有 hover，按壓時要有回饋 */
.st-item:active {
  background: color-mix(in srgb, var(--st-accent) 8%, transparent);
}

.st-item__num {
  font-family: var(--font-data);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.st-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.st-item__title {
  font-size: 17px;
  font-weight: 700;
}

.st-item__sub {
  font-size: 14px;
  color: var(--text-dim);
}

.st-item__tag {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--text-muted);
  margin-right: -0.24em;   /* 補回 letter-spacing 在尾字後多出的那一格 */
  white-space: nowrap;
}

/* [hidden] 的入口要真的收起來——.st-item 設了 display:grid，會蓋掉 UA 的 [hidden] 樣式。
   置頂的「繼續學習」預設 hidden，landing.js 偵測到本機有進度才揭開（見 landing.js）。 */
.st-item[hidden] { display: none; }

/* 回訪者置頂的「繼續學習」捷徑：序號、標題、標籤都上重點色，和下面 01/02/03 拉開層次 */
.st-item--resume .st-item__num,
.st-item--resume .st-item__title,
.st-item--resume .st-item__tag {
  color: var(--st-accent);
}

/* 失事檔案：要精通對應觀念卡才解鎖，對新訪客先降成小字入口（仍可點去看鎖著的清單） */
.st-locked {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}
.st-locked__link {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.st-locked__link:hover,
.st-locked__link:focus-visible {
  color: var(--st-accent);
  text-decoration-color: var(--st-accent);
}

/* 出處／免責在上，聯絡信箱在下。原本是左右並排，但信箱字串比「聯絡版主」長，
   480px 欄放不下兩欄，會在不同寬度下時而並排時而折行——乾脆固定堆疊。 */
.st-outro__foot {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.st-credit {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.st-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.st-credit a:hover {
  color: var(--st-accent);
}

/* ---- 降級 ---- */

@media (prefers-reduced-motion: reduce) {
  .st-hero__img {
    transform: scale(1.02) !important;   /* 視差關閉，只留極輕微的裁切餘裕 */
  }

  .st-hint__line {
    animation: none !important;
    opacity: 0.7;
  }

  .st-item::after {
    transition: none;
  }
}