/* FIDIA Heatmap モーションレイヤー（DESIGN.md「モーション」）。
   外部ライブラリなし。transform / opacity / filter / clip-path を中心に動かす。
   prefers-reduced-motion: reduce では不要な動きをすべて止める（末尾）。 */

:root {
  --m-fast: 140ms;
  --m-base: 240ms;
  --m-slow: 420ms;
  --m-page: 520ms;
  --m-ease: cubic-bezier(.2, .8, .2, 1);
  --m-ease-out: cubic-bezier(.16, 1, .3, 1);
  --m-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- ページ遷移（View Transitions API。非対応ブラウザでは何も起きない） ---------- */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: fhm-sidebar; }
::view-transition-group(fhm-sidebar) { animation: none; }
::view-transition-old(fhm-sidebar) { display: none; }
::view-transition-new(fhm-sidebar) { animation: none; }
::view-transition-old(root) { animation: m-vt-out var(--m-fast) var(--m-ease) both; }
::view-transition-new(root) { animation: m-vt-in var(--m-base) var(--m-ease-out) both; }
/* 共有要素（一覧のサイト名 -> 詳細の見出し など）は位置と大きさをなめらかに移す */
::view-transition-group(*):not(root):not(fhm-sidebar) { animation-duration: var(--m-page); animation-timing-function: var(--m-ease-out); }
@keyframes m-vt-out { to { opacity: 0; } }
@keyframes m-vt-in { from { opacity: 0; } }

/* ---------- 汎用キーフレーム ---------- */
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-modal-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes m-modal-out { to { opacity: 0; transform: translateY(4px) scale(.97); } }
@keyframes m-backdrop-out { to { opacity: 0; } }
@keyframes m-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
@keyframes m-toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.97); } }
@keyframes m-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes m-ping { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* ---------- 初回表示・スクロール到達で出す要素の下準備（JS が付け外し） ---------- */
.m-pre { opacity: 0; }
.m-clip0 { clip-path: inset(0 100% 0 0 round 99px); }

/* ---------- ボタン・カード ---------- */
.btn { transition: background var(--m-fast) var(--m-ease), box-shadow var(--m-base) var(--m-ease), translate var(--m-base) var(--m-ease), transform var(--m-fast) var(--m-ease); }
.btn:hover:not(:disabled):not([disabled]) { translate: 0 -1px; box-shadow: 0 6px 16px rgba(31, 41, 55, .14); }
.btn-primary:hover:not(:disabled):not([disabled]) { box-shadow: 0 1px 2px rgba(30, 41, 59, .15), 0 8px 20px rgba(37, 99, 235, .3); }
.btn:active:not(:disabled):not([disabled]) { transform: scale(.97); translate: 0 0; }
.hm-btn { transition: background var(--m-fast) var(--m-ease), box-shadow var(--m-base) var(--m-ease), translate var(--m-base) var(--m-ease), transform var(--m-fast) var(--m-ease); }
.hm-btn:hover:not(:disabled) { translate: 0 -1px; }
.hm-btn:active:not(:disabled) { transform: scale(.97); translate: 0 0; }
.site-card { transition: background var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease); }
.site-card:hover { transform: translateY(-2px); }
.site-card:active { transform: translateY(-1px) scale(.992); }
.srow:not(.srow-head), .page-row { transition: background var(--m-base) var(--m-ease), translate var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease); }
.srow:not(.srow-head):hover, .page-row:hover { translate: 0 -1px; }
.star-btn { transition: background var(--m-fast), color var(--m-fast), transform var(--m-fast) var(--m-ease); }
.star-btn:active { transform: scale(.9); }
.star-btn .ico { transition: fill var(--m-base) var(--m-ease); }
.m-burst { position: absolute; inset: 3px; border-radius: 50%; border: 2px solid var(--star-fill); pointer-events: none; z-index: 3; }

/* ---------- グループ開閉（シェブロン） ---------- */
.grp-chev { transition: transform var(--m-base) var(--m-ease); }

/* ---------- セグメント: スライドするピル（JS が --px/--pt/--pw/--ph を設定。無い場合は従来の is-on 表示） ---------- */
.seg, .hm-seg, .hm-tabs { position: relative; }
.has-pill::before { content: ""; position: absolute; left: 0; top: 0; width: var(--pw, 0px); height: var(--ph, 0px); transform: translate(var(--px, 0px), var(--pt, 0px)); border-radius: 999px; background: #fff; box-shadow: inset 0 1px 0 #fff, 0 1px 4px rgba(31, 41, 55, .2), 0 0 0 .5px rgba(31, 41, 55, .1); pointer-events: none; z-index: 0; transition: transform var(--m-slow) var(--m-ease-out), width var(--m-slow) var(--m-ease-out), height var(--m-slow) var(--m-ease-out), opacity var(--m-fast); }
.hm-seg.has-pill::before, .hm-tabs.has-pill::before { background: var(--thumb, #fff); }
.has-pill.pill-init::before { transition: none; }
.has-pill.pill-none::before { opacity: 0; }
.has-pill > .seg-btn, .has-pill > .hm-tab, .hm-seg.has-pill > button { position: relative; z-index: 1; }
.seg.has-pill > .seg-btn.is-on { background: transparent; box-shadow: none; }
.hm-seg.has-pill > button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.hm-tabs.has-pill > .hm-tab[aria-selected="true"] { background: transparent; box-shadow: none; }
.seg-btn, .hm-seg button, .hm-tab { transition: color var(--m-base) var(--m-ease), background var(--m-fast); }

/* ---------- 計測スイッチ ---------- */
.switch { transition: background var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease); }
.switch::after { transition: transform var(--m-slow) var(--m-spring); transform-origin: left center; }
.switch[aria-checked="true"]::after { transform-origin: right center; }
.switch:active:not(:disabled)::after { transform: scaleX(1.28); }
.switch[aria-checked="true"]:active:not(:disabled)::after { transform: translateX(16px) scaleX(1.28); }
.switch-label { transition: color var(--m-base) var(--m-ease); }

/* ---------- 状態ピル: 受信中の呼吸リング ---------- */
.status-on .dot { position: relative; }
.status-on .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); opacity: 0; animation: m-ping 2.6s var(--m-ease-out) infinite; pointer-events: none; }
.status { transition: background var(--m-base), color var(--m-base), box-shadow var(--m-base); }

/* ---------- ダイアログ・トースト・メニュー ---------- */
dialog.modal[open] { animation: m-modal-in var(--m-base) var(--m-ease-out); }
dialog.modal[open]::backdrop { animation: m-fade var(--m-base) var(--m-ease); }
dialog.modal.is-closing { animation: m-modal-out var(--m-fast) var(--m-ease) forwards; }
dialog.modal.is-closing::backdrop { animation: m-backdrop-out var(--m-fast) var(--m-ease) forwards; }
.toast { transition: opacity var(--m-base) var(--m-ease), transform var(--m-slow) var(--m-spring); }
.toast:not(.is-show) { transition: opacity var(--m-fast) var(--m-ease), transform var(--m-base) var(--m-ease); }
.hm-toast { animation: m-toast-in var(--m-slow) var(--m-spring); }
.hm-modal-ov { animation: m-fade var(--m-base) var(--m-ease); }
.hm-modal { animation: m-modal-in var(--m-base) var(--m-ease-out); }
details.menu[open] > .menu-pop { animation: m-pop-in var(--m-base) var(--m-ease-out); transform-origin: top right; }
.hm-menu:not([hidden]) { animation: m-pop-in var(--m-base) var(--m-ease-out); transform-origin: top right; }
.hm-fbody:not([hidden]) { animation: m-pop-in var(--m-base) var(--m-ease-out); transform-origin: top left; }
.hm-notice:not([hidden]) { animation: m-pop-in var(--m-base) var(--m-ease-out); }

/* ---------- ビューア: 読み込み中のスケルトン、ゴースト ---------- */
.hm-skel { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 6px; }
.hm-skel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .75) 42%, rgba(147, 170, 205, .18) 50%, transparent 72%) 200% 0 / 200% 100% no-repeat; animation: m-shimmer 1.6s linear infinite; }
.hm-skel::after { content: ""; position: absolute; left: 6%; right: 6%; top: 8%; bottom: 8%; border-radius: 14px; background:
  linear-gradient(rgba(31, 41, 55, .06), rgba(31, 41, 55, .06)) 0 0 / 100% 18% no-repeat,
  linear-gradient(rgba(31, 41, 55, .05), rgba(31, 41, 55, .05)) 0 28% / 70% 12% no-repeat,
  linear-gradient(rgba(31, 41, 55, .05), rgba(31, 41, 55, .05)) 0 46% / 100% 22% no-repeat,
  linear-gradient(rgba(31, 41, 55, .045), rgba(31, 41, 55, .045)) 0 76% / 55% 12% no-repeat; }
.hm-ghost { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 2; }

/* ---------- reduced motion: 不要な動きをすべて止める ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --m-fast: .01ms; --m-base: .01ms; --m-slow: .01ms; --m-page: .01ms; }
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .btn:hover, .btn:active, .hm-btn:hover, .hm-btn:active, .site-card:hover, .site-card:active, .srow:hover, .page-row:hover, .star-btn:active { transform: none !important; translate: none !important; }
  .switch:active::after { transform: none !important; }
  .switch[aria-checked="true"]:active::after { transform: translateX(16px) !important; }
  .status-on .dot::after, .hm-skel::before { display: none; }
  .m-pre { opacity: 1; }
  .m-clip0 { clip-path: none; }
}
.menu-pop .btn:hover:not(:disabled) { translate: none; box-shadow: none; }