/* ==========================================================
   首頁版面
   主打圖鋪滿整個畫面寬度，側欄浮在它上面；下面的內容都對齊同一條左邊線。
   標有 view-transition-name 的東西，在畫面變化時會各自「移過去、變過去」（見 glass.css 最下面）。
   ========================================================== */

.main { min-width: 0; padding-bottom: 96px; }

/* ---------- 主打區 ---------- */
.hero { position: relative; height: clamp(520px, 76vh, 860px); margin-bottom: -64px; overflow: hidden; background: #111113; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.hero__img.is-on { opacity: 1; }
/* 讓圖的下緣融進背景、左側壓暗讓字清楚；不用任何方框 */
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, var(--bg) 0%, rgba(11, 11, 12, .78) 14%, rgba(11, 11, 12, 0) 54%),
    linear-gradient(90deg, rgba(11, 11, 12, .72) 0%, rgba(11, 11, 12, .42) 32%, rgba(11, 11, 12, 0) 68%); }
/* 文字壓在圖上：加一層很淡的字影，換成比較亮的圖片時字也看得清楚 */
.hero__text { position: absolute; left: var(--content-left); right: var(--pad); bottom: 120px; z-index: 2; max-width: 560px; text-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 24px rgba(0, 0, 0, .35); view-transition-name: hero-text; }
.hero__kicker { font-size: var(--t-small); color: var(--ink-on-image); }
.hero__title { font-size: var(--t-hero); line-height: 1.2; margin: 8px 0 12px; text-wrap: balance; }
.hero__meta { font-size: var(--t-small); color: var(--ink-on-image); font-variant-numeric: tabular-nums; }
.hero__text .btn { margin-top: 24px; text-shadow: none; }
/* 右下角的短線：和左邊的按鈕在同一條水平線上（按鈕中心離底 142px，短線區高 32px） */
.hero__dots { position: absolute; right: var(--pad); bottom: 126px; z-index: 2; display: flex; gap: 8px; }
.hero__dot { display: grid; align-items: center; width: 32px; height: 32px; transition: var(--t-ui); }
.hero__dot::before { content: ""; height: 2px; background: var(--ink-3); transition: background-color .15s ease; }
.hero__dot:hover::before { background: var(--ink-2); }
.hero__dot:active { scale: .92; }
/* 「目前是這一張」的白線：只有一條，換張時滑到新位置（每格 32px＋間距 8px） */
.hero__dots::after { content: ""; position: absolute; left: 0; top: 50%; width: 32px; height: 2px; margin-top: -1px; background: #fff; translate: calc(var(--i, 0) * 40px) 0; transition: translate var(--dur-3) var(--ease); pointer-events: none; }
/* 換主打影片時：舊的文字往上淡出，新的文字從下面淡入 */
html.vt-hero::view-transition-old(hero-text) { animation: var(--dur-2) ease both hero-out; }
html.vt-hero::view-transition-new(hero-text) { animation: var(--dur-3) var(--ease) 60ms both hero-in; }
@keyframes hero-out { to { opacity: 0; translate: 0 -8px; } }
@keyframes hero-in { from { opacity: 0; translate: 0 12px; } }
/* 手機沒有側欄，站名放在主打圖左上角 */
.hero__brand { position: absolute; left: var(--pad); top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 2; font-size: var(--t-brand); font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 24px rgba(0, 0, 0, .35); }

/* ---------- 區塊 ---------- */
.sec { position: relative; z-index: 1; margin-top: 72px; padding: 0 var(--pad) 0 var(--content-left); }
.sec__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 24px; }
.sec__head h2 { font-size: var(--t-title); line-height: 1.3; }
.sec__note { font-size: var(--t-small); color: var(--ink-2); }
/* 標題和右邊的箭頭各自標記（不是標記整條）：版面變寬變窄時它們是「移過去」，字不會被拉大 */
#resume .sec__head h2 { view-transition-name: resume-title; }
#shorts .sec__head h2 { view-transition-name: shorts-title; }
#shelf-nav { view-transition-name: shelf-nav; }
/* 標題右邊的「往前／往後」：內容比畫面寬、而且是用滑鼠操作時才出現 */
.sec__nav { margin-left: auto; align-self: center; display: flex; gap: 4px; }
.icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--ink-2); transition: var(--t-ui); }
.icon-btn:hover { color: var(--ink); }
.icon-btn:active { scale: .9; }
.icon-btn:disabled { color: var(--ink-4); cursor: default; scale: 1; }
@media (hover: none) { .sec__nav { display: none; } }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 40px 24px; }
.grid:empty { display: none; }

/* ---------- 找片列：搜尋＋排序＋標籤，平常只佔一行 ----------
   標籤到幾百個也不會撐開頁面，往下捲動瀏覽影片時版面完全不受影響：
     - 平常只有這一行：搜尋框，加上「排序」和「標籤」兩顆按鈕；已選的標籤變成框裡的小方塊
     - 按「標籤」或開始打字，標籤面板才浮出來。它是浮在影片上面的，不會把影片往下推
     - 面板有最大高度，裡面自己捲動；打字會即時篩出名稱相符的標籤
   排法：這一行用和下方影片「同一組欄位」。標題在第一欄；找片列從第二欄的左緣到最右邊。
   這樣左右兩邊都有東西、每條邊都對齊下面的影片，重心才會穩。

   往下捲時，這一行會固定在畫面上方（position: sticky），位置和「點側欄的影片」落點相同（距離上緣 40px），
   所以從「剛到這一區」到「繼續往下捲」，它完全不會動。它只是浮在影片上面，不會把影片往下推。 */
.find { position: sticky; top: 40px; z-index: 4; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 24px; align-items: start; margin-bottom: 24px; }
/* 固定住的時候，後面墊一層和頁面同色的底：從畫面最上緣到這一行下面一點點，再往下 32px 漸漸變透明。
   影片捲到它後面會淡出，不會和標題、搜尋框疊在一起；沒有外框、沒有分隔線，看起來只是「上面這一段留著」。
   還沒固定時它是透明的，也不擋滑鼠 */
.find__scrim { position: absolute; z-index: -1; inset: -40px 0 -8px; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) ease; }
.find__scrim::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 32px; background: linear-gradient(to bottom, var(--bg), transparent); pointer-events: none; }
.find.is-stuck .find__scrim { opacity: 1; pointer-events: auto; view-transition-name: find-scrim; } /* 固定住時擋住滑鼠：不然會點到藏在後面、看不見的影片 */
/* 形變途中這層底色自成一層，蓋在正在移動的影片上面（否則影片會飛到標題列上面）。
   前後都在時只用變化後那一張（不做新舊交疊，才是完全不透明）；只出現或只消失時單純淡入淡出 */
::view-transition-old(find-scrim) { display: none; }
::view-transition-new(find-scrim) { height: 100%; animation: none; }
::view-transition-new(find-scrim):only-child { animation: var(--dur-2) ease both fade; }
::view-transition-old(find-scrim):only-child { display: block; height: 100%; animation: var(--dur-2) ease both reverse fade; }
.find__head { display: flex; align-items: baseline; gap: 12px; min-width: 0; padding-top: 5px; view-transition-name: find-head; transition: margin-left var(--dur-3) var(--ease); }
/* 側欄收起來時，畫面左上角只剩收合按鈕。這一行固定在上方時，標題往右讓出按鈕的位置
   （和電腦視窗把側邊欄收起來之後，標題會排在按鈕右邊是同一個做法） */
@media (min-width: 901px) { html.side-off .find.is-stuck .find__head { margin-left: 44px; } }
.find__head h2 { font-size: var(--t-title); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find__head .sec__note, .find__head .text-btn { white-space: nowrap; }
.find__head .text-btn { padding: 8px 0; margin: -8px 0; } /* 字不變大，但可以點的範圍上下各多 8px */
.find__bar { position: relative; z-index: 3; grid-column: 2 / -1; display: flex; align-items: flex-start; gap: 4px; min-height: 40px; padding: 4px 4px 4px 12px; border-radius: var(--r-ctl); background: var(--fill); cursor: text; transition: background-color .15s ease; view-transition-name: find-bar; }
.find__bar:focus-within, .find.is-open .find__bar { background: var(--fill-2); }
/* 找片列的左半邊：放大鏡、已選的標籤、輸入框。標籤多到一行放不下時，在這一塊裡面換行；
   右邊的「排序」「標籤」兩顆按鈕固定留在右上角，不會被擠到下一行 */
.find__field { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 32px; }
.find__field > .ic { width: 16px; height: 16px; margin-right: 4px; color: var(--ink-2); }
.find__picked { display: contents; }
.find__bar input { flex: 1; min-width: 140px; height: 32px; background: none; border: 0; outline: 0; }
.find__bar input::placeholder { color: var(--ink-3); }
.find__toggle { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px 0 12px; border-radius: var(--r-sm); color: var(--ink-2); white-space: nowrap; transition: var(--t-ui); }
.find__toggle:hover, .find__toggle[aria-expanded="true"] { color: var(--ink); }
.find__toggle:active { scale: .96; }
.find__toggle .ic { width: 16px; height: 16px; transition: rotate var(--dur-2) var(--ease); }
.find__toggle[aria-expanded="true"] .ic--chev { rotate: 180deg; }
.find__toggle .ic--sort { display: none; } /* 手機上排序只顯示圖示 */
/* 已選的標籤：搜尋框裡的小方塊，點一下移除 */
.token { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: var(--r-sm); background: var(--fill-2); font-size: var(--t-small); color: var(--ink); transition: var(--t-ui); }
.token:active { scale: .95; }
.token .ic { width: 12px; height: 12px; color: var(--ink-2); transition: color .15s ease; }
.token:hover .ic { color: var(--ink); }

/* 找片列右邊的兩顆按鈕自成一組：找片列變寬或變窄時，它們是「移過去」，不會跟著被拉伸 */
.find__tools { display: flex; align-items: center; gap: 4px; view-transition-name: find-tools; }
/* 找片列裡的東西變動時，拆成幾塊各自處理，字才不會被拉大或壓扁：
     - 找片列的底色：跟著外框一起伸縮（純色，伸縮看不出來）
     - 放大鏡、輸入框、右邊兩顆按鈕：各自「移過去」，大小不變
     - 標題和輸入框的字固定靠左上，右邊按鈕固定靠右上 */
.find__field > .ic { view-transition-name: find-icon; }
.find__bar input { view-transition-name: find-input; }
::view-transition-group(find-bar) { overflow: hidden; border-radius: var(--r-ctl); }
::view-transition-old(find-bar), ::view-transition-new(find-bar) { height: 100%; }
::view-transition-old(find-input), ::view-transition-new(find-input),
::view-transition-old(find-field), ::view-transition-new(find-field),
::view-transition-old(find-head), ::view-transition-new(find-head) { height: 100%; object-fit: none; object-position: left top; }
/* 側欄收合或展開時，整條找片列自己在移動。這時放大鏡、已選標籤、輸入框必須「黏」在找片列上一起走：
   如果各自移動，瀏覽器會用兩條不同的繪圖管線去推它們，途中會差一兩格、看起來像脫節。
   所以這種時候改成把左半邊整塊標記成一個東西 */
html.vt-shift .find__field { view-transition-name: find-field; }
html.vt-shift :is(.find__field > .ic, .find__bar input, .token) { view-transition-name: none !important; }
::view-transition-old(find-tools), ::view-transition-new(find-tools) { height: 100%; object-fit: none; object-position: right top; }
/* 這幾塊的「字」會換（標題換成系列名、排序換名稱、輸入的字被清掉）：新舊兩組字交疊的時間縮短一半，
   換字才乾脆，不會糊在一起；位置的移動仍然照原本的速度 */
::view-transition-old(find-head), ::view-transition-new(find-head),
::view-transition-old(find-tools), ::view-transition-new(find-tools),
::view-transition-old(find-input), ::view-transition-new(find-input) { animation-duration: var(--dur-2); }

/* 排序選單：從「排序」按鈕往下長出來 */
.find__sort { position: relative; }
.menu--down { top: calc(100% + 8px); bottom: auto; left: auto; right: -4px; min-width: 232px; transform-origin: calc(100% - 28px) 0; cursor: default; }
.menu__item .ic { width: 16px; height: 16px; opacity: 0; transition: opacity .15s ease; }
.menu__item.is-on { color: var(--ink); }
.menu__item.is-on .ic { opacity: 1; }
.menu__item small { margin-left: auto; padding-left: 16px; font-size: var(--t-small); color: var(--ink-3); }

/* 標籤面板：浮在內容上面的半透明面板，從找片列下緣滑出來 */
.find__panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 20px 16px; background: rgba(24, 24, 26, .88);
  display: none; opacity: 0; translate: 0 -8px;
  transition: opacity var(--dur-2) ease, translate var(--dur-3) var(--ease), display var(--dur-2) allow-discrete; }
.find.is-open .find__panel { display: block; opacity: 1; translate: 0 0; }
@starting-style { .find.is-open .find__panel { opacity: 0; translate: 0 -8px; } }
.find__none { padding: 6px 0; font-size: var(--t-small); color: var(--ink-2); }
#videos.is-finding { z-index: 5; } /* 面板或選單打開時，讓它蓋得過下面的區塊 */

/* 面板裡的標籤：依屬性分組，一組一排；標籤只是文字，選中的才有底色 */
.tags { display: grid; gap: 4px; }
.tags__row { display: grid; grid-template-columns: 64px 1fr; }
.tags__label { font-size: var(--t-small); line-height: 32px; color: var(--ink-3); }
.tags__list { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -10px; }
.tag { height: 32px; padding: 0 10px; border-radius: var(--r-sm); color: var(--ink-2); white-space: nowrap; transition: var(--t-ui); }
.tag:hover { color: var(--ink); }
.tag:active { scale: .95; }
.tag.is-on { color: var(--ink); background: var(--fill-2); }
.tag:disabled { color: var(--ink-4); cursor: default; scale: 1; }

/* 直式短片：一排可以左右滑，最右邊那張會被畫面切到，表示後面還有 */
.shelf { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); }
.shelf::-webkit-scrollbar { display: none; }
.shelf .card { flex: none; width: 176px; scroll-snap-align: start; }
.shelf .thumb { aspect-ratio: 9 / 16; }

.empty { color: var(--ink-2); animation: fade var(--dur-2) ease both; }
.foot { margin-top: 96px; padding: 0 var(--pad) 0 var(--content-left); font-size: var(--t-small); color: var(--ink-3); }
.foot span { display: inline-block; view-transition-name: foot; }

/* 形變過渡的例外：
   - 標籤面板還開著時，卡片會被面板蓋住，所以卡片不各自移動，交叉淡化就好
   - 短片列被捲動過時，卡片有一部分在邊界外，也不各自移動 */
html.vt-flat :is(.card, .sec__head h2, .sec__nav, .foot span) { view-transition-name: none !important; }
.shelf.is-scrolled .card { view-transition-name: none !important; }

/* 手機專用：找片列下面的系列切換（桌面版的系列在側欄） */
.mtools { flex-direction: column; gap: 16px; margin-bottom: 28px; }
.mfilter { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.mfilter::-webkit-scrollbar { display: none; }
.mfilter button { color: var(--ink-2); white-space: nowrap; transition: var(--t-ui); }
.mfilter button:active { scale: .95; }
.mfilter button.is-on { color: var(--ink); }

@media (max-width: 900px) {
  .main { padding-bottom: 120px; }
  .hero { height: clamp(440px, 68vh, 640px); }
  .hero__text { bottom: 112px; }
  .hero__dots { left: var(--pad); right: auto; bottom: 62px; }
  .hero__dot { height: 44px; }
  .sec { margin-top: 56px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  /* 手機：找片列佔滿寬度；面板裡屬性名稱在上、標籤在下 */
  /* 手機畫面矮：往下捲時只把「搜尋那一條」留在上方（距離上緣 12px），標題照常捲走。
     做法是把固定的位置設成負的：整組往上多捲 41px（標題 29px＋間距 12px）才停住 */
  .find { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; top: -29px; }
  .find__head, .find__bar { flex: 1 0 100%; }
  .find__head { padding-top: 0; height: 29px; }
  .find__panel { max-height: 56vh; padding: 12px 16px 16px; }
  .tags { gap: 12px; }
  .tags__row { grid-template-columns: 1fr; }
  .tags__label { line-height: 1.5; }
  /* 手指好點：可以按的東西至少 40px 高 */
  .find__bar { min-height: 48px; }
  .find__field { min-height: 40px; row-gap: 0; }
  .find__bar input, .find__toggle { height: 40px; }
  .find__bar input { min-width: 100px; }
  #sort-label, #sort-toggle .ic--chev { display: none; }
  #sort-toggle { padding: 0 10px; }
  .find__toggle .ic--sort { display: block; width: 18px; height: 18px; }
  .token { height: 32px; margin: 4px 0; } /* 上下各留 4px：每一行都是 40px 高，和右邊的按鈕對齊 */
  .tag { height: 40px; }
  .mtools { margin-bottom: 16px; }
  .mfilter button { height: 40px; }
  .shelf { gap: 16px; }
  .shelf .card { width: 148px; }
}