/* よろずテック共通の「動きの部品」（D-515・2026-10-24）
   Mihiro「動きのあるアクションは、Webページでも、スタッフが触る管理画面でも、ふんだんに」
   「動きがあると人間はそれを見ようとする。おしゃれで先進的なイメージも」。
   参考：Instagram の UI アニメーション集（回る輪・弾む点・脈打つ丸・砂時計）、
         Dashboard V12（カードがふわっと出る・状態の色札・アイコンの吹き出し）、
         Sidebar UI V2（光る線・すべる帯・細い形と広い形）。

   ★ 正本はこのファイル（よろずテック/共通部品/yz-motion/）。各システムには写しを置く。直したら全部に配り直す。
   ★ 色は各システムの変数を借りる：--yz-accent（無ければ currentColor）。
   ★ 動きを減らす設定の端末では、止めるか、ゆっくりにする（いちばん下）。
   ★ 「見えない状態で待たせない」。出てくる動きは、最初から見えている物に軽く付けるだけ。 */

/* ── 1. 押したボタンの「処理中」（yz-motion.js が aria-busy をつける）────────── */
[aria-busy="true"]{cursor:progress !important}
button[aria-busy="true"],a[aria-busy="true"],input[type="submit"][aria-busy="true"]{
  position:relative;opacity:1 !important;-webkit-text-fill-color:transparent;pointer-events:none}
button[aria-busy="true"]::after,a[aria-busy="true"]::after{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
  -webkit-text-fill-color:initial;animation:yz-spin .75s linear infinite}
:root:has([aria-busy="true"]) button:disabled{cursor:progress}

/* ── 2. 待ちの印（場面で使い分ける）─────────────────────────────────
   <span class="yz-ring"></span>              回る輪（ボタン・読み込み）
   <span class="yz-dots"><i></i><i></i><i></i></span>  弾む3つの点（「手続き中」の文の後ろ）
   <span class="yz-pulse"></span>             脈打つ点（「進行中」「受付中」などの札の頭）
   <span class="yz-bars"><i></i><i></i><i></i><i></i></span>  伸び縮みする棒（集計中・グラフの読み込み）
   <span class="yz-glass"></span>             砂時計（時間がかかる処理・お取り置き中）              */
.yz-ring{display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.15em;
  border:2px solid currentColor;border-right-color:transparent;animation:yz-spin .75s linear infinite}
.yz-dots{display:inline-flex;gap:.28em;vertical-align:middle;margin-inline-start:.4em}
.yz-dots i{width:.32em;height:.32em;border-radius:50%;background:currentColor;animation:yz-hop 1.1s ease-in-out infinite}
.yz-dots i:nth-child(2){animation-delay:.15s}.yz-dots i:nth-child(3){animation-delay:.3s}
.yz-pulse{display:inline-block;width:.5em;height:.5em;border-radius:50%;background:currentColor;vertical-align:.08em;
  margin-inline-end:.4em;box-shadow:0 0 0 0 currentColor;animation:yz-pulse 1.6s ease-out infinite}
.yz-bars{display:inline-flex;align-items:flex-end;gap:2px;height:1em;vertical-align:-.1em}
.yz-bars i{width:3px;height:100%;background:currentColor;border-radius:2px;transform-origin:bottom;animation:yz-bar 1s ease-in-out infinite}
.yz-bars i:nth-child(2){animation-delay:.12s}.yz-bars i:nth-child(3){animation-delay:.24s}.yz-bars i:nth-child(4){animation-delay:.36s}
.yz-glass{display:inline-block;width:.75em;height:1em;vertical-align:-.12em;position:relative;animation:yz-flip 2.4s ease-in-out infinite}
.yz-glass::before{content:"";position:absolute;inset:0;background:currentColor;
  clip-path:polygon(0 0,100% 0,100% 8%,58% 50%,100% 92%,100% 100%,0 100%,0 92%,42% 50%,0 8%)}

/* ── 3. 押した手応え（波紋）── yz-motion.js がボタンを押した所から広げる（data-yz-noripple で外す）── */
/*  ボタン本体は切らない（外にはみ出す札などを消さない）。中に重ねた層の中だけで広がる  */
.yz-wavebox{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.yz-wave{position:absolute;border-radius:50%;pointer-events:none;
  background:currentColor;opacity:.2;transform:scale(0);animation:yz-wave .6s ease-out forwards}

/* ── 4. 出てくる動き（最初から見えている。少し下から、少しずつ遅れて）──────────
   <div data-yz-stagger> の子が順に。<div data-yz-in> はそれ自体が。                         */
[data-yz-stagger].yz-go>*{animation:yz-up .5s cubic-bezier(.2,.7,.2,1) both}
[data-yz-stagger].yz-go>*:nth-child(2){animation-delay:.06s}
[data-yz-stagger].yz-go>*:nth-child(3){animation-delay:.12s}
[data-yz-stagger].yz-go>*:nth-child(4){animation-delay:.18s}
[data-yz-stagger].yz-go>*:nth-child(5){animation-delay:.24s}
[data-yz-stagger].yz-go>*:nth-child(6){animation-delay:.30s}
[data-yz-stagger].yz-go>*:nth-child(n+7){animation-delay:.36s}
[data-yz-in].yz-go{animation:yz-up .55s cubic-bezier(.2,.7,.2,1) both}

/* ── 5. すべる帯（メニュー）── <nav data-yz-nav> の中の a / button。選んでいる物に .on か aria-current ──
   指を乗せた所へ帯がすべり、離すと選んでいる所へ戻る。選んでいる物には光る線。                 */
/*  :where＝優先度0。画面側の position（固定のメニュー等）を上書きしない  */
:where([data-yz-nav]){position:relative}
[data-yz-nav]>.yz-slide{position:absolute;left:0;top:0;border-radius:8px;pointer-events:none;z-index:0;
  background:color-mix(in srgb,var(--yz-accent,currentColor) 13%,transparent);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1),height .32s cubic-bezier(.2,.8,.2,1),opacity .2s}
[data-yz-nav]>.yz-glow{position:absolute;left:0;top:0;width:3px;border-radius:3px;pointer-events:none;z-index:1;
  background:var(--yz-accent,currentColor);box-shadow:0 0 10px 1px var(--yz-accent,currentColor);
  transition:transform .38s cubic-bezier(.2,.8,.2,1),height .38s cubic-bezier(.2,.8,.2,1),opacity .2s}
[data-yz-nav][data-yz-axis="x"]>.yz-glow{width:auto;height:3px}
:where([data-yz-nav]>a,[data-yz-nav]>button){position:relative;z-index:1}

/* ── 6. アイコンの小さな反応（指を乗せたら、少し弾む）── class="yz-ico" ─────────── */
.yz-ico svg,svg.yz-ico{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
:is(a,button):hover>.yz-ico svg,:is(a,button):hover>svg.yz-ico,:is(a,button):hover .yz-ico svg{transform:translateY(-2px) scale(1.08)}

/* ── 7. できました（右下に出て消える。チェックが描かれる）── yzToast('保存しました') ── */
.yz-toast{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:12px;background:#1f2a26;color:#fff;font:600 14px/1.4 system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.25);animation:yz-toast-in .35s cubic-bezier(.2,.8,.2,1) both}
.yz-toast.yz-out{animation:yz-toast-out .3s ease-in forwards}
.yz-toast svg{width:22px;height:22px;flex:none}
.yz-toast svg circle{stroke:#7fd1a0;stroke-width:2;fill:none;stroke-dasharray:63;stroke-dashoffset:63;animation:yz-draw .45s .05s ease-out forwards}
.yz-toast svg path{stroke:#7fd1a0;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;animation:yz-draw .3s .4s ease-out forwards}
.yz-toast.ng svg circle,.yz-toast.ng svg path{stroke:#ff9a8a}

/* ── 8. 数字（data-yz-count）は yz-motion.js が 0 から数え上げる。桁がずれないように ── */
[data-yz-count]{font-variant-numeric:tabular-nums}

/* ── 9. 転がる時計（data-yz-clock）── 替わった数字だけ、古いのが上へ抜け、新しいのが下から入る ──
   見本：Instagram「Dashboard Animations」の Time Tracker（Mihiro・2026-10-24）。
   .yz-clockcard を外の器に付けると、暗い地に細い斜めの線の札になる（色は --yz-clock-bg）  */
.yz-clock{display:inline-flex;align-items:baseline;font-variant-numeric:tabular-nums;white-space:nowrap}
.yz-clock .yz-dg{display:inline-grid;overflow:hidden;line-height:1.15;height:1.15em;vertical-align:bottom}
/*  転がる瞬間に数字の縁へ赤い色収差がチラッと出るのを止める（Mihiro・2026-10-24）。
    文字をグレースケール描画に固定し、常に自前のレイヤーに置いてラスタライズのし直しを防ぐ  */
.yz-clock .yz-dg>b{grid-area:1/1;font-weight:inherit;text-align:center;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.yz-clock .yz-dg>b.yz-in{animation:yz-roll-in .45s cubic-bezier(.2,.8,.2,1) both}
.yz-clock .yz-dg>b.yz-out{animation:yz-roll-out .45s cubic-bezier(.4,0,.6,1) forwards}
.yz-clock .yz-col{padding:0 .04em;opacity:.7;position:relative;top:-.06em}
.yz-clockcard{position:relative;overflow:hidden;color:#EEF3EF;
  background:
    repeating-linear-gradient(118deg,transparent 0 13px,color-mix(in srgb,#fff 5%,transparent) 13px 14px),
    radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--yz-accent,#3c8a63) 34%,transparent),transparent 60%),
    var(--yz-clock-bg,#13261d)}

/* ── 11. 時刻で移り変わる景色（data-yz-sky）── 器に position があること。濃さは --yz-sky-opacity、上に重ねる色は --yz-sky-veil  */
:where([data-yz-sky]){position:relative;isolation:isolate}
.yz-skyimg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:center/cover no-repeat;
  opacity:0;transition:opacity 2.4s ease}
.yz-skyimg.on{opacity:var(--yz-sky-opacity,.42)}
.yz-skyveil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--yz-sky-veil,linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 40%,rgba(0,0,0,.45)))}

/* ── 10. 画面を移るとき ── ブラウザの切り替わり演出（@view-transition）は使わない。
   次の画面の準備に時間がかかると、その間が暗転して見えた（Windows ではもっと長い・Mihiro 2026-10-24）。
   使わなければ、ブラウザは次の画面ができるまで前の画面を出したままにする。
   ページごと読み直す画面は、各システムの側で中身だけに yz-vt-in を付ける（門は adminCss の .adroot main）。
   Next.js の画面遷移は data-yz-page（yz-motion.js）。  */

@keyframes yz-spin{to{transform:rotate(360deg)}}
@keyframes yz-hop{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-.32em);opacity:1}}
@keyframes yz-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}100%{box-shadow:0 0 0 .55em transparent}}
@keyframes yz-bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes yz-flip{0%,40%{transform:rotate(0)}50%,90%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes yz-wave{to{transform:scale(1);opacity:0}}
@keyframes yz-up{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes yz-toast-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes yz-toast-out{to{opacity:0;transform:translateY(8px)}}
@keyframes yz-draw{to{stroke-dashoffset:0}}
@keyframes yz-roll-in{from{transform:translateY(85%);opacity:0}to{transform:none;opacity:1}}
@keyframes yz-roll-out{to{transform:translateY(-85%);opacity:0}}
@keyframes yz-vt-in{from{opacity:0;transform:translateY(10px)}}

@media (prefers-reduced-motion:reduce){
  button[aria-busy="true"]::after,a[aria-busy="true"]::after,.yz-ring{animation-duration:2.4s}
  .yz-dots i,.yz-pulse,.yz-bars i,.yz-glass{animation:none}
  [data-yz-stagger].yz-go>*,[data-yz-in].yz-go,.yz-toast{animation:none}
  [data-yz-nav]>.yz-slide,[data-yz-nav]>.yz-glow{transition:none}
  .yz-wavebox{display:none}
  .yz-clock .yz-dg>b.yz-in,.yz-clock .yz-dg>b.yz-out{animation:none}.yz-clock .yz-dg>b.yz-out{display:none}
  .yz-skyimg{transition:none}
}