/* ============================================================
 * Morioka Portal v2 — UI polish 実験 (branch: experiment/ui-polish)
 *
 * 成分:
 *   ① アクセント由来トークン (--mp-accent / --mp-like + color-mix 派生)
 *   ② View Transitions の shared-element morph (softnav 経路)
 *      - ページ間のクロスフェード自体は v2.css §18 の既存機能 (再定義しない)。
 *        ここで足すのは §18 が「Chrome の attr() 制約で保留」としていた
 *        カード⇔詳細の morph のみ。
 *      - 命名は softnav.js が「その瞬間の 1 要素」にだけ .mp-vt-post を付与。
 *        (リポストで同一投稿が TL に 2 回出るため、ID 由来の静的命名は
 *         文書内で衝突し transition ごとスキップされる。動的 1 要素命名が正)
 *   ③ いいねバースト + count bump (fx.js が DOM を生やす)
 *
 * 全アニメーションは prefers-reduced-motion: reduce で無効化
 * (root の kill は v2.css §18 に既存。ここでは named group を含む全体を殺す)。
 * ============================================================ */

/* ---------- ① tokens ---------- */
:root {
 --mp-accent: #1fb9c6;
 /* 森岡ブランドの teal (shop 系と同族) */
 --mp-like: var(--action-like, #f91880);
 /* 既存 like ピンクを継承 */
}

/* フォーカスリング: アクセント由来で統一 (キーボード操作時のみ) */
.action-btn:focus-visible,
.post .author-link:focus-visible,
.back-btn:focus-visible {
 outline: 2px solid color-mix(in srgb, var(--mp-accent) 70%, transparent);
 outline-offset: 2px;
 border-radius: 8px;
}

::selection {
 background: color-mix(in srgb, var(--mp-accent) 30%, transparent);
}

/* ---------- ② shared-element morph (softnav 用) ---------- */
/* JS が付け外しする。@view-transition の opt-in は v2.css §18 に既存 */
.mp-vt-post {
 view-transition-name: mp-active-post;
}

::view-transition-group(mp-active-post) {
 animation-duration: 230ms;
 animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-old(mp-active-post) {
 animation-duration: 120ms;
}

::view-transition-new(mp-active-post) {
 animation-duration: 160ms;
}

/* ---------- ③ いいねバースト ---------- */
.mp-burst {
 position: fixed;
 left: 0;
 top: 0;
 width: 0;
 height: 0;
 z-index: 9999;
 pointer-events: none;
}

.mp-burst .p {
 position: absolute;
 left: 0;
 top: 0;
 width: var(--s);
 height: var(--s);
 border-radius: 50%;
 background: var(--c);
 transform: translate(-50%, -50%);
 animation: mp-burst-fly 640ms cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}

@keyframes mp-burst-fly {
 0% {
  transform: translate(-50%, -50%) translate(0, 0) scale(1);
  opacity: 1;
 }

 100% {
  transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.4);
  opacity: 0;
 }
}

.mp-burst .ring {
 position: absolute;
 left: 0;
 top: 0;
 width: 34px;
 height: 34px;
 border-radius: 50%;
 border: 2px solid var(--mp-like);
 transform: translate(-50%, -50%) scale(0.3);
 opacity: 0.9;
 animation: mp-burst-ring 420ms ease-out forwards;
}

@keyframes mp-burst-ring {
 100% {
  transform: translate(-50%, -50%) scale(1.6);
  opacity: 0;
  border-width: 1px;
 }
}

/* count 更新時の bump (fx.js が .mp-bump を付ける) */
.post-actions .count {
 display: inline-block;
}

.post-actions .count.mp-bump {
 animation: mp-count-bump 560ms cubic-bezier(0.22, 0.9, 0.28, 1.25);
}

@keyframes mp-count-bump {
 0% {
  transform: translateY(35%);
  opacity: 0;
 }

 100% {
  transform: translateY(0);
  opacity: 1;
 }
}

/* いいね 0→1 でアイコンが横ズレする問題の修正・第 2 版 (モバイル)。
   第 1 版 (カウント絶対配置) は取りやめ:
   - left:100% の基準がボタン右端で、モバイルの flex:1 ボタン (~70px) では
     アイコン (30px) から ~20px も離れて表示された。
   - さらに iOS Safari には <button> が絶対配置の包含ブロックにならない
     歴史的癖があり、実機で配置が崩れる。
   本版は in-flow のまま「空カウントにも 1 桁分の幅を常時予約」する:
   - php-style.css:8417 の .count:empty{display:none} を上書きし、
     空でも min-width 分だけ居座らせる。
   - 予約幅はフォント推測に依存させない: 空カウントには ::after で
     visibility:hidden の「0」を実フォントのまま置き、予約幅 = 実数字幅に
     一致させる (base の tabular-nums 併用で全数字が同一 advance)。
     min-width 0.8em は「::after が効かない環境」向けの床 (数字グリフは
     SF/Helvetica 系で約 0.56-0.61em なので 0.8em は常に上回る)。
     min-width は空・非空の両状態に等しく効くため、どちらが支配しても
     空 = "1" の幅が一致し、0→1 で 1px も動かない。
   - 2 桁以上への成長 (9→10) は従来どおり僅かに広がる (稀・許容)。
   アイコンと数字の間隔は従来と同じ (padding-left 2px、8593-8596 準拠)。 */
@media (max-width: 767px) {
  .post-actions .action-btn .count,
  .post-actions .action-btn .count:empty {
    display: inline-block;
    min-width: 0.8em;
    text-align: left;
  }
  /* 実フォントの数字 1 個ぶんを不可視で敷いて幅を予約 (:empty の判定に
     擬似要素は影響しない。数字が入ると :empty が外れて ::after は消える) */
  .post-actions .action-btn .count:empty::after {
    content: "0";
    visibility: hidden;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
 .mp-burst {
  display: none !important;
 }

 .post-actions .count.mp-bump {
  animation: none !important;
 }

 ::view-transition-group(*),
 ::view-transition-image-pair(*),
 ::view-transition-old(*),
 ::view-transition-new(*) {
  animation: none !important;
 }
}