/* ================================================================
   reveal.css — 共通の reveal 演出（新着記事の行・セクション見出し）。
   トップページ（home.css）と一覧ページ（archive.php・home.php・search.php）の両方で読み込む
   （functions.php の nandemo_enqueue_assets()。is_front_page() || is_home() || is_archive()
   || is_search()）。読み込み順は theme.css → reveal.css →（トップのみ）home.css。

   第41次・指示書 mockups/_review/issues-02/brief-list-reveal.md に基づき、home.css の
   §5.2（セクション見出し）・§5.4（新着記事の行）と @property --wipe の登録を逐語移植した
   （元は第37次・Issue #4 改訂2で作り込んだもの。コンセプトは brief-issue4-rev2.md 参照）。
   ここに置くのは「同じ器（.sec-head/.sec-rule・.post-row）を使う全ページ共通」の規則のみ。
   ヒーロー出現・4大ナビの札・吊り線・帳簿線・フッターの reveal はトップ固有として home.css
   に残る。すべて @media (prefers-reduced-motion: no-preference) の中と html.js-entrance
   配下（現行どおり）。
   ================================================================ */

/* ================================================================
   0. 演出用カスタムプロパティ登録（reveal で使う％値を animation でアニメ化するため）。
   --wipe は新着記事の見出し（.pr-title の ink-write。§5.4）が使う。
   @property 非対応環境（対応の遅いブラウザ）では値が瞬時に切り替わるだけになるが、
   併走する opacity の transition/animation で自然にフェードするため壊れない。
   ================================================================ */
@property --wipe { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* ================================================================
   5.2 セクション見出し（札が差し込まれ、罫が引かれる）。すべて is-in 付与で発火、1回きり
   ================================================================ */
.sec-rule { transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  html.js-entrance .sec-head:not(.is-in) .sec-plate, html.js-entrance .sec-head:not(.is-in) .sec-aside { opacity: 0; }
  html.js-entrance .sec-rule:not(.is-in) { transform: scaleX(0); }
  .sec-head.is-in .sec-plate { animation: plate-in 650ms cubic-bezier(.16,1,.3,1) backwards; }
  .sec-head.is-in .sec-aside { animation: aside-in 500ms cubic-bezier(.2,.7,.2,1) 250ms backwards; }
  .sec-rule.is-in { animation: rule-draw 900ms cubic-bezier(.2,.7,.2,1) 150ms backwards; }
}
@keyframes plate-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes aside-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ================================================================
   5.4 新着記事の行（第37次・Issue #4 改訂2で作り込み。コンセプト「航海日誌に記録が
   書き加えられる」）: 写真が置かれ→見出しが記され→判が押され→日付が刻まれ→帳簿線が
   ペンで引かれる。行ごとに --d（180ms×i）だけずらす。すべて animation … backwards
   （hover の transition を潰さないため。現行 §5.4 の流儀）。--i は entrance.js が
   行に 0..2 で inline 付与済み。指示書: brief-issue4-rev2.md §2
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js-entrance .post-row:not(.is-in) { opacity: 0; }
  .post-row { position: relative; }
  .post-row.is-in {
    --d: calc(var(--i, 0) * 180ms);
    animation: row-in 500ms ease-out var(--d) backwards;
  }

  /* 写真が置かれる: 高いところから机に降りる */
  .post-row.is-in .pr-thumb {
    animation: photo-lay 800ms cubic-bezier(.2,.8,.2,1) var(--d) backwards;
  }

  /* 見出しが記される: 筆が左から右へ（--wipe は登録済みなので animation で動かせる）。
     -webkit-line-clamp の box にも mask-image は効く */
  .post-row.is-in .pr-title {
    --wipe: 125%;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 14%), transparent var(--wipe));
            mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 14%), transparent var(--wipe));
    animation: ink-write 700ms cubic-bezier(.25,.6,.2,1) calc(var(--d) + 250ms) backwards;
  }

  /* 判が押される */
  .post-row.is-in .pr-cat {
    animation: seal-press 380ms cubic-bezier(.2,1.3,.35,1) calc(var(--d) + 700ms) backwards;
  }

  /* 日付が刻まれる */
  .post-row.is-in .pr-date {
    animation: date-in 600ms cubic-bezier(.2,.7,.2,1) calc(var(--d) + 800ms) backwards;
  }

  /* 帳簿線がペンで引かれ、引き終えると静的な border-bottom だけが残る（画素一致） */
  .post-row::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
    transform-origin: 0 50%; opacity: 0;
    background: linear-gradient(90deg, var(--gold), rgba(201,160,32,.25));
  }
  .post-row.is-in::after {
    animation: ledger-stroke 1100ms linear calc(var(--d) + 150ms) backwards;
  }
}
@keyframes row-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes photo-lay {
  from { transform: translateY(-14px) rotate(-3deg) scale(1.05); box-shadow: inset 0 0 0 1px rgba(232,203,122,.18), 0 18px 30px rgba(0,0,0,.55); }
  to   { transform: none; box-shadow: inset 0 0 0 1px rgba(232,203,122,.18), 0 3px 8px rgba(0,0,0,.45); }
}
@keyframes ink-write { from { --wipe: 0%; } to { --wipe: 125%; } }
@keyframes seal-press {
  from { opacity: 0; transform: scale(1.3) rotate(-3deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes date-in {
  from { opacity: 0; letter-spacing: .22em; }
  to   { opacity: 1; letter-spacing: .06em; }
}
@keyframes ledger-stroke {
  0%   { transform: scaleX(0); opacity: .9; }
  60%  { transform: scaleX(1); opacity: .9; }
  100% { transform: scaleX(1); opacity: 0; }
}
/* スマホ: hoverの代わりに、スクロールに合わせて写真が枠の中でわずかに流れる（奥行き）。対応ブラウザのみ。
   .pr-thumb は overflow:hidden なのではみ出しは切れる。scale(1.16) は上下7%移動分の余白。
   デスクトップの thumb-settle（拡大→等倍）は廃止: 写真の枠自体が動くので中身まで動かすとうるさい */
@supports (animation-timeline: view()) {
  @media (hover: none) and (prefers-reduced-motion: no-preference) {
    .pr-thumb-img { animation: thumb-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes thumb-drift { from { transform: translateY(-7%) scale(1.16); } to { transform: translateY(7%) scale(1.16); } }
@media (hover: none) { .post-row:active { background: rgba(232,203,122,.10); } }