/* ============================================================
   Auguri! ─ 手描きパーツのモーション（本番）
   ------------------------------------------------------------
   data-calli-kind は build/gen.py が書き出し名から自動で付ける。
     orn  … 飾りパーツ（飾り罫）   → 一筆書き。ai のアウトラインから出した筆の軌跡に沿って現れる
     mark … 短い筆記体・手書き数字 → 運筆。左から右へ書かれる
     line … 長い筆記体（文・フレーズ）→ 動かさない。読ませる文字なので出たときから読める
     logo … ロゴ                   → 動かさない。全ページのヘッダー・フッターで毎回出るため

   一筆書きの仕組み：SVG の中に <mask> を置き、その中で「筆の軌跡」を太めの線で描いてある。
   stroke-dashoffset を 1 → 0 に動かすと、ai の形そのものが筆の進む順に現れる。
   形は ai のまま（終わった状態は ai と 1px も違わない）。

   JS が .is-armed を付けてから隠すので、JS が動かない環境では最初から見えている。
   ============================================================ */

/* 筆速（1920px 基準の px/秒）。運筆・一筆書きとも同じ手で書くので 1 つの値。
   2026-09-15：900 → 600 →「ゆっくり(450)と標準(600)の中間」の **525** に確定（高野様）。
   ここを変えるだけで全箇所の速さが変わる。時間＝長さ÷筆速（最短 0.6 秒・最長 2.6 秒）。 */
:root { --pen-speed: 525; }

/* 既定は「全部描き終わった状態」＝ ai のまま。
   マスクは動かしている間だけ当てる（マスクを通すと、止まった絵でも縁の中間色が
   わずかに変わるため）。終わったら外すので、止まった絵は ai と 1px も違わない。 */
/* 破線は線ごとの **実長**（--L・--G は build/pen.py が書く）。pathLength="1" は使わない（2026-09-20：
   対応しないブラウザでは 1 単位の点線が全体に出て「描く前から線が見える」ため）。
   間（--G）は長さより 2 割長く：ちょうど同じだと、隠している状態で線の終端に 1px の切れ端が出る */
.calli .pn { stroke-dasharray: var(--L, 1) var(--G, 1); stroke-dashoffset: 0; }
/* 10px 未満の断片（.pn-dot）は動かさず最初から見せる（2026-09-20 筆順の整理：cat2__pick-orn の 4px の欠片など） */
.calli .pn-dot { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
.calli[data-calli-kind="orn"].is-armed .pen-t,
.calli[data-calli-kind="orn"].is-in .pen-t { mask: var(--pen); -webkit-mask: var(--pen); }

/* 動き出す前（armed で、まだ in でない）は、マスク・切り抜きに頼らず opacity で確実に消す。
   切り抜きを箱の外に置く／dash を端に置く、だけだと GPU 合成の都合で線の断片が残ることがある
   （2026-09-15 高野様ご指摘：書き出す前に一部の線が残る。スクリーンショットには写らない）。 */
.calli[data-calli-kind="orn"].is-armed:not(.is-in),
.calli[data-calli-kind="mark"].is-armed:not(.is-in) { visibility: hidden; }
/* 2 度目のご指摘（0915）：opacity:0 でも GPU 側に絵が残ることがあるため、
   visibility:hidden（描画しない）にし、飾りは JS が描き始めるまで中身を DOM から外す（calli.js） */

/* ── 一筆書き（飾りパーツ） ───────────────────────────── */
.calli[data-calli-kind="orn"].is-armed .pn { stroke-dashoffset: var(--L, 1); }
/* both が正しい：.is-armed が残ったままなので、backwards にすると描き終わった瞬間に
   stroke-dashoffset:1（＝まだ描かれていない）へ戻る。保つべき終わりの状態がある動きは both。 */
.calli[data-calli-kind="orn"].is-in .pn {
  animation: pen-draw calc(var(--pen-dur, 1s) * var(--l, 1)) linear
             calc(var(--calli-delay, 0s) + var(--pen-dur, 1s) * var(--o, 0)) both;
}
@keyframes pen-draw {
  from { stroke-dashoffset: var(--L, 1); }
  to   { stroke-dashoffset: 0; }
}

/* ── 運筆（短い筆記体・手書き数字） ─────────────────────
   切り抜きの右端を少し右上がりに傾け、筆の進む向きに合わせる。
   速さは一定（--pen-speed）なので、長い語ほど時間がかかる。 */
.calli[data-calli-kind="mark"].is-armed { clip-path: polygon(-14% 0%, -6% 0%, -14% 100%, -14% 100%); }
.calli[data-calli-kind="mark"].is-in { animation: calli-wipe var(--calli-dur, .9s) cubic-bezier(.42,0,.32,1) var(--calli-delay, 0s) both; }
@keyframes calli-wipe {
  from { clip-path: polygon(-14% 0%, -6% 0%, -14% 100%, -14% 100%); }
  to   { clip-path: polygon(-14% 0%, 114% 0%, 106% 100%, -14% 100%); }
}

/* ai 突き合わせ（.compare）：必ず描き終わった絵・動かない（2026-09-20 中間レビュー A-4）。
   JS 側（calli.js）も .compare では動かさないが、CSS でも二重に止めておく */
.compare .calli { visibility: visible !important; clip-path: none !important; animation: none !important; }
.compare .calli .pn { stroke-dashoffset: 0 !important; animation: none !important; }
.compare .calli[data-calli-kind="orn"] .pen-t { mask: none !important; -webkit-mask: none !important; }

/* 動きを減らす設定：最初から見えている */
@media (prefers-reduced-motion: reduce) {
  .calli.is-armed, .calli.is-in { animation: none !important; clip-path: none !important; visibility: visible !important; }
  .calli .pn { stroke-dashoffset: 0 !important; animation: none !important; }
}