/* ============================================================
 * Floating Action Buttons (TOP FAB / VIDEO WORKS FAB) — sundayfolk-child
 *
 * 全ページ共通の右下フローティング FAB:
 *   - .top-fab          (template-parts/top-fab.php)         — ページ上部へ戻る
 *   - .video-works-fab  (template-parts/video-works-fab.php) — GALLERY (動画制作実績)
 *
 * 表示するかは個別ページの get_template_part 呼び出し側で制御:
 *   - front-page.php           : top-fab + video-works-fab
 *   - page-service.php         : top-fab + video-works-fab
 *   - page-company-philosophy  : top-fab のみ
 *   - その他下層              : 出すか別途クライアント確認中
 *
 * HTML/css/top-orange-navy.css からの切り出し:
 *   - ベース:                L1885-1985 (.top-fab / .video-works-fab / @keyframes)
 *   - タブレット (≤959px):   L2396-2398 (.video-works-fab 非表示)
 *   - SP (≤599px) 位置調整:  L2985-2986
 *   - SP (≤599px) top-fab:   L2989-3007 (46x46 円形化)
 *
 * top-orange-navy.css 側は当面残置（front-page では二重定義になるが内容は同等で無害）。
 * Step 10-9 で top-orange-navy.css 分割時に該当ブロックを削除する。
 *
 * スコープ方針 ([[D-024]]):
 *   - 共通 template-part 用 CSS は全ページ enqueue
 *   - CSS 変数はフォールバック値付き var(--name, #hex) で記述
 *     （top-orange-navy.css に依存しない非トップページでも壊れない）
 * ============================================================ */

/* ─── TOP FAB ─── */
.top-fab {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 9500;
  width: 112px;
  border: 1px solid rgba(30,47,77,.12);
  background: rgba(255,255,255,.92);
  color: var(--c-navy, #1e2f4d);
  border-radius: 999px;
  padding: 12px 14px;
  text-align: center;
  font-family: 'Montserrat', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(19,31,52,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, box-shadow .2s ease, border-color .2s ease, visibility 0s linear .22s;
}
.top-fab:hover {
  border-color: rgba(224,85,49,.35);
  box-shadow: 0 14px 34px rgba(224,85,49,.18);
}
.top-fab.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease, box-shadow .2s ease, border-color .2s ease, visibility 0s linear 0s;
}

/* ─── VIDEO WORKS FAB (GALLERY) ─── */
.video-works-fab {
  position: fixed;
  right: 20px;
  bottom: 82px;
  z-index: 9480;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.8);
  background: linear-gradient(145deg, #49c9ff 0%, #148fc6 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  text-align: center;
  text-decoration: none;
  animation: videoFabFloat 3.2s ease-in-out infinite;
  transition: background .2s ease, border-color .2s ease;
}
.video-works-fab::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(73,201,255,.9);
  pointer-events: none;
}
.video-works-fab:hover {
  background: linear-gradient(145deg, #37bfff 0%, #0f7fb0 100%);
  border-color: rgba(255,255,255,.95);
}
.video-works-fab i {
  display: block;
  font-size: 28px;
  line-height: 1;
}
.video-works-fab__txt {
  display: block;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
}
.video-works-fab__txt-main {
  display: block;
  position: relative;
  top: -5px;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
}
.video-works-fab__txt-sub {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
}
@keyframes videoFabFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ─── タブレット (≤959px) — GALLERY FAB 非表示 ─── */
@media screen and (max-width: 959px) {
  .video-works-fab {
    display: none;
  }
}

/* ─── SP (≤599px) 位置調整 + top-fab 円形化 ─── */
@media screen and (max-width: 599px) {
  .top-fab { right: 12px; bottom: 16px; }
  .video-works-fab { right: 12px; bottom: 82px; }

  .top-fab {
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .top-fab::before {
    content: "↑";
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }
}