/* ============================================================
   Auguri! ─ View All 円ボタンのモーション（本番）
   ------------------------------------------------------------
   2026-09-15 高野様：データは ai どおり／動きは R4-4「内から外へ」

   ai のボタン（TOP のエステ帯・GARAGE88 帯）：
     __circle φ120（#f1eee6／GARAGE88 は 1px #999999 の内側罫）
     __label  View All（Cormorant 14px）
     __arrow  矢印 31×5.75（0.3px）
     __ring   円周文字 190×190（ai に埋め込まれた字形。白）
   位置・寸法・書体・色はすべて ai の実測のまま。足しているのは .va-pen（ホバー中だけ描く線）だけで、
   静止時は 1 本も描かない（dashoffset:1＋visibility:hidden）ので、線が絵を変えることはない。
   静止時に ai と違うのは、下のとおり **円周文字の環の畳み方（scale/rotate/濃度）だけ**。

   動き（R4-4「内から外へ」）── 文字と線の「距離」が主役
     1. 円周文字の環が、内側の少し小さく薄い位置から **外へ開きながら濃くなる**
        （scale .87・rotate -24°・opacity .42 → ai の位置）1.3 秒
     2. 空いた内側を、線が **遅れて（0.28 秒）一周する** 1.2 秒
     3. 矢印がわずかに進む（0.6 秒）
   静止時の状態は 2026-09-15 高野様のご指示で **R4-4 の原案どおり「畳んでおく」**（デモ 13 番の 2）。
   ＝ 円周文字の環は、静止時は一回り小さく薄い。ホバー／:focus-visible で ai の位置まで開き、離すと畳み直す。
   **この環だけは、静止時の見た目が ai と異なります**（ご指示による意図的な差。決定事項 #59）。
   円・View All・矢印は ai の実測位置のまま、1px も動かしていません。
   ============================================================ */

:root {
  --va-open: 1.3s;     /* 環が開く時間 */
  --va-draw: 1.2s;     /* 線が一周する時間 */
  --va-delay: .28s;    /* 線が遅れて出る時間 */
  --va-ink: rgba(0, 0, 0, .5);    /* 描線の色。ai の 0.5px 黒罫と同じ重さ（円は #f1eee6 の明るい面） */
  --va-guide: rgba(0, 0, 0, .12); /* 線が通る道（R4-4 の .g）。ホバーで薄く現れる */
}

/* ── ホバーで一周する線（ai には無い。静止時は未描画） ──
   円の内側 0.8r＝View All と矢印を囲む位置。R4-4 のデモで文字の環に対して線が 0.8 だったのと同じ比率。 */
.va-pen { visibility: hidden; pointer-events: none; }
.va-pen svg { display: block; width: 100%; height: 100%; }
.va-pen__g { fill: none; stroke: var(--va-guide); stroke-width: 1; opacity: 0; }
.va-pen__c {
  fill: none; stroke: var(--va-ink); stroke-width: 1; stroke-linecap: butt;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;      /* 1 = まだ 1 本も描かれていない */
  transform: rotate(-90deg); transform-origin: 50% 50%;   /* 12 時から時計回り */
}

/* ── 環：静止時は畳んでおく（R4-4 原案）。位置・寸法の CSS はクラス側（ai 実測）のまま、
      transform と濃度だけを動かす。ホバーで ai の位置へ開き、離すと畳み直す。 ── */
.viewall [data-va="ring"] {
  transform-origin: 50% 50%;
  transform: scale(.87) rotate(-24deg); opacity: .42;
  transition: transform var(--va-open) var(--e-out), opacity .8s var(--e-out);
}
.viewall [data-va="arrow"] { transition: transform .6s var(--e-out); }

/* ── ホバー／キーボード操作 ──
   タッチ端末では :hover が貼り付くので、ホバーは hover:hover のときだけ。
   キーボードの :focus-visible は端末を問わず同じ動きにする（§A11Y）。 */
@media (hover: hover) {
  .viewall:hover [data-va="ring"] { transform: none; opacity: 1; }
  .viewall:hover .va-pen { visibility: visible; }
  /* ここは both が正しい：カーソルを置いているあいだ「描き終わった環」を保つ必要がある。
     backwards にすると、描き終わった瞬間に静止状態（＝まだ描かれていない）へ戻ってしまう。
     動き終わりが静止状態と同じもの（見出しのにじみ・フッターの幕開け）は backwards。 */
  .viewall:hover .va-pen__g { animation: va-guide .6s var(--e-out) both; }
  .viewall:hover .va-pen__c { animation: va-draw var(--va-draw) cubic-bezier(.62,.04,.24,1) var(--va-delay) both; }
  .viewall:hover [data-va="arrow"] { transform: translateX(calc(4 * var(--s))); }
}
.viewall:focus-visible [data-va="ring"] { transform: none; opacity: 1; }
.viewall:focus-visible .va-pen { visibility: visible; }
.viewall:focus-visible .va-pen__g { animation: va-guide .6s var(--e-out) both; }
.viewall:focus-visible .va-pen__c { animation: va-draw var(--va-draw) cubic-bezier(.62,.04,.24,1) var(--va-delay) both; }
.viewall:focus-visible [data-va="arrow"] { transform: translateX(calc(4 * var(--s))); }

/* va-open：デモ 13 番の 1（静止＝ai）で使う。本番は transition で開く */
@keyframes va-open {
  from { transform: scale(.87) rotate(-24deg); opacity: .42; }
  to   { transform: none;                      opacity: 1; }
}
@keyframes va-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes va-guide {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 動きを減らす設定：環は開いた状態（＝ai の位置）で止め、線は出さない。
   動かさないぶん、静止時から文字が読める。 */
@media (prefers-reduced-motion: reduce) {
  .viewall [data-va="ring"] { transform: none !important; opacity: 1 !important; transition: none !important; }
  .viewall:hover [data-va="ring"], .viewall:focus-visible [data-va="ring"],
  .viewall:hover .va-pen__c, .viewall:focus-visible .va-pen__c,
  .viewall:hover .va-pen__g, .viewall:focus-visible .va-pen__g { animation: none !important; }
  .viewall:hover .va-pen, .viewall:focus-visible .va-pen { visibility: hidden !important; }
  .viewall [data-va="arrow"] { transition: none; }
  .viewall:hover [data-va="arrow"], .viewall:focus-visible [data-va="arrow"] { transform: none; }
}