/* ============================================================
   手ざわり（全ページ共通）
   ------------------------------------------------------------
   押すと横に膨らんで縦に潰れ、離すとばねで戻る。
   開くものは弾んで開き、知らせるものは弾んで出る。

   STAFF BASE で始め、公開ページにも同じ強さで広げた（2026-09）。
   PLAYER BASE の未来感を担う動きとして、全ページの操作部品に付ける。
   装飾の予算（光源・影・色数・アイコン）は色と要素を絞るためのもので、動きは縛らない。
   新しい操作部品を作ったら、ここに .is-pressed の規則を足す（motion.js は触らなくてよい）。
   すべて body.pb の下に書く。

   押下の見た目は :active ではなく、motion.js が付ける .is-pressed で出す。
   motion.js は押せる部品の一覧を持たず、このファイルの .is-pressed を含む規則から
   組み立てる。部品を足すときは、ここに .is-pressed の規則を書くだけでよい。
   :active だと素早いクリックでは潰れる途中で戻り始め、
   iOS では押下中の見た目そのものが出ないため。

   「動きを減らす」設定の人には、このファイルは何もしない。
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---- 動きの素 ----
     ばね3種。減衰振動の式から計算した曲線。
       ソフト：ボタンや面が戻るとき。12% 行き過ぎて止まる
       ポップ：印が現れるとき。27% 行き過ぎて弾む
       かため：乗ったときの膨らみ。1% しか行き過ぎず短く収まる。
               ホバーは反応の速さが要るので、揺れ戻すと鈍く感じる */
  .pb {
    --pb-ease-soft: linear(0, 0.048, 0.169, 0.328, 0.501, 0.666, 0.811, 0.929, 1.017, 1.077, 1.112, 1.125, 1.124, 1.111, 1.092, 1.071, 1.049, 1.03, 1.014, 1.001, 0.992, 0.987, 0.984, 0.984, 0.985, 0.987, 0.99, 0.993, 0.995, 0.998, 0.999, 1.001, 1.001, 1.002, 1.002, 1.002, 1);
    --pb-ease-firm: linear(0, 0.098, 0.294, 0.499, 0.673, 0.803, 0.892, 0.949, 0.982, 0.999, 1.007, 1.009, 1.008, 1.006, 1.005, 1.003, 1.002, 1);
    --pb-firm-dur: .38s;
    --pb-ease-pop: linear(0, 0.078, 0.271, 0.52, 0.772, 0.989, 1.148, 1.242, 1.275, 1.258, 1.207, 1.14, 1.07, 1.009, 0.963, 0.935, 0.925, 0.928, 0.941, 0.959, 0.979, 0.996, 1.009, 1.017, 1.021, 1.02, 1.017, 1.012, 1.006, 1.002, 0.998, 0.995, 0.994, 0.994, 0.995, 0.997, 1);
    --pb-hover-s: 1.035;      /* 乗ると少し膨らむ */
    --pb-press-x: 1.07;       /* 押すと横へ膨らみ */
    --pb-press-y: .88;        /* 縦に潰れる */
    --pb-wide-press-x: 1.012; /* 横長の部品は潰れ方を控えめに */
    --pb-wide-press-y: .94;
    --pb-big-press-x: 1.01;   /* 大きい面（ハブやツールのカード）。強く潰すと画面ごと揺れて見える */
    --pb-big-press-y: .965;
    --pb-full-press-y: .93;   /* 画面幅いっぱいの行。横に広げると横スクロールが出るので縦だけ */
    --pb-card-r-press: 18px;  /* 押している間だけ角が丸くなる＝柔らかく見える */
  }
  @supports not (transition-timing-function: linear(0, 1)) {
    .pb {
      --pb-ease-soft: cubic-bezier(.34, 1.4, .64, 1);
      --pb-ease-firm: cubic-bezier(.05, .7, .1, 1);
      --pb-ease-pop: cubic-bezier(.34, 1.7, .64, 1);
    }
  }

  /* ============================================================
     押せるもの
     ============================================================ */
  .pb .pb-btn,
  .pb .pb-navbar__toggle,
  .pb .pb-theme-btn {
    transition: transform .55s var(--pb-ease-soft), background-color .15s ease, color .15s ease;
  }
  .pb .pb-btn.is-pressed,
  .pb .pb-navbar__toggle.is-pressed,
  .pb .pb-theme-btn.is-pressed {
    transform: scale(var(--pb-press-x), var(--pb-press-y));
    transition: transform .09s ease-out, background-color .15s ease, color .15s ease;
  }
  /* テーマの切り替え（staff-theme.css）：月と太陽が入れ替わるたびに弾んで出る。
     表示が切り替わると頭から再生される */
  .pb .pb-theme-btn .pb-theme-icon { animation: pb-m-pop .5s var(--pb-ease-pop); }

  /* 切り替え（演者／オブザーバー、取り込み元）とチップ（ステージ選択など）：
     押すと中心から色が満ちる。背景の円を広げて塗るので、マークアップは変えずに済む。
     ガチャキング（body.gk）のチップは金の配色を持つので、満ち方は付けず押し込みだけ */
  .pb .sf-toggle__btn,
  .pb .sf-chip,
  .pb:not(.gk) .pb-chip {
    background-color: var(--pb-surface);
    /* 満ちる色は部品ごとに --pb-press-fill で変えられる。既定は文字色（選択中は反転した面） */
    background-image: radial-gradient(circle, var(--pb-press-fill, var(--pb-text)) 0 49%, transparent 50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0% 0%;
    transition: transform .55s var(--pb-ease-soft), background-size .5s var(--pb-ease-soft), color .2s ease, border-color .2s ease;
  }
  .pb .sf-toggle__btn[aria-pressed="true"],
  .pb .sf-chip--active,
  .pb:not(.gk) .pb-chip--active {
    background-color: var(--pb-surface);
    background-size: 280% 280%;
  }
  .pb .sf-toggle__btn.is-pressed,
  .pb .sf-chip:not(.sf-chip--static).is-pressed,   /* 表示専用のチップは押せない */
  .pb .pb-chip.is-pressed {
    transform: scale(var(--pb-press-x), var(--pb-press-y));
    transition: transform .09s ease-out, background-size .5s var(--pb-ease-soft), color .2s ease, border-color .2s ease;
  }

  /* 選択中のチップは緑の文字を載せる黒い面なので、満ちる色も黒い面にする */
  .pb:not(.gk) .pb-chip { --pb-press-fill: var(--pb-ink); }
  .pb.gk .pb-chip {
    transition: transform .55s var(--pb-ease-soft), background-color .16s ease, color .16s ease, border-color .16s ease;
  }

  /* 横長の部品：ドロップダウンの入口、折りたたみの見出し */
  .pb .tm-dd__trigger,
  .pb .tm-card-head,
  .pb .bp-fold > summary,
  .pb .gk-formula__summary {
    transition: transform .5s var(--pb-ease-soft), border-color .15s, box-shadow .15s;
  }
  .pb .tm-dd__trigger.is-pressed,
  .pb .tm-card-head.is-pressed,
  .pb .bp-fold > summary.is-pressed,
  .pb .gk-formula__summary.is-pressed {
    transform: scale(var(--pb-wide-press-x), var(--pb-wide-press-y));
    transition: transform .09s ease-out, border-color .15s, box-shadow .15s;
  }

  /* ヘッダー：ロゴ（ハブへ戻る）とタブ。
     選んだタブの黒い丸は、切り替わるたびに弾んで出る */
  .pb .pb-navbar__brand,
  .pb .pb-navbar__item {
    transition: transform .55s var(--pb-ease-soft), color .12s ease, background-color .15s ease;
  }
  .pb .pb-navbar__brand { transform-origin: left center; }
  .pb .pb-navbar__brand.is-pressed {
    transform: scale(var(--pb-wide-press-x), var(--pb-wide-press-y));
    transition: transform .09s ease-out, color .12s ease, background-color .15s ease;
  }
  .pb .pb-navbar__item.is-pressed {
    transform: scale(var(--pb-press-x), var(--pb-press-y));
    transition: transform .09s ease-out, color .12s ease, background-color .15s ease;
  }
  .pb .pb-navbar__item--active { animation: pb-m-tab .5s var(--pb-ease-pop); }
  /* スマホのメニューでは項目が横いっぱいの行になるので、潰れ方を控えめに。
     メニューの出入りは折りたたみと同じく高さごと弾ませる（motion.js）。
     閉じる途中は pb-navbar--closing の間だけ表示を残す */
  @media (max-width: 860px) {
    /* 行が画面幅いっぱいなので、横に広げると端からはみ出す。縦だけ縮める */
    .pb .pb-navbar__item.is-pressed { transform: scaleY(var(--pb-full-press-y)); }
    .pb .pb-navbar__item--active { animation: none; }
    .pb .pb-navbar__drawer { transform-origin: top center; }
    .pb .pb-navbar--closing .pb-navbar__drawer { display: flex; pointer-events: none; }
  }

  /* チェック（バンピック）：押すと潰れ、入れると弾む */
  .pb .bp-check input { transition: transform .5s var(--pb-ease-soft); }
  .pb .bp-check.is-pressed input { transform: scale(var(--pb-press-x), var(--pb-press-y)); transition: transform .09s ease-out; }
  .pb .bp-check input:checked { animation: pb-m-pop .55s var(--pb-ease-pop); }

  /* ハブのカード：押すとカードが少し沈み、そのあいだだけ角が丸くなる */
  .pb .hb-card {
    transition: border-color .18s ease, transform .55s var(--pb-ease-soft), border-radius .55s var(--pb-ease-soft);
  }
  .pb .hb-card.is-pressed {
    transform: scale(var(--pb-big-press-x), var(--pb-big-press-y));
    border-radius: var(--pb-card-r-press);
    transition: border-color .18s ease, transform .1s ease-out, border-radius .1s ease-out;
  }
  .pb .hb-card__action { transform-origin: left center; transition: transform .55s var(--pb-ease-soft); }
  .pb .hb-card.is-pressed .hb-card__action { transform: scale(var(--pb-press-x), var(--pb-press-y)); transition: transform .09s ease-out; }

  /* ---- 公開ページ ---- */
  /* 丸いボタン：トップのカードの「大会ページへ」、ガチャキングのボタン・抽選・タブ・閉じる */
  .pb .pb-tcard__action,
  .pb .gk-btn,
  .pb .gk-sim__roll,
  .pb .gk-subtab,
  .pb .gk-modal__close {
    transition: transform .55s var(--pb-ease-soft), background-color .16s ease, color .16s ease, border-color .16s ease, opacity .2s ease;
  }
  .pb a.pb-tcard__action.is-pressed,   /* 「準備中」の span は押せない */
  .pb .gk-btn.is-pressed,
  .pb .gk-sim__roll.is-pressed,
  .pb .gk-subtab.is-pressed,
  .pb .gk-modal__close.is-pressed {
    transform: scale(var(--pb-press-x), var(--pb-press-y));
    transition: transform .09s ease-out, background-color .16s ease, color .16s ease, border-color .16s ease, opacity .2s ease;
  }

  /* 文字のリンク：ヒーローの「最新情報はXで」、カード内のリンク、フッター、規約ページ、
     ヘッダーの大会名。文字は潰すと読みにくいので、横長の部品と同じく控えめに。
     inline のままだと transform が効かないので inline-block にする */
  .pb .pb-hero__link,
  .pb .pb-tcard__link,
  .pb .pb-social-link,
  .pb .pb-navbar__title,
  .pb .pb-navbar__home,
  .pb .pb-site-footer__legal a,
  .pb .gk-mc__tw,
  .pb main a:not([class]) {
    transition: transform .55s var(--pb-ease-soft), color .15s ease;
  }
  /* 押している間は class="is-pressed"、戻っているあいだは "was-pressed" に
     なるので、どちらも同じ扱いにする */
  .pb main a:not([class]),
  .pb main a[class="is-pressed"],
  .pb main a[class="was-pressed"] { display: inline-block; max-width: 100%; }
  .pb .pb-site-footer__legal a { display: inline-block; }
  .pb .pb-hero__link.is-pressed,
  .pb .pb-tcard__link.is-pressed,
  .pb .pb-social-link.is-pressed,
  .pb .pb-navbar__title.is-pressed,
  .pb .pb-navbar__home.is-pressed,
  .pb .pb-site-footer__legal a.is-pressed,
  .pb .gk-mc__tw.is-pressed,
  .pb main a[class="is-pressed"] {
    transform: scale(var(--pb-wide-press-x), var(--pb-wide-press-y));
    transition: transform .09s ease-out, color .15s ease;
  }
  .pb .pb-navbar__title,
  .pb .pb-social-link,
  .pb .pb-hero__link,
  .pb .pb-tcard__link { transform-origin: left center; }

  /* カード：ガチャキングのツールカードとチームカード。ハブのカードと同じく沈んで角が丸くなる */
  .pb .gk-tool,
  .pb .gk-tc {
    transition: border-color .18s ease, background-color .16s ease, transform .55s var(--pb-ease-soft), border-radius .55s var(--pb-ease-soft);
  }
  .pb .gk-tool.is-pressed,
  .pb .gk-tc.is-pressed {
    transform: scale(var(--pb-big-press-x), var(--pb-big-press-y));
    border-radius: var(--pb-card-r-press);
    transition: border-color .18s ease, background-color .16s ease, transform .1s ease-out, border-radius .1s ease-out;
  }

  /* 乗ったときの膨らみはマウスのときだけ。
     タッチ端末では「乗る」がなく、触った後に膨らんだまま残るため */
  @media (hover: hover) and (pointer: fine) {
    .pb .pb-btn:not(:disabled):hover,
    .pb .sf-toggle__btn:hover,
    .pb .sf-chip:not(.sf-chip--static):hover,
    .pb .pb-chip:hover,
    .pb a.pb-tcard__action:hover,
    .pb .gk-btn:hover,
    .pb .gk-sim__roll:not(:disabled):hover,
    .pb .gk-subtab:not(.pb-navbar__item--active):hover,
    .pb .gk-modal__close:hover,
    .pb .pb-theme-btn:hover { transform: scale(var(--pb-hover-s)); }
    .pb .pb-navbar__brand:hover { transform: scale(1.02); }
    .pb .pb-navbar__item:not(.pb-navbar__item--active):hover { transform: scale(var(--pb-hover-s)); }
    .pb .hb-card:hover .hb-card__action { transform: scale(calc(var(--pb-hover-s) + .04), var(--pb-hover-s)); }

    /* 乗る・降りるはかためのばねで。ソフトだと乗るたびに揺れて鈍く感じる。
       ただし押して離したあいだ（.was-pressed）は外す。マウスだと押している間も
       ホバーは続いているので、外さないと戻りまでかためになり、弾みが消える。
       transform 以外の指定は、それぞれの元の規則と同じものを並べている
       （transition は property ごとに分けて書けないため） */
    .pb .pb-btn:hover:not(.was-pressed) {
      transition: transform var(--pb-firm-dur) var(--pb-ease-firm), background-color .15s ease, color .15s ease;
    }
    .pb .sf-toggle__btn:hover:not(.was-pressed),
    .pb .sf-chip:hover:not(.was-pressed),
    .pb:not(.gk) .pb-chip:hover:not(.was-pressed) {
      transition: transform var(--pb-firm-dur) var(--pb-ease-firm), background-size .5s var(--pb-ease-soft), color .2s ease, border-color .2s ease;
    }
    .pb.gk .pb-chip:hover:not(.was-pressed) {
      transition: transform var(--pb-firm-dur) var(--pb-ease-firm), background-color .16s ease, color .16s ease, border-color .16s ease;
    }
    .pb a.pb-tcard__action:hover:not(.was-pressed),
    .pb .gk-btn:hover:not(.was-pressed),
    .pb .gk-sim__roll:hover:not(.was-pressed),
    .pb .gk-subtab:hover:not(.was-pressed),
    .pb .gk-modal__close:hover:not(.was-pressed) {
      transition: transform var(--pb-firm-dur) var(--pb-ease-firm), background-color .16s ease, color .16s ease, border-color .16s ease, opacity .2s ease;
    }
    .pb .pb-theme-btn:hover:not(.was-pressed) {
      transition: transform var(--pb-firm-dur) var(--pb-ease-firm), background-color .15s ease, color .15s ease;
    }
    .pb .pb-navbar__brand:hover:not(.was-pressed),
    .pb .pb-navbar__item:hover:not(.was-pressed) {
      transition: transform var(--pb-firm-dur) var(--pb-ease-firm), color .12s ease, background-color .15s ease;
    }
    .pb .hb-card:hover:not(.was-pressed) .hb-card__action {
      transition: transform var(--pb-firm-dur) var(--pb-ease-firm);
    }
  }

  /* ============================================================
     コピー：押すと左から緑が満ち、チェックが弾んで出る。
     common.js の copyText() が 1.6 秒だけ .is-copied を付ける
     ============================================================ */
  .pb .pb-btn { position: relative; isolation: isolate; overflow: hidden; }
  .pb .pb-btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: var(--pb-primary); transform: scaleX(0); transform-origin: left center;
    transition: transform .5s var(--pb-ease-soft);
  }
  .pb .pb-btn.is-copied::before { transform: scaleX(1); }
  .pb .pb-btn.is-copied { color: var(--pb-text); }
  .pb .pb-btn.is-copied .pb-icon--check { animation: pb-m-pop .5s var(--pb-ease-pop); }

  /* ============================================================
     開くもの
     ============================================================ */
  /* ドロップダウン：上から弾んで開き、項目が少しずつ遅れて落ちてくる。
     一覧は開くたびに hidden が外れるので、そのたびに頭から再生される */
  .pb .tm-dd__panel[data-dd-open] {
    transform-origin: top center;
    animation: pb-m-dd .55s var(--pb-ease-soft);
  }
  .pb .tm-dd__panel[data-dd-open] .tm-dd__item { animation: pb-m-dd-item .45s var(--pb-ease-soft) both; }
  .pb .tm-dd__panel[data-dd-open] .tm-dd__item:nth-child(2) { animation-delay: 25ms; }
  .pb .tm-dd__panel[data-dd-open] .tm-dd__item:nth-child(3) { animation-delay: 50ms; }
  .pb .tm-dd__panel[data-dd-open] .tm-dd__item:nth-child(4) { animation-delay: 75ms; }
  .pb .tm-dd__panel[data-dd-open] .tm-dd__item:nth-child(5) { animation-delay: 100ms; }
  .pb .tm-dd__panel[data-dd-open] .tm-dd__item:nth-child(6) { animation-delay: 125ms; }
  .pb .tm-dd__panel[data-dd-open] .tm-dd__item:nth-child(n+7) { animation-delay: 150ms; }
  .pb .tm-dd__arrow { transition: transform .55s var(--pb-ease-pop); }

  /* 折りたたみカード（大会設定）とバンピックの折りたたみ：矢印が弾んで回る。
     中身の開閉の動きは motion.js が付ける。閉じる途中は data-collapsing */
  .pb .tm-card-head__chevron,
  .pb .bp-fold__chevron { transition: transform .55s var(--pb-ease-pop); }
  /* バンピックの折りたたみ（details）：閉じる途中も矢印は閉じた向き */
  .pb .bp-fold[data-collapsing] .bp-fold__chevron { transform: rotate(-90deg); }
  .pb .tm-settings-card[data-collapsing] .tm-card-head__chevron { transform: rotate(-90deg); }
  .pb .tm-settings-card > .tm-card-body { transform-origin: top center; }

  /* モーダル（プロフィール編集・ログイン）：開くと弾んで出る */
  .pb .pb-modal-backdrop:not([hidden]) { animation: pb-m-fade .2s ease both; }
  .pb .pb-modal-backdrop:not([hidden]) .pb-modal { animation: pb-m-modal .55s var(--pb-ease-soft) both; }
  /* ガチャキングのチーム詳細：もとのフェードアップを差し替える */
  .pb .gk-modal-backdrop.is-open { animation: pb-m-fade .2s ease both; }
  .pb .gk-modal-backdrop.is-open .gk-modal { animation: pb-m-modal .55s var(--pb-ease-soft) both; }

  /* ============================================================
     知らせるもの
     ============================================================ */
  /* 入力欄：選ぶと縁の光が一度膨らんで落ち着く */
  .pb .pb-input,
  .pb .pb-select {
    box-shadow: 0 0 0 0 rgba(178, 247, 40, 0);
    transition: border-color .15s ease, box-shadow .55s var(--pb-ease-pop);
  }

  /* ステータス：文言が変わるたびに弾んで出る。
     .is-popped は motion.js が文言の変化を見て付け直す */
  .pb .ga-status.is-popped {
    transform-origin: left center;
    animation: pb-m-status .55s var(--pb-ease-pop) both;
  }

  @keyframes pb-m-pop     { from { transform: scale(.7); } to { transform: none; } }
  @keyframes pb-m-tab     { from { transform: scale(.82, .9); } to { transform: none; } }
  @keyframes pb-m-status  { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
  @keyframes pb-m-dd      { from { opacity: 0; transform: scale(.95, .55); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
  @keyframes pb-m-dd-item { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
  @keyframes pb-m-fade    { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pb-m-modal   { from { opacity: 0; transform: scale(.9); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
}

/* ============================================================
   ページ遷移（View Transitions）

   リンクを押してから切り替わるまでが一瞬なので、押した動きが
   見えないまま画面が入れ替わる。遷移そのものを弾ませてつなぐ。
   対応していないブラウザでは、これまで通り即座に切り替わるだけ。

   ここは上の「動きを減らす」の囲いの外に置く。
   @view-transition は入れ子にできないため。代わりに下で止める。
   ::view-transition-* は :root から継承するので、.pb に置いた
   --pb-ease-soft は届かない。ここだけ曲線を直接書く（値は同じ） */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: pb-page-out .16s ease-in both;
}
::view-transition-new(root) {
  animation: pb-page-in .55s cubic-bezier(.34, 1.4, .64, 1) both;
}
@keyframes pb-page-out {
  to { opacity: 0; transform: scale(.99); }
}
@keyframes pb-page-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}