/*
 * Landing **首屏**的樣式（暖光背景、雙欄排版、貓主視覺、書籤磚）。只有 `index.html` 載得到。
 * 殼層（色票、字階、頁首、按鈕、頁尾）在 `style.css`；其餘區塊在 `landing.css`。
 *
 * 這一份原本是三花貓改版的方向包 —— 整組 `--cat-*` 曾經定義在這裡、只有首屏換色。方向拍板
 * 之後色票已搬進 `style.css` 的 `:root`（全站共用的單一來源），首屏與其餘區塊的過渡處理
 * （下緣圓角、頁首單獨換色、按鈕與 badge 的區域覆寫）也一併退場：那些是「只改到一半」才需要
 * 交代的邊界，現在整站同一套色，沒有邊界要交代。
 *
 * 顏色一律引用 `style.css` 的 token：文字與面走語意名（`--text` / `--bg`），
 * 純圖形（暖光、點陣、書籤磚）走品牌色票（`--cat-orange` / `--cat-blush` / `--cat-charcoal`）。
 */

/* ---------- hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  padding: 84px 0 92px;
  overflow: hidden;
}

/*
 * 暖光層：右上橘、左上粉（都是 icon 上的色），底下墊一道由暖白**淡出到透明**的漸層。
 * 淡出而不是切齊，是為了讓首屏的暖白自己溶進頁面底色 —— 兩塊奶油之間畫線或收圓角，
 * 都會把「這裡是接縫」講出來，而整站同色之後根本沒有接縫要講。
 *
 * ⚠️ 收尾那一站寫成 `rgba(255, 253, 248, 0)` 而不是 `transparent`，是**刻意的**：
 * `transparent` 的實值是透明的**黑**，在部分引擎上會沿路插值出一條灰帶。要淡出的那顆色
 * 必須自己寫一次、只把 alpha 收到 0。看到這行想順手簡化成 `transparent` 的話，先看這句。
 */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(46% 42% at 76% 14%, rgba(232, 162, 92, 0.28), transparent 70%),
    radial-gradient(34% 30% at 10% 2%, rgba(245, 184, 196, 0.26), transparent 72%),
    linear-gradient(180deg, var(--cat-cream-2), var(--cat-cream) 38%, rgba(255, 253, 248, 0) 96%);
  pointer-events: none;
}

/* 點陣只鋪在主視覺那一側：mask 讓它在邊緣散掉，不變成整片背景紋理 */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(58, 54, 50, 0.11) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(30% 46% at 78% 30%, #000, transparent 72%);
  mask-image: radial-gradient(30% 46% at 78% 30%, #000, transparent 72%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr);
  align-items: center;
  gap: 48px;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 15px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 2px rgba(58, 54, 50, 0.05);
}

/*
 * 首屏大標是全站唯一的手寫體（`style.css` 的 `--font-hero` 那一格寫了為什麼只有這一句換）。
 * 五個值全部對 Chelsea Market 重新量過，沒有一個是從 Bricolage 那組沿用下來的 ——
 * 實測：**同一句話在這支字型上寬 22.1%**，而它的「0」只寬 2.3%。
 *
 * - `font-weight: 400` —— 共用層的 `h1,h2,h3` 訂 700，而這支字型只有 400 一個字重。
 *   不按回去瀏覽器會合成偽粗體、把手寫體的細筆畫塗糊。
 * - `letter-spacing: 0` —— Bricolage 那組是 -0.025em（無襯線大標收緊才不鬆散）。
 *   手寫體的字形自己帶節奏，再收緊會讓筆畫互相碰到。
 * - `line-height: 1.18` —— 這支的上下伸部比 Bricolage 長，沿用 1.1 會讓上一行的 y／p
 *   撞到下一行的大寫字母。
 * - 字級 60 → 54（手機 38 → 34）—— 判準是**維持這塊字的高度**，不是「看起來差不多」：
 *   首屏是 `align-items: center` 的兩欄，大標的塊高決定它跟貓的構圖關係。
 *   舊組合 60×1.1×4 行 ＝ 264px，這一組 54×1.18×4 行 ＝ 255px，同一個量級。
 * - `max-width` 從 `13ch` 換成 `em`，**換單位是刻意的**：`ch` 綁的是那支字型的「0」有多寬，
 *   而這支的「0」跟 Bricolage 幾乎一樣寬、整句卻寬了兩成 —— 也就是說 `ch` 在這支字型上
 *   低估行寬約兩成，「13 個字」這個直覺對它不成立。改用 `em` 之後數字是量出來的：
 *   雙欄時 4 行的區間是 7.6em–10.6em（低於 7.6 折成 5 行、10.8 以上收成 3 行），
 *   取中間的 9em，兩邊各留 1.5em 餘裕。`.lead` 的 `46ch` 不動 —— 那是 Inter，`ch` 對它是準的。
 */
.hero h1 {
  font-family: var(--font-hero);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.18;
  font-size: clamp(34px, 4.2vw, 54px);
  margin: 26px 0 0;
  max-width: 9em;
}

.hero .lead {
  margin-top: 20px;
  max-width: 46ch;
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--text-2);
}

.cta-note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-3);
}

/* ---------- hero 主視覺 ---------- */

.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 380px);
  aspect-ratio: 1;
  margin-inline: auto;
}

/* 貓底下的暖白圓盤：把貓從點陣裡托出來，順便給它一圈自己的陰影 */
.hero-art::before {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffffff, rgba(253, 245, 232, 0.92) 56%, rgba(253, 245, 232, 0) 74%);
  box-shadow: 0 26px 56px -30px rgba(58, 54, 50, 0.45);
}

.hero-cat {
  position: relative;
  width: 70%;
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(58, 54, 50, 0.22));
}

/*
 * 三張小書籤磚：頂緣的凹口與 icon 的反轉書籤同形（雙耳從同一個缺口長出來），
 * 呼應側欄的釘選格。`clip-path` 切上緣、`border-radius` 收下緣 —— 兩者是交集，不互斥。
 */
.tile {
  position: absolute;
  width: 46px;
  height: 58px;
  border-radius: 0 0 10px 10px;
  clip-path: polygon(0 0, 50% 26%, 100% 0, 100% 100%, 0 100%);
}

.tile-a {
  top: 6%;
  left: 2%;
  background: var(--cat-charcoal);
  transform: rotate(-9deg);
}

.tile-b {
  right: 0;
  bottom: 12%;
  background: var(--cat-orange);
  transform: rotate(11deg);
}

.tile-c {
  right: 12%;
  top: 0;
  width: 34px;
  height: 43px;
  background: var(--cat-blush);
  transform: rotate(6deg);
}

.hero-shot {
  margin-top: 64px;
}

/* ---------- 響應式 ---------- */

@media (max-width: 900px) {
  .hero {
    padding: 56px 0 68px;
  }

  /* 單欄之後主視覺落到 CTA 下方：標題與按鈕先進畫面，貓接在後面、尺寸收一號 */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /*
   * 單欄之後大標獨佔整個寬度，這裡要的是**三行**（雙欄那格是四行）—— 三行是改版前的節奏，
   * 四行在 900 寬只會排成一條又細又高的字柱。同樣量出來：3 行的區間是 10.8em–13em
   * （10.6 以下折回 4 行、14em 以上併成 2 行），取 12em。390 寬時視窗自己就把它夾到 342px，
   * 這個值碰不到，那邊照舊是四行。
   */
  .hero h1 {
    max-width: 12em;
  }

  .hero-art {
    width: min(100%, 260px);
  }

  .hero-shot {
    margin-top: 44px;
  }

  /*
   * 點陣的 mask 釘在右上角、對的是雙欄時貓站的位置。單欄之後貓落到 CTA 下方，
   * 那塊 mask 就改蓋在標題與內文上 —— 字背後浮一層點是雜訊，不是質感。整層收掉。
   */
  .hero::after {
    display: none;
  }
}

@media (max-width: 620px) {
  /* 35 個字的等寬大寫在 390 寬會折成兩行、把膠囊撐成一塊方磚：縮一號字回到單行 */
  .kicker {
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 6px 13px;
  }
}