/* =============================================================
 * FB #694: 会員登録後 reload 中の Loading オーバーレイ
 * 2026-05-22 作成 / 2026-05-22 piano_composer.css から分離
 *
 * 分離理由:
 *   piano_composer.css は piano_composer/article ライブラリ (記事ペイウォール
 *   用) にのみ attach されており、トップページ / /user/register 等で本 CSS
 *   が読み込まれない問題があった (FB #694 が dev で非表示の原因)。
 *   本ファイルを piano_composer/init ライブラリ (全ページ読込) に attach
 *   することで、登録モーダルを起動するどのページからでも overlay を表示
 *   できる。
 *
 * 使い方:
 *   - showSyncOverlay() で body 末尾に DOM 追加 + is-visible 付与
 *   - hideSyncOverlay() で is-visible 解除
 *   - Piano モーダル close 後 / pianoSyncSubscription 進行中 / reload 直前
 *     に呼ばれ、新ページの DOMContentLoaded で自動除去
 *   - Wave アニメ提供 CSS をメインカラー #1F7B82 で適用
 * ============================================================= */
.piano-sync-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(255, 255, 255, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s 0.2s;
  pointer-events: none;
}
.piano-sync-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}
.piano-sync-overlay__text {
  font-size: 15px;
  color: #1F7B82;
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
}
.piano-sync-overlay__sub {
  font-size: 13px;
  color: #666;
  text-align: center;
  max-width: 280px;
}
.piano-sync-overlay__sub a {
  color: #1F7B82;
  text-decoration: underline;
}

/* Wave アニメーション (提供 CSS をメインカラー #1F7B82 で適用) */
.piano-sync-overlay .wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.piano-sync-overlay .wave .bar-item {
  width: 3px;
  height: 30px;
  background-color: #1F7B82;
  border-radius: 1.5px;
  animation: piano-sync-wave 1.2s ease-in-out infinite;
  will-change: transform;
}
.piano-sync-overlay .wave .bar-item:nth-child(1) { animation-delay: 0s; }
.piano-sync-overlay .wave .bar-item:nth-child(2) { animation-delay: 0.1s; }
.piano-sync-overlay .wave .bar-item:nth-child(3) { animation-delay: 0.2s; }
.piano-sync-overlay .wave .bar-item:nth-child(4) { animation-delay: 0.3s; }
.piano-sync-overlay .wave .bar-item:nth-child(5) { animation-delay: 0.4s; }

@keyframes piano-sync-wave {
  0%, 100% { transform: scaleY(0.5); }
  50%      { transform: scaleY(1); }
}

/* prefers-reduced-motion 対応: アニメ停止 */
@media (prefers-reduced-motion: reduce) {
  .piano-sync-overlay .wave .bar-item {
    animation: none;
    transform: scaleY(0.7);
  }
}