/* ============================================================
   Auguri! ─ マウスカーソル「面で満ちる」（本番・2026-09-17 高野様ご指示）
   ------------------------------------------------------------
   デモ 23 番の **4 面で満ちる** を採用。View All ボタンの R4-4「内から外へ」を
   カーソルに写したものです。

     休んでいるとき … 点線の環が、内側に小さく薄く畳まれている（＋中心に 5px の点）
     押せるものの上 … ① 環が **外へ広がりながら消える**（円が二重に見えないように）
                      ② 内側が **面**で満ちる（**半透明**。濃い帯ではリネン／淡い地では墨をうっすら）
                      ③ 遅れて、面の上を線が 12 時から時計回りに一周する

   ①で環を消すのは、View All のような円いボタンの上で **円が二重・三重になってくどい**ため
   （2026-09-17 高野様ご指摘）。ただ消すのではなく「外へ広がりながら」消えるので、
   R4-4 の「内から外へ」という所作はそのまま残ります。

   高野様ご指示（2026-09-17）「ただし色が着いた時に見づらいので**半透明**に」。
   面は `--acur-fill`（既定 .6）で透かしてあり、下の文字・写真・ボタンが透けて見えます。
   濃さは 1 か所（`--acur-fill`）で変えられます。**2026-09-17 高野様「1 よく透ける」で確定**（.45）。

   きまり
     ・**本来の矢印カーソルは消しません**（押せる場所が分かることを優先）
     ・押せるもの（リンク・ボタン・入力欄）の上でだけ表情が変わります
     ・墨か白かは、いまカーソルの下にある面の **実際の色**で決めます
     ・面が出ているあいだは、面の上に乗る線と点を **墨**に固定します
       （半透明でも面は明るいので、白い線は消えてしまうため）
     ・動きを減らす設定・指でさわる機器では出しません
     ・ai 突き合わせ（.compare）では出しません
     ・**版面は 1px も動きません**（描くのは画面に固定した 1 枚だけ・位置は transform のみ）

   時間は View All と同じ形のまま 0.55 倍（環 0.72 秒／線 0.66 秒／遅れ 0.15 秒）。
   カーソルはボタンほど長く留まらないためです。
   ============================================================ */

:root {
  --acur-fill: .45;    /* 面の濃さ（0＝透明／1＝べた）。2026-09-17 高野様「1 よく透ける」で確定 */
  --acur-r: 96;        /* 描く箱の大きさ（1920px 基準の px） */
}

.acur {
  position: fixed; left: 0; top: 0; z-index: 900;
  pointer-events: none; will-change: transform;
  color: var(--c-ink);
  transform: translate3d(var(--acx, -300px), var(--acy, -300px), 0);
}
.acur.is-dark { color: var(--c-ink-w); }
/* `.acur` は 0×0 の点なので、`02-base.css` の `img, svg, video { max-width:100% }` に
   当たると SVG の幅が 0 になる。ここで外す（再発防止 32）。 */
.acur__in {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  max-width: none; max-height: none;
}

@media (prefers-reduced-motion: reduce) { .acur { display: none; } }
@media (pointer: coarse)                { .acur { display: none; } }
.compare .acur { display: none !important; }

/* ── 中心の点 ── */
.acur__dot {
  width: calc(5 * var(--s)); height: calc(5 * var(--s));
  border-radius: 50%; background: currentColor; opacity: .72;
  transition: background-color .3s var(--e-out), opacity .3s var(--e-out);
}
.acur.is-over .acur__dot { background: var(--c-ink); opacity: .55; }

.acur__svg { display: block; overflow: visible; }
.acur__svg circle { vector-effect: non-scaling-stroke; }

/* ── ① 環：休みは内側で小さく薄い。押せるものの上では **外へ広がりながら消える** ──
   環は面（r29）より外（r36）にあるので、色は **地の明暗**に従う。

   2026-09-17 高野様「ボタンに合わせた際に円が二重になってくどいので、
   ボタンに置いた時のみマウスカーソルの外周の円の線がなくなるなどは可能ですか？」

   → 可能です。ただし **ただ消すと「内から外へ」の所作まで消えてしまう**ので、
      **外へ広がりながら消える**ようにしました。開く動きは残り、
      落ち着いたあとの絵は「面＋その中を一周する線」の **円 1 つ**だけになります。
      （View All のような円いボタンの上で、円が 3 重に重なるのを避けるため） */
.acur__ring {
  fill: none; stroke: currentColor; stroke-width: .5;
  stroke-dasharray: 1 2.4; stroke-linecap: round;
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: scale(.72) rotate(-24deg); opacity: .42;
  transition: transform .72s var(--e-out), opacity .5s var(--e-out);
}
.acur.is-over .acur__ring { transform: scale(1.22) rotate(0deg); opacity: 0; }

/* デモ 25 番でだけ、環の扱いを切り替えられるようにしてある（本番は上の「すっと消える」）。
     b … 開かずに、その場でふっと消える
     c … これまでどおり残す（見比べ用） */
body[data-arn="b"] .acur.is-over .acur__ring {
  transform: scale(.72) rotate(-24deg); opacity: 0;
  transition: opacity .18s var(--e-out);
}


/* ── ② 面：半透明で、内から外へ広がる ──
   **面の色も、地の明暗で反転させます**（サイトの他の部分と同じ約束）。

     濃い帯の上 … リネン #f1eee6 を `--acur-fill`（既定 .6）で
     淡い地の上 … 墨をうっすら（`--acur-fill` の 17%＝既定 .102）

   はじめは「どこでもリネン」にしていましたが、実測すると
   **淡い地（#f9f7f3＝249）の上ではリネン（241）との差が 4 しかなく、面が見えません**でした。
   淡い地では墨をうっすら敷くことで、面があることが分かり、下の文字も透けて読めます
   （墨 10%：地 249 → 面 224。差 25）。 */
.acur__disc {
  fill: var(--c-ink);
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: scale(.2); opacity: 0;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .4s var(--e-out);
}
.acur.is-dark .acur__disc { fill: var(--c-linen); }
.acur.is-over .acur__disc { transform: none; opacity: calc(var(--acur-fill) * .17); }
.acur.is-over.is-dark .acur__disc { opacity: var(--acur-fill); }

/* ── ③ 線：**面のふちそのもの**（r29）を 12 時から時計回りに一周 ──
   面と線を同じ半径にしてあります。少しでもずらすと、円いボタンの上で
   **面のふちと線が二重の輪に見えて、くどくなる**ためです（2026-09-17 高野様ご指摘）。
   同じ半径なら「ふちが描かれていく 1 本の円」に見えます。 */
.acur__pen {
  fill: none; stroke: currentColor; stroke-width: .5;
  transform: rotate(-90deg); transform-box: fill-box; transform-origin: 50% 50%;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;   /* 1 = まだ 1 本も描かれていない */
}
/* both が正しい：カーソルを載せているあいだ「描き終わった環」を保つ（viewall.css と同じ理由） */
.acur.is-over .acur__pen { animation: acur-draw .66s cubic-bezier(.62,.04,.24,1) .15s both; }
@keyframes acur-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 面の上に乗るものは墨に固定（半透明でも面は明るいので、白い線は消えてしまう） */
.acur.is-over .acur__pen { stroke: var(--c-ink); }

/* ── 自分の動きを持っているボタンの上では、カーソルは **点だけになって譲る** ──
   2026-09-17 高野様「ボタンに合わせた際に円が二重になってくどい」。

   調べたところ、二重の正体は **View All ボタン自身も同じ R4-4 の線を描いている**ことでした。
   ボタンの中で「線が一周する」動きが、ボタンとカーソルで **二度**起きていたのです。
   外周の環を消すだけでは、この二重は解けません。

   そこで、**自分の動きを持っているもの**（いまは View All）の上では、
   カーソルは面も線も出さず、小さな点だけになります。ボタンの所作が主役になります。 */
.acur.is-quiet .acur__ring,
.acur.is-quiet .acur__disc,
.acur.is-quiet .acur__pen { transition: opacity .3s var(--e-out); }
body:not([data-arn="b"]):not([data-arn="c"]) .acur.is-quiet .acur__ring,
body:not([data-arn="b"]):not([data-arn="c"]) .acur.is-quiet .acur__disc,
body:not([data-arn="b"]):not([data-arn="c"]) .acur.is-quiet .acur__pen { opacity: 0; }
.acur.is-quiet .acur__dot { opacity: .72; background: currentColor; }

/* 押しているあいだ ── すこし縮む（紙に置いた手ごたえ） */
.acur.is-down .acur__svg { transform: translate(-50%, -50%) scale(.94); }

/* デモ 25 番の 3「これまで（全部出す）」では、外周の環も戻す */
body[data-arn="c"] .acur.is-over .acur__ring { transform: none; opacity: .9; }