/* ================================================================
   home.css — トップページ固有分（mockups/home.html の <style> のうち theme.css と重複しない部分の逐語移植）
   読み込みは front-page.php のみ（is_front_page）。theme.css → reveal.css の後に読み込むこと
   （reveal.css の演出用カスタムプロパティ登録・トークンに依存）。
   変更点:
     - 検討パネル（.lab）関連は移植しない
     - html.ambience-bright 分岐（.hero-scene / .fog）は削除。既定の「神秘」のみ残す
     - 画像パスは url('assets/x') → url('../x')（cave-wide.jpg・fog.jpg）に書き換え
     - .container--wide の幅は本番プラグイン（op-char-card-list）のグリッドが実際に8列×2段で
       立つ値をローカル環境で実測して決定（下記コメント参照。モックの1260pxは仮値だった）
     - 第36次・Issue #4（2026-09-05）: ホーム画面のアニメーション追加。ヒーロー初回演出
       とスクロール reveal（4大ナビ・見出し・帳簿線・新着記事・フッター）を追加。指示書は
       mockups/_review/issues-02/brief-issue4-A-dom.md
     - 第37次・Issue #4 改訂2（2026-09-05 オーナー差し戻し）: ヒーローの「闇が明ける」演出
       （.hero-dawn 幕・虹彩・--iris・題字の mask wipe）を全廃し、「霧の中に在ったものに
       ピントが合う」出現（blur→鮮明・透明→不透明・僅かな浮上）に作り直し。新着記事の出現も
       「航海日誌に記録が書き加えられる」（写真が置かれる→見出しが記される→判が押される→
       日付が刻まれる→帳簿線がペンで引かれる）に作り込み。指示書は
       mockups/_review/issues-02/brief-issue4-rev2.md
     - 第41次（2026-09-05）: 新着記事の出現を最新話考察・まとめ等の一覧ページ
       （archive.php・home.php・search.php）にも適用するため、§5.2（セクション見出し）・
       §5.4（新着記事の行）と見出し記入アニメが使うカスタムプロパティ登録を新規 reveal.css へ
       移動（トップ・一覧ページ共通）。指示書は mockups/_review/issues-02/brief-list-reveal.md
   ================================================================ */

/* 演出の速度係数。スマホは15%速い（entrance.js の entK() と同じ値を保つこと） */
html { --ent-k: 1; }
@media (max-width: 760px) { html { --ent-k: .85; } }

/* ================================================================
   1. ヒーロー: 海図テーブル
   ================================================================ */
.hero {
  position: relative; overflow: hidden;
  height: max(620px, 82vh);
  display: flex; align-items: center;
}
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0c0f12 0%, #0a0c0e 45%, var(--abyss) 100%);
}
/* 絵のレイヤー（第11次）: 左右にアウトペイントした横長プレートを全面 cover で敷き、ヒーロー全体を「洞窟の中」にする */
.hero-scene {
  position: absolute; inset: 0;
  background: url('../cave-wide.jpg') 62% 45% / cover no-repeat;
  /* 第23次: WebGL版のグレード（パス9）後の見た目に近づけた確定値。canvasが出るまで/非対応時の
     CSS版とのクロスフェード段差を減らすため、contrast/saturate/brightnessの格子探索で
     WebGL版（動く層を消した状態）との平均絶対差が最小の組を採用（docs/hero-motion.md 参照） */
  filter: contrast(1.14) saturate(1.30) brightness(0.92);
}
/* WebGL版の絵（hero-scene.js、第22次 Phase3）。準備完了後にopacity 0→1でクロスフェードし、CSS版の上に出る */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.hero.is-live .hero-canvas { opacity: 1; }
.hero.is-settled .hero-scene, .hero.is-settled .fog { visibility: hidden; }
/* ランタン明滅光。プレートと同じ内在比率(2048×1024)のSVGをプレートと完全に同じposition/sizeで敷き、cover切り抜きに追従させる */
.hero-scene::after {
  content: ''; position: absolute; inset: 0; mix-blend-mode: screen;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2048' height='1024' viewBox='0 0 2048 1024'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffce82' stop-opacity='.32'/%3E%3Cstop offset='.72' stop-color='%23ffce82' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23ffc878' stop-opacity='.22'/%3E%3Cstop offset='.72' stop-color='%23ffc878' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='1362' cy='164' rx='72' ry='82' fill='url(%23g)'/%3E%3Cellipse cx='1577' cy='481' rx='92' ry='102' fill='url(%23g)'/%3E%3Cellipse cx='891' cy='369' rx='62' ry='72' fill='url(%23h)'/%3E%3C/svg%3E") 62% 45% / cover no-repeat;
  animation: lantern-flicker 9s ease-in-out infinite alternate;
}
@keyframes lantern-flicker {
  from { opacity: .72; }
  to   { opacity: 1; }
}
/* 絵の上の統合レイヤー（第11次）: 題字の地（左ほど暗く沈める）／外周ビネット／上下端／題字背後のごく淡い暖色光 */
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* 題字の地: 左から右へ影が薄れる（洞窟の最奥ほど暗い） */
    linear-gradient(90deg, rgba(6,7,9,.55) 0%, rgba(6,7,9,.40) 24%, rgba(6,7,9,.12) 44%, transparent 56%),
    /* 外周ビネット（中心は旗のやや左） */
    radial-gradient(115% 100% at 60% 46%, transparent 48%, rgba(6,7,9,.40) 82%, rgba(5,5,7,.78) 100%),
    /* 上端の締め・下端の abyss への受け渡し */
    linear-gradient(180deg, rgba(6,7,9,.48) 0%, rgba(6,7,9,.18) 10%, transparent 20%, transparent 74%, var(--abyss) 100%),
    /* 題字背後のごく淡い暖色光 */
    radial-gradient(30% 42% at 15% 44%, rgba(240,205,140,.08), transparent 70%);
}

/* 霧レイヤー: assets/fog.jpg（実写煙）。文字ブロックの下には掛けない。旗の中心は覆わない。矩形の縁が screen 合成で横線として見えるため、ヒーロー内で見える縁は mask でフェードする（第16次） */
.fog {
  position: absolute; z-index: 0; pointer-events: none;
  background-image: url('../fog.jpg');
  background-size: cover; background-repeat: no-repeat; background-position: center;
  mix-blend-mode: screen;
}
.fog-1 {
  left: -14%; bottom: -10%; width: 120%; height: 60%;
  opacity: .10; filter: brightness(.75);
  transform: scaleX(-1) translateX(0);
  animation: fog-drift-1 90s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
}
.fog-2 {
  right: -6%; top: -10%; width: 70%; height: 58%; opacity: .05;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 35%, transparent 85%);
  mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 35%, transparent 85%);
}
@keyframes fog-drift-1 {
  from { transform: scaleX(-1) translateX(0); }
  to   { transform: scaleX(-1) translateX(40px); }
}

/* ================================================================
   4.1 灯りの息（.hero-title-block::before）: 「霧から浮かび上がる」演出の唯一の追加光。
   題字が浮かぶ間だけ、ランタンの光がそこに届く。終了値が opacity 0 なので、演出が終われば
   何も残らない（.hero-veil の淡い暖色光は既存のまま・不変）。
   第37次・Issue #4 改訂2（オーナー差し戻し）: 「闇が明ける」演出（.hero-dawn 幕・虹彩）は
   ここで全廃した。指示書: mockups/_review/issues-02/brief-issue4-rev2.md §1.1〜1.2
   ================================================================ */
.hero-title-block { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .hero-title-block::before {
    content: ''; position: absolute; inset: -18% -12% -18% -16%; z-index: -1; pointer-events: none;
    background: radial-gradient(55% 60% at 42% 48%, rgba(240,205,140,.16), transparent 72%);
    mix-blend-mode: screen; opacity: 0;
  }
  html.js-entrance.is-entered .hero-title-block::before {
    animation: title-breath calc(2600ms*var(--ent-k)) ease-in-out both;
  }
}
@keyframes title-breath { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }

.hero-inner {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto; padding: 0 24px; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.hero-tag-seal {
  display: inline-block; position: relative; overflow: hidden;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .08em;
  color: #fdf0dc; background: var(--shu);
  padding: 6px 13px; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(253,240,220,.7), 0 3px 8px rgba(0,0,0,.4);
  transform: rotate(-2deg);
}
.hero-tag-seal::after { content:''; position:absolute; inset:0; background-image: var(--tex-paper); opacity:.3; mix-blend-mode:multiply; }
/* 第23次: 題字を骨白の塗り文字に。影・掠れ・ムラは #title-paint フィルタ内 */
.hero-title { margin-top: 16px; line-height: 1.05; color: #ece3cd; filter: url(#title-paint); }
.hero-title-en { display: block; white-space: nowrap; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 38px); letter-spacing: .06em; }
.hero-title-ja { display: block; white-space: nowrap; font-family: var(--font-display); font-weight: 400; font-size: clamp(50px, 6.5vw, 78px); }
.hero-latin-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; max-width: 380px; }
.hero-latin-row .rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--sea-line), transparent); }
.hero-latin-text { flex-shrink: 0; font-family: var(--font-latin); font-size: 12px; letter-spacing: .35em; color: var(--gold-bright); white-space: nowrap; }
.hero-desc { margin-top: 16px; max-width: 460px; font-size: 14.5px; color: var(--text-on-dark); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.hero-desc strong { font-family: var(--font-latin); color: var(--gold-bright); font-weight: 700; }
/* 語中で折り返さない単位（和文組版）。モバイルで「最新話考察」が2行に分断されるのを防ぐ */
.nobr { display: inline-block; }

.hero-rail { position: relative; align-self: stretch; display: flex; align-items: center; padding: 0 2px 0 20px; }
.hero-rail::before { content:''; position:absolute; left:0; top:6%; bottom:6%; width:1px; background: linear-gradient(180deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); }
.hero-rail p { writing-mode: vertical-rl; font-family: var(--font-mincho); font-size: 15px; letter-spacing: .32em; color: var(--text-dim); white-space: nowrap; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
/* 1700〜2100px 幅では右ランタン（プレート横77%）とレールが重なるため、レールをコンテナ外へ逃がす */
@media (min-width: 1700px) and (max-width: 2100px) {
  .hero-rail { margin-right: -72px; }
}

/* ================================================================
   第37次・Issue #4 改訂2: ヒーロー初回演出（entrance）。コンセプト「霧の中に在ったものに
   ピントが合う」（指示書 mockups/_review/issues-02/brief-issue4-rev2.md §1.2）。
   html.js-entrance は <head> 冒頭の同期スクリプトが即時付与し、is-entered は
   entrance.js がフォント読み込みだけを待って付与する（ヒーロー側の準備は待たない）。
   すべて「ぼけ→ピント（filter: blur）＋透明→不透明＋僅かな浮上」。イージングは
   cubic-bezier(.2,.6,.2,1)（ゆっくり止まる）。判だけは僅かな戻り cubic-bezier(.2,1.2,.35,1)。
   隠す側・現れる側の規則は原則すべて @media (prefers-reduced-motion: no-preference)
   の中に置く（theme.css の reduce 用グローバル `* { transition:none; animation:none }`
   だけに頼らない。reduced-motion 環境ではこのブロック自体が丸ごとマッチしなくなり、
   各要素は素の最終状態のスタイルのまま。JS無効の環境でも js-entrance が付かず
   同様に何も隠れない）。is-dawned（3400ms*k）で filter を none にし、blur(0) の
   合成レイヤーを残さない（.hero-title の filter: url(#title-paint) はそのまま）。
   ================================================================ */

/* 4.2 題字。ONE PIECE が先、なんでも一覧が200ms遅れて長く、ぼけからピントが合う */
@media (prefers-reduced-motion: no-preference) {
  html.js-entrance:not(.is-entered) .hero-title-en {
    opacity: 0; filter: blur(10px); transform: translateY(12px);
  }
  html.js-entrance:not(.is-entered) .hero-title-ja {
    opacity: 0; filter: blur(12px); transform: translateY(16px) scale(1.02);
  }
  html.js-entrance.is-entered .hero-title-en { opacity: 1; filter: blur(0); transform: none;
    transition: opacity calc(1600ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(100ms*var(--ent-k)),
                filter calc(1600ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(100ms*var(--ent-k)),
                transform calc(1600ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(100ms*var(--ent-k)); }
  html.js-entrance.is-entered .hero-title-ja { opacity: 1; filter: blur(0); transform: none;
    transition: opacity calc(1800ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(300ms*var(--ent-k)),
                filter calc(1800ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(300ms*var(--ent-k)),
                transform calc(1800ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(300ms*var(--ent-k)); }
  html.js-entrance.is-entered.is-dawned .hero-title-en,
  html.js-entrance.is-entered.is-dawned .hero-title-ja { filter: none; }
}

/* 4.3 朱の判「非公式ファンサイト」（押される）。題字の後に押す。最終 transform は
   通常時（rotate(-2deg)。component 定義。上の .hero-tag-seal 参照）と画素一致させる。
   判だけは僅かな戻り（cubic-bezier(.2,1.2,.35,1)） */
@media (prefers-reduced-motion: no-preference) {
  html.js-entrance:not(.is-entered) .hero-tag-seal {
    opacity: 0; filter: blur(4px); transform: rotate(-4deg) scale(1.12);
  }
  html.js-entrance.is-entered .hero-tag-seal { opacity: 1; filter: blur(0); transform: rotate(-2deg) scale(1);
    transition: opacity calc(700ms*var(--ent-k)) cubic-bezier(.2,1.2,.35,1) calc(1100ms*var(--ent-k)),
                filter calc(700ms*var(--ent-k)) cubic-bezier(.2,1.2,.35,1) calc(1100ms*var(--ent-k)),
                transform calc(700ms*var(--ent-k)) cubic-bezier(.2,1.2,.35,1) calc(1100ms*var(--ent-k)); }
  html.js-entrance.is-entered.is-dawned .hero-tag-seal { filter: none; }
}

/* 4.4 欧文行「GRAND LINE ENCYCLOPEDIA」（刻まれる）。罫は両脇から外へ伸び（現行どおり）、
   文字はぼけから鮮明になりながら字間が締まる */
.hero-latin-row .rule:first-child { transform-origin: 100% 50%; }
.hero-latin-row .rule:last-child  { transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  html.js-entrance:not(.is-entered) .hero-latin-row .rule { transform: scaleX(0); }
  html.js-entrance:not(.is-entered) .hero-latin-text { opacity: 0; filter: blur(6px); letter-spacing: .55em; }
  html.js-entrance.is-entered .hero-latin-row .rule { transform: scaleX(1); transition: transform calc(1400ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(1200ms*var(--ent-k)); }
  html.js-entrance.is-entered .hero-latin-text { opacity: 1; filter: blur(0); letter-spacing: .35em;
    transition: opacity calc(1500ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(1200ms*var(--ent-k)),
                filter calc(1500ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(1200ms*var(--ent-k)),
                letter-spacing calc(1500ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(1200ms*var(--ent-k)); }
  html.js-entrance.is-entered.is-dawned .hero-latin-text { filter: none; }
}

/* 4.5 説明文。ぼけから鮮明になりながら僅かに浮上 */
@media (prefers-reduced-motion: no-preference) {
  html.js-entrance:not(.is-entered) .hero-desc { opacity: 0; filter: blur(6px); transform: translateY(8px); }
  html.js-entrance.is-entered .hero-desc { opacity: 1; filter: blur(0); transform: none;
    transition: opacity calc(1200ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(1500ms*var(--ent-k)),
                filter calc(1200ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(1500ms*var(--ent-k)),
                transform calc(1200ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(1500ms*var(--ent-k)); }
  html.js-entrance.is-entered.is-dawned .hero-desc { filter: none; }
}

/* 4.6 右レール（デスクトップのみ表示）。金線は現行どおり scaleY 0→1（origin 上）。
   縦書き本文は transform を持たないので opacity と blur だけでピントが合う */
@media (prefers-reduced-motion: no-preference) {
  html.js-entrance:not(.is-entered) .hero-rail::before { transform: scaleY(0); transform-origin: 50% 0; }
  html.js-entrance.is-entered .hero-rail::before { transform: scaleY(1); transition: transform calc(1600ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(700ms*var(--ent-k)); }

  html.js-entrance:not(.is-entered) .hero-rail p { opacity: 0; filter: blur(6px); }
  html.js-entrance.is-entered .hero-rail p { opacity: 1; filter: blur(0);
    transition: opacity calc(1800ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(1300ms*var(--ent-k)),
                filter calc(1800ms*var(--ent-k)) cubic-bezier(.2,.6,.2,1) calc(1300ms*var(--ent-k)); }
  html.js-entrance.is-entered.is-dawned .hero-rail p { filter: none; }
}

/* 4.8 スクロール連動の奥行き（CSS scroll-driven animations。JSなし）。
   ページを下へ送ると洞窟が沈み、題字が溶ける。対応ブラウザだけ効く（非対応は現状どおり）。
   スクロール0ではfrom状態＝無変換なので初回画面は不変（レイアウトシフトなし）。
   .fog は fog-drift-1 の transform と衝突するため対象外。.hero-canvas は transition:opacity
   のみで transform は使わないため衝突しない（hero-scene.js は要素の幅高しか読まない） */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-scene, .hero-canvas { animation: hero-recede linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .hero-inner { animation: hero-title-recede linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  }
}
@keyframes hero-recede { to { transform: translateY(24%); } }
@keyframes hero-title-recede { to { transform: translateY(14%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fog-1 { animation: none; }
  .hero-scene::after { animation: none; }
}

/* ================================================================
   1b. 4大ナビ ＋ 縁木（ヒーローとボディの境目）
   ヒーロー＝洞窟の情景、ボディ＝海図テーブルの天板。境目は縁木（黒鉄の横木。上縁に灯りを受ける
   金の稜線＋その下に黒キーラインの毛引き）で、4大ナビの札はこの横木に掛かる。
   縁木の直下には海図タイルと同じ20px刻み・50%基準の度数目盛枠が走り、接地影の中に沈む。
   図鑑プレートは縁木から1本の吊り線（新着の帳簿線と同じ道具）で吊り、4連ボタン帯の
   左右対称を崩す軸のズレをつくる。
   .gate-nav／.gate-btn／.gate-icon（ボタン本体）は 404.php 等トップ以外でも再掲するため theme.css 側。
   ここに残すのは縁木そのもの（.gate-ledge／.gate-dock／.gate-hanger、ヒーローとの境目専用の構造）のみ。
   ================================================================ */
.gate-ledge {
  position: relative; height: 20px;
  background: linear-gradient(180deg, #17120b 0%, #100c07 60%, #0c0906 100%);
  box-shadow:
    inset 0 1px 0 rgba(232,203,122,.30),   /* 上縁: 灯りを受ける金の稜線 */
    inset 0 2px 0 rgba(0,0,0,.55),          /* その下の黒キーライン（毛引き） */
    inset 0 -1px 0 rgba(0,0,0,.8);          /* 下縁の影 */
}
/* 縁木の下: テーブルへの接地影 ＋ 紙の余白 3px を空けて海図の目盛枠（40×8 タイル。20px 刻み、50% 基準で経緯線に揃う） */
.gate-ledge::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0, rgba(0,0,0,.16) 45%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Crect x='0' y='1' width='20' height='6' fill='%23e8cb7a' fill-opacity='.07'/%3E%3Cpath d='M0 .5H40M0 7.5H40' stroke='%23e8cb7a' stroke-opacity='.16'/%3E%3Cpath d='M.5 0V8M20.5 0V8' stroke='%23e8cb7a' stroke-opacity='.14'/%3E%3C/svg%3E") 50% 3px / 40px 8px repeat-x;
}
/* 札は縁木をまたぐ（札の中心＝縁木の中心: 68/2 + 20/2）。相対位置で持ち上げる
   （負の margin-top だと .ground の上端と相殺し、海図タイルがヒーロー側へにじむため） */
.gate-dock { position: relative; top: -47px; margin-bottom: -47px; z-index: 2; }  /* 第38次・Issue #6 第2段: 札 74px＋縁木 20px の中心合わせ = -(74/2+20/2) */
/* 縁木から図鑑プレートへ落ちる吊り線（帳簿線 .ground-ledger と同じ道具）。top は .gate-dock の実効高（74−47=27px）ぶん戻して縁木の下縁から始め、section の padding-top 56px を通ってプレート上端で終わる */
.gate-hanger { position: relative; }
.gate-hanger::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -16px; top: -27px; height: 83px; width: 1px;
  background: linear-gradient(180deg, rgba(201,160,32,.35), var(--gold));
  transform-origin: 50% 0;
}
/* .ground-ledger::before の本体は theme.css（帳簿線・全ページ共通）。ここでは reveal に要る
   transform-origin だけを追記する（既存プロパティとは衝突しない） */
.ground-ledger::before { transform-origin: 50% 0; }

/* ================================================================
   5.1 4大ナビの札（縁木に掛かり、灯りが撫でる）。すべて is-in 付与で発火、1回きり
   （reveal.js の IntersectionObserver。第41次でトップ・一覧共通化）。--i は reveal.js が
   その回に現れた順（0起点）で inline 付与する
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js-entrance .gate-btn:not(.is-in) { opacity: 0; }
  .gate-btn.is-in { animation: gate-hang calc(700ms*var(--ent-k)) cubic-bezier(.16,1,.3,1) calc(var(--i, 0) * 90ms) backwards; }
  .gate-btn.is-in::before { animation: gate-gleam-once 1000ms ease-in-out calc(var(--i, 0) * 90ms + 500ms) backwards; }
  @media (hover: none) {
    /* スマホ: hover が無いので 16 秒に 1 度、札の順に灯りが掃く（ごく稀・弱い。周期ループの例外） */
    .gate-btn.is-in::before { animation: gate-gleam-once 1000ms ease-in-out calc(var(--i, 0) * 90ms + 500ms) backwards,
                                         gate-gleam-loop 16s linear calc(var(--i, 0) * 360ms + 6s) infinite; }
  }
}
@keyframes gate-hang { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes gate-gleam-once { from { background-position: 185% 0, 0 0, 0 0, 0 0; } to { background-position: -85% 0, 0 0, 0 0, 0 0; } }
@keyframes gate-gleam-loop { 0%, 90% { background-position: 185% 0, 0 0, 0 0, 0 0; } 100% { background-position: -85% 0, 0 0, 0 0, 0 0; } }
/* タップ反応: スマホは hover が効かないので、押した瞬間にアイコンが僅かに沈む（押した感） */
@media (hover: none) {
  .gate-btn:active .gate-icon { transform: scale(.9); transition: transform .1s ease-out; }
}

/* ================================================================
   5.3 吊り線・帳簿線（引かれる）。16体グリッド（プラグイン）は触らない。見出し・線だけ
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js-entrance .gate-hanger:not(.is-in)::before { transform: scaleY(0); }
  .gate-hanger.is-in::before { animation: line-draw 700ms cubic-bezier(.2,.7,.2,1) backwards; }
  html.js-entrance .ground-ledger:not(.is-in)::before { transform: scaleY(0); }
  .ground-ledger.is-in::before { animation: line-draw 1000ms cubic-bezier(.2,.7,.2,1) backwards; }
}
@keyframes line-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 760px) {
  /* 遠景構図（旗は遠景の右上、題字は左下の霧の床）: 題字ブロックを下端へ寄せる。
     高さは第15次で max(700px, 89vh) → max(560px, 70vh)（844px端末で591px。初回画面に4大ナビが収まり、
     高さ基準のプレートが縮んで旗が約25%幅の遠景になる） */
  .hero { height: auto; min-height: max(560px, 70vh); align-items: flex-end; padding: 0 0 60px; }
  /* 第14次 遠景構図（オーナー指示「PC版のように、遠くにポツンと旗があり、ランタンに照らされている」）:
     デスクトップと同じ横長プレート cave-wide.jpg を高さ基準（auto 100% ＝ 画像高をヒーロー高に一致）で敷く。
     倍率はヒーロー高/1024（844px端末で約0.58）。旗は画面幅の約25%、中心は横62%（%指定により
     画像の62%点が画面の62%点に重なる＝どの幅でも旗は題字の右上）。上のランタン（プレート横67%）が
     旗の右上、左のランタン（横43%）が画面左端に入り、2灯の間に旗が掛かる（360px幅以上で実測）。
     画像幅＝2×ヒーロー高≥1400px なので760px幅まで必ず覆う。
     cave-mobile.jpg（第12〜13次）はモックから参照しなくなる（ファイルは残置）。 */
  .hero-scene {
    background: url('../cave-wide.jpg') 62% 50% / auto 100% no-repeat;
  }
  /* 明滅光はデスクトップと同じ3灯SVG（基本ルール）をプレートと同じ position/size で敷いてランタンに追従させる */
  .hero-scene::after {
    background-position: 62% 50%;
    background-size: auto 100%;
  }
  /* 遠景構図（第14〜15次）: 上端をヘッダー下に潜らせる／50%以降を題字の地として沈める（霧の床・材木がうっすら透ける程度。
     旗＝縦47%の下半分に影を掛けない） */
  .hero-veil {
    background:
      radial-gradient(150% 70% at 50% 42%, transparent 46%, rgba(6,7,9,.42) 82%, rgba(5,5,7,.78) 100%),
      linear-gradient(180deg, rgba(6,7,9,.42) 0%, transparent 14%, transparent 50%, rgba(6,7,9,.55) 68%, rgba(8,7,6,.94) 88%, var(--abyss) 100%);
  }
  /* 題字の上に霧を掛けない（視認性ルール） */
  .fog-1 { display: none; }
  .hero-rail { display: none; }
  .hero-title-en { font-size: clamp(18px, 4.4vw, 24px); }
  .hero-title-ja { font-size: clamp(36px, 11.5vw, 50px); }
  .hero-title { margin-top: 12px; }
  .hero-latin-row { margin-top: 12px; }
  .hero-desc { margin-top: 12px; }

  .gate-dock { top: -52px; margin-bottom: -52px; } /* 第38次・Issue #6 第2段: 札の高さ84px＋縁木20pxの中心合わせ = -(84/2+20/2)（第35次は 66px で −43px） */
  .gate-ledge::after { background-size: auto, 28px 8px; }  /* 地のタイルがモバイルで 168px（0.7倍）のため目盛も 0.7 倍 */
  .gate-hanger::before { display: none; }         /* モバイルは帯が密なので吊り線は出さない */
}

/* ================================================================
   5.2（セクション見出し）・5.4（新着記事の行）は第41次で reveal.css へ移動した
   （トップだけでなく一覧ページ archive.php・home.php・search.php でも同じ器を使うため）。
   指示書: mockups/_review/issues-02/brief-list-reveal.md
   ================================================================ */

/* ================================================================
   5.5 フッター（古地図が闇から浮く）。.site-footer::before の通常値は opacity:.55
   （theme.css）なので map-surface の to をそれに合わせる
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js-entrance .site-footer:not(.is-in)::before { opacity: 0; }
  .site-footer.is-in::before { animation: map-surface 1600ms ease-out both; }
  html.js-entrance .site-footer:not(.is-in) .footer-brand-block, html.js-entrance .site-footer:not(.is-in) .footer-nav { opacity: 0; }
  .site-footer.is-in .footer-brand-block { animation: rise-in 700ms cubic-bezier(.2,.7,.2,1) 200ms backwards; }
  .site-footer.is-in .footer-nav { animation: rise-in 700ms cubic-bezier(.2,.7,.2,1) 380ms backwards; }
}
@keyframes map-surface { from { opacity: 0; } to { opacity: .55; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }