/* 江戸草子 — 動き（うごき）
 *
 * 節ごとの現れ方は js/motion.js が持っている。
 * ここで足すのは、**もっと細かいところ**——押した、選んだ、頁が変わった、
 * という一つ一つの手応えである。
 *
 * 決めごと:
 *   1. **動かすのは transform と opacity だけ。**幅や高さを動かすと、
 *      そのたびに頁ぜんぶを組み直すことになり、指が引っかかる
 *   2. **一つの動きは 0.4 秒まで。**資料を読みにきた人を待たせない
 *   3. **押した手応えは即座に。**遅れて返る手応えは、手応えではない
 *   4. `prefers-reduced-motion: reduce` なら**全部止める。**
 *      減らすのではなく、止める
 *   5. **江戸の手つきに寄せる。**判子を押す、筆で引く、紙を持ち上げる、
 *      襖を引く。動きにも土地の言葉がある
 */

:root{
  --uke: cubic-bezier(.16, 1, .3, 1);   /* 受け身の動き。すっと止まる */
  --hane: cubic-bezier(.34, 1.5, .64, 1); /* 跳ねる。押した手応えに使う */
}

/* ── 頁の移り変わり ─────────────────────────────────────────
   襖を引くように、前の頁が退いて次の頁が出る。
   View Transitions が使える browser では頁またぎで効き、
   使えないところでは js/ugoki.js が薄い被せで代わりをする。 */
@view-transition{ navigation: auto; }

::view-transition-old(root){
  animation: fusuma-deru .26s var(--uke) both;
}
::view-transition-new(root){
  animation: fusuma-hairu .34s var(--uke) both;
}
@keyframes fusuma-deru{
  to{ opacity: 0; transform: translateX(-1.2%); }
}
@keyframes fusuma-hairu{
  from{ opacity: 0; transform: translateX(1.6%); }
}

/* 使えないところ用の被せ。js が .maku-on を付ける */
.maku{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--washi, #f4f0e8);
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--uke);
}
body.maku-on .maku{ opacity: 1; }

/* ── 選ぶ ───────────────────────────────────────────────────
   文字を選んだとき。朱で拾う。 */
::selection{ background: rgba(181, 68, 60, .22); color: inherit; }
::-moz-selection{ background: rgba(181, 68, 60, .22); color: inherit; }

/* ── 判子を押す ─────────────────────────────────────────────
   ボタン・札を押したときの手応え。**沈んで、朱がにじむ。** */
.kan-era, .kan-item, .sr-t, .nav-toggle, .tut-go, .news-more,
.btn, .gate, .ib-lg, .tab-btn, #tabs button{
  position: relative;
  transition: transform .16s var(--hane), box-shadow .2s var(--uke),
              background-color .2s ease, color .2s ease, border-color .2s ease;
}
.kan-era:active, .kan-item:active, .sr-t:active, .nav-toggle:active,
.tut-go:active, .news-more:active, .btn:active, .ib-lg:active, #tabs button:active{
  transform: translateY(1px) scale(.985);
}

/* 選ばれた札には、朱の印が滲む */
.kan-era.on::after, .kan-item.on::after, .sr-t.on::after{
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(255,255,255,.28), transparent 62%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference){
  .kan-era.on, .kan-item.on, .sr-t.on{ animation: hanko .28s var(--hane); }
}
@keyframes hanko{
  0%{ transform: scale(.94); }
  55%{ transform: scale(1.03); }
  100%{ transform: scale(1); }
}

/* ── 筆で引く ───────────────────────────────────────────────
   本文の links に触れると、下に一本引かれる。**左から右へ、筆のように。** */
.entry-body a:not(.btn):not(.gate),
.section-desc a, .sr-b a, .kan-item-note a, .ib-note a, .foot-note a{
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s var(--uke);
}
.entry-body a:not(.btn):not(.gate):hover,
.section-desc a:hover, .sr-b a:hover, .kan-item-note a:hover,
.ib-note a:hover, .foot-note a:hover,
.entry-body a:focus-visible, .section-desc a:focus-visible{
  background-size: 100% 1px;
}

/* ── 紙を持ち上げる ─────────────────────────────────────────
   札に触れると、紙一枚ぶん浮く。**浮きすぎない。**一枚ぶんである。 */
.entry-card, .cat-tile, .gate, .nc-card, .lens-card, .kb-card, .sr-item{
  transition: transform .3s var(--uke), box-shadow .3s var(--uke),
              background-color .25s ease;
}
@media (prefers-reduced-motion: no-preference){
  .entry-card:hover, .cat-tile:hover, .gate:hover, .lens-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(28, 24, 21, .07);
  }
  a.nc-card:hover{ transform: translateY(-2px); }
}

/* ── 間口の漢字が、判子のように据わる ───────────────────────── */
.cat-tile .cat-kanji{ transition: transform .45s var(--uke), color .3s ease; }
@media (prefers-reduced-motion: no-preference){
  .cat-tile:hover .cat-kanji{ transform: scale(1.06) rotate(-2deg); }
}

/* ── 数が積み上がる ─────────────────────────────────────────
   記事85本・台帳144件。**止まった数より、積み上がる数のほうが残る。**
   js/ugoki.js が一度だけ数える。 */
.lead-figs dd{ font-variant-numeric: tabular-nums; }

/* ── 焦点 ───────────────────────────────────────────────────
   キーボードで辿る人に、いまどこかを必ず見せる。 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--shu, #b5443c);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── 目次の開き方 ───────────────────────────────────────────
   携帯の目次が出るとき、行き先が順に降りてくる */
@media (prefers-reduced-motion: no-preference) and (max-width: 860px){
  .nav-open .site-nav a{ animation: ori 0.34s var(--uke) both; }
  .nav-open .site-nav .nav-group:nth-child(1) a{ animation-delay: .02s; }
  .nav-open .site-nav .nav-group:nth-child(2) a{ animation-delay: .06s; }
  .nav-open .site-nav .nav-group:nth-child(3) a{ animation-delay: .1s; }
}
@keyframes ori{
  from{ opacity: 0; transform: translateY(-6px); }
}

/* ── 開く・畳む ─────────────────────────────────────────────
   出典欄・しらせ・フッター。開いた中身が、するりと出る */
@media (prefers-reduced-motion: no-preference){
  details[open] > .sr-b,
  details[open] > .sources-body,
  .sr-d[open] > div{ animation: hiraku .3s var(--uke) both; }
}
@keyframes hiraku{
  from{ opacity: 0; transform: translateY(-4px); }
}

/* ── 全部止める ─────────────────────────────────────────────
   動きが辛い人には、動きを減らすのではなく止める。 */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .maku{ display: none; }
}

/* ── 読み進みの線 ───────────────────────────────────────────
   記事の上端に一本。巻物をどこまで開いたかが分かるように。
   **本文の邪魔をしない太さ。**二ピクセルで足りる。 */
.yomi-sen{
  position: fixed; left: 0; right: 0; top: 0; height: 2px;
  z-index: 60; pointer-events: none;
  background: rgba(90, 80, 68, .10);
}
.yomi-sen i{
  display: block; height: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--shu, #b5443c), #c9a25a);
}
/* 半分まで読んだら、線の色が変わる。**読んだ印がついた合図** */
.yomi-sen.yonda i{ background: linear-gradient(90deg, #6d8a5a, #c9a25a); }

/* ── 読んだ印の案内 ─────────────────────────────────────── */
.ib-yonda{
  margin: .8rem 0 0; font-size: .78rem; line-height: 1.85; color: var(--sumi-soft);
}
.ib-yonda b{ color: var(--shu); }
#ib-wipe{
  display: inline-block; margin-left: .4rem; padding: .16rem .5rem;
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  font-family: inherit; font-size: .72rem; color: var(--sumi-soft); cursor: pointer;
}
#ib-wipe:hover{ border-color: var(--shu); color: var(--shu); }

@media (prefers-reduced-motion: reduce){
  .yomi-sen i{ transition: none; }
}