/**
 * tracks.css — 楽曲ページ（/tracks/<slug>/）固有のスタイル
 *
 * 読み込み順: tokens.css → common.css → **tracks.css**
 * 共通の下地・部品は common.css にある。ここには**楽曲ページだけで使うもの**を置く。
 *
 * 外から見て分からない事情:
 *   - HTML は ops/build_track_pages.mjs が生成するが、**このCSSは生成物ではない**（手で管理する）。
 *     クラス名を変えるときは生成スクリプトのテンプレートと必ず両方直す。
 *   - MV は 16:9 を aspect-ratio で保つ。狭い画面でも横あふれしないこと（375px で確認する）。
 *   - 見出しの罫線（.block-head .line）は `.js` スコープ。JS無効時に線が消えたままにならないため。
 */

/* 色・書体・イージングは /tokens.css（サイト共通の正本）が定義する。
   このファイルには楽曲ページ固有のレイアウトだけを置く。 */
/* ---- 走査線（profile と同じルック） ---- */
/* ---- 上部バー（profile のヘッダと同じ見た目） ---- */
/* ---- スクロール出現（初期状態は html.js のある環境だけ） ---- */

/* ============ 本文 ============ */
.track {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(92px, 15vh, 140px) clamp(20px, 5vw, 48px) clamp(56px, 9vh, 104px);
}
.track h1 {
  font-size: clamp(32px, 7vw, 60px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.22;
  color: var(--accent);
}
.track-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-top: 18px;
  font-family: var(--dot);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--dim);
}

/* ---- ジャケット（profile の .jacket-main と同じ縁・残光） ---- */
.jacket {
  position: relative;
  max-width: 520px;
  margin: clamp(38px, 7vh, 72px) auto 0;
}
.jacket img {
  width: 100%;
  border: 1px solid var(--hair);
  box-shadow:
    0 30px 90px rgba(181, 123, 255, 0.2),
    0 12px 36px rgba(255, 79, 163, 0.14);
}
.jacket::after {
  content: '';
  position: absolute;
  inset: auto 8% -10% 8%;
  height: 24%;
  background: radial-gradient(ellipse at center, rgba(255, 79, 163, 0.22), transparent 70%);
  pointer-events: none;
}

/* ---- MV（16:9固定。狭幅でも横あふれしない） ---- */
.mv {
  margin-top: clamp(46px, 8vh, 84px);
}
.mv-label {
  font-family: var(--dot);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--dim);
  margin-bottom: 14px;
}
.mv-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hair);
  background: #000;
  overflow: hidden;
}
.mv-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---- セクション ---- */
.block {
  margin-top: clamp(52px, 9vh, 96px);
}
.block-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(22px, 4vh, 38px);
  font-weight: 500;
}
.block-head .en {
  font-size: clamp(18px, 3.4vw, 28px);
  letter-spacing: 0.14em;
  color: var(--accent);
  white-space: nowrap;
}
.block-head .line {
  flex: 1;
  height: 1px;
  background: var(--hair);
  transform-origin: left;
}
.js .block-head .line {
  transform: scaleX(0);
  transition: transform 1.4s var(--ease-out) 0.15s;
}
.js .rv.on .block-head .line {
  transform: scaleX(1);
}
.block p {
  font-size: clamp(14px, 1.7vw, 16px);
  letter-spacing: 0.08em;
  line-height: 2.2;
  color: var(--body);
  margin-top: 1.15em;
}
.block p:first-of-type {
  margin-top: 0;
}

/* ---- EMOTION / SCENERY ---- */
.es {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 14px 26px;
}
.es dt {
  /* ラベルは日本語（感情・情景）。DotGothic16 は11pxだと漢字がドットに潰れて読めないため、
     ここだけ本文書体で置く。英数字ラベル（.mv-label / .topbar 等）は --dot のままでよい。 */
  font-size: 12.5px;
  letter-spacing: 0.18em;
  color: rgba(232, 228, 242, 0.52);
  padding-top: 0.62em;
  white-space: nowrap;
}
.es dd {
  font-size: clamp(14px, 1.7vw, 16px);
  letter-spacing: 0.08em;
  line-height: 2.1;
  color: var(--body);
}
/* 上の .block p:first-of-type（margin-top:0）より詳細度を上げないと余白が消える。
   dl の直後に来る最初の <p> なので first-of-type に当たり、上の余白が0にされてしまう。 */
.block p.es-summary {
  margin-top: 1.8em;
}

/* ---- LYRICS（開いた状態で表示。折りたたまない） ---- */
.lyrics p {
  font-size: clamp(14.5px, 1.8vw, 16.5px);
  letter-spacing: 0.1em;
  line-height: 2.05;
  color: rgba(232, 228, 242, 0.88);
  margin-top: 2em;
}
.lyrics p:first-child {
  margin-top: 0;
}

/* ---- 配信・MVボタン（profile の .btn を踏襲） ---- */
.outlinks {
  margin-top: clamp(46px, 8vh, 84px);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.btn.listen {
  border-color: rgba(181, 123, 255, 0.45);
  background: rgba(181, 123, 255, 0.06);
}

/* ---- 前後の曲・一覧へ ---- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 24px;
  margin-top: clamp(52px, 9vh, 92px);
  padding-top: clamp(26px, 4vh, 36px);
  border-top: 1px solid var(--hair);
}
.pager a {
  transition: color 0.4s var(--ease-out);
}
.pager .pager-next {
  margin-left: auto;
  text-align: right;
}
.pager-label {
  display: block;
  font-family: var(--dot);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--dim);
}
.pager-title {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.pager-index {
  font-family: var(--dot);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--dim);
  padding-top: 2px;
}
.pager a:hover {
  color: var(--accent);
}/* ============ FOOTER（profile と同じ） ============ */

/* ============ 狭幅（375px で横スクロールを出さない） ============ */
@media (max-width: 560px) {
  .es {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .es dt {
    padding-top: 1em;
  }
  .pager {
    flex-direction: column;
  }
  .pager .pager-next {
    margin-left: 0;
    text-align: left;
  }
}
@media (max-width: 430px) {
  /* 中央のサイト名は絶対配置なので、左右のラベルと重なる余地を字送りで詰める */
  .topbar {
    padding: 14px 16px;
  }
  .topbar .back,
  .topbar .tag {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
}

/* html と .rv の無効化は common.css 側にある。ここはこのページ固有の演出だけ */
@media (prefers-reduced-motion: reduce) {
  .js .block-head .line {
    transform: scaleX(1);
    transition: none;
  }
}