/*!
 * asbsb-fx.css — ASB Smart Builder「操作・演出（インタラクション）」語彙（共有カタログアセット）
 * 相方 = asbsb-fx.js。出現アニメ語彙(asbsb-animations)が「スクロールで1回出す」のに対し、
 * こちらは【ホバーの微演出】と【サイト全体の挙動】の武器。className と site.json "fx" 宣言で
 * 静的(assemble)とWP(plugin-scaffold)へ対称注入される（単一の正＝fx-vocab.mjs）。
 *
 * 語彙:
 *   .fx-underline                 … リンク下線スライド（ホバーで下線が右端から伸びる。任意のリンク/見出しに）
 *   .fx-btn-slide                 … ボタン横スライド（ホバーで塗りが左→右に流れて文字反転。コアボタンにも対応）
 *   .asbsb-backtop                … TOPへ戻る サークル・スクロールメーター（JS が駆動）
 *   スムーススクロール             … CSSなし（asbsb-fx.js が慣性移動）
 *
 * 調整用 CSS 変数（既定値＝ハードコードと同一。decorations.css の :root で site 側に共有）:
 *   --fx-underline-color(currentColor) / --fx-underline-h(2px) / --fx-underline-offset(-2px)
 *   --fx-underline-duration(.3s) / --fx-underline-ease(cubic-bezier(.58,.3,.005,1))
 *   --fx-btn-slide-bg(currentColor) / --fx-btn-slide-fg(#fff) / --fx-btn-slide-duration(.45s)
 *   --fx-btn-slide-ease(cubic-bezier(.77,0,.18,1)) / --fx-btn-slide-arrow(4px)
 *   --fx-backtop-size(46px) / --fx-backtop-bg(#111) / --fx-backtop-fg(#fff) / --fx-backtop-ring(#fff)
 *   --fx-backtop-ring-w(4) / --fx-backtop-track-op(.18) / --fx-backtop-right(24px) / --fx-backtop-bottom(24px)
 *   --fx-backtop-z(9990) / --fx-backtop-show(.2s)
 */

/* =========================================================================
   リンク下線スライド（.fx-underline）
   ホバー/フォーカス/現在地（.is-current）で下線が右端から伸びて出る。scale なので最終レイアウト不変。
   ========================================================================= */
.fx-underline { position: relative; }
.fx-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--fx-underline-offset, -2px);
  height: var(--fx-underline-h, 2px); background: var(--fx-underline-color, currentColor);
  transform: scaleX(0); transform-origin: right center; opacity: 0; pointer-events: none;
  transition: transform var(--fx-underline-duration, .3s) var(--fx-underline-ease, cubic-bezier(.58, .3, .005, 1)),
              opacity var(--fx-underline-duration, .3s) var(--fx-underline-ease, cubic-bezier(.58, .3, .005, 1));
}
.fx-underline:hover::after,
.fx-underline:focus-visible::after,
.fx-underline.is-current::after { transform: scaleX(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html:not(.asbsb-force-motion) .fx-underline::after { transition: none; }
}

/* =========================================================================
   ボタン横スライド（.fx-btn-slide）
   ホバーで塗り(::before)が左→右に scaleX で流れて入り、文字色が反転。
   ★コア/KB ボタンは className がラッパ .wp-block-button に乗る＝実体 .wp-block-button__link を対象化。
     素の要素（a.button 等）に直接付けた場合も効くよう2系統のセレクタで受ける。
   ========================================================================= */
.fx-btn-slide:not(.wp-block-button),
.wp-block-button.fx-btn-slide .wp-block-button__link { position: relative; overflow: hidden; z-index: 0; }
.fx-btn-slide:not(.wp-block-button)::before,
.wp-block-button.fx-btn-slide .wp-block-button__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fx-btn-slide-bg, currentColor);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--fx-btn-slide-duration, .45s) var(--fx-btn-slide-ease, cubic-bezier(.77, 0, .18, 1));
}
.fx-btn-slide:not(.wp-block-button):hover::before,
.fx-btn-slide:not(.wp-block-button):focus-visible::before,
.wp-block-button.fx-btn-slide .wp-block-button__link:hover::before,
.wp-block-button.fx-btn-slide .wp-block-button__link:focus-visible::before { transform: scaleX(1); }
.fx-btn-slide:not(.wp-block-button):hover,
.fx-btn-slide:not(.wp-block-button):focus-visible,
.wp-block-button.fx-btn-slide .wp-block-button__link:hover,
.wp-block-button.fx-btn-slide .wp-block-button__link:focus-visible { color: var(--fx-btn-slide-fg, #fff); }
/* 矢印（::after で ↗ 等を描く運用のとき）はホバーで少し右へ滑る。transition が無ければ decorations 側で補う */
.wp-block-button.fx-btn-slide .wp-block-button__link:hover::after,
.fx-btn-slide:not(.wp-block-button):hover::after { transform: translateX(var(--fx-btn-slide-arrow, 4px)); }
@media (prefers-reduced-motion: reduce) {
  html:not(.asbsb-force-motion) .fx-btn-slide:not(.wp-block-button)::before,html:not(.asbsb-force-motion) .wp-block-button.fx-btn-slide .wp-block-button__link::before { transition: none; }
}

/* =========================================================================
   TOPへ戻る サークル・スクロールメーター（.asbsb-backtop）
   40px前後の丸ボタン＋SVGリング。progress の stroke-dashoffset を JS がスクロール率で駆動。
   初期は非表示（opacity/visibility）＝スクロールで .is-visible が付く。
   ========================================================================= */
.asbsb-backtop {
  position: fixed; right: var(--fx-backtop-right, 24px); bottom: var(--fx-backtop-bottom, 24px);
  width: var(--fx-backtop-size, 46px); height: var(--fx-backtop-size, 46px);
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--fx-backtop-bg, #111); color: var(--fx-backtop-fg, #fff);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .1); cursor: pointer; z-index: var(--fx-backtop-z, 9990);
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--fx-backtop-show, .2s) linear, visibility var(--fx-backtop-show, .2s) linear, transform var(--fx-backtop-show, .2s) linear;
}
.asbsb-backtop.is-visible { opacity: 1; visibility: visible; transform: none; }
.asbsb-backtop:hover { color: var(--fx-backtop-fg, #fff); }
.asbsb-backtop .asbsb-backtop-ring {
  position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); /* 天頂から時計回り */
}
.asbsb-backtop .asbsb-backtop-ring circle {
  fill: none; stroke-width: var(--fx-backtop-ring-w, 4); stroke: var(--fx-backtop-ring, #fff);
}
.asbsb-backtop .asbsb-backtop-track { opacity: var(--fx-backtop-track-op, .18); }
.asbsb-backtop .asbsb-backtop-progress { stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.asbsb-backtop .asbsb-backtop-arrow { position: relative; display: block; width: 42%; height: 42%; }
.asbsb-backtop .asbsb-backtop-arrow svg {
  display: block; width: 100%; height: 100%; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.asbsb-force-motion) .asbsb-backtop { transition: opacity var(--fx-backtop-show, .2s) linear, visibility var(--fx-backtop-show, .2s) linear; transform: none; }
  html:not(.asbsb-force-motion) .asbsb-backtop.is-visible { transform: none; }
  html:not(.asbsb-force-motion) .asbsb-backtop .asbsb-backtop-progress { transition: none; }
}

/* ===================================================================
   サイト内検索（fx.search）＝ナビの虫眼鏡 → 全画面モーダル（暗幕＋中央フォーム＋×）。
   JS(asbsb-fx.js initSearch)がトグルを .site-header-main-section-right に、モーダルを body に注入。
   調整= :root の --fx-search-* で上書き可（既定は元サイト踏襲＝暗幕#141414/黒送信ボタン）。
   =================================================================== */
:root {
  --fx-search-overlay: rgba(20, 20, 20, .93);
  --fx-search-submit-bg: #1d1d1d;
  --fx-search-input-bg: #ffffff;
  --fx-search-width: 520px;
}
/* ナビ右端の虫眼鏡トグル（色はヘッダー文字色を継承） */
.asbsb-search-toggle {
  display: inline-flex; align-items: center; justify-content: center; align-self: center;
  width: 40px; height: 40px; padding: 0; margin: 0;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none; line-height: 0;
}
.asbsb-search-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.asbsb-search-toggle:hover { opacity: .6; }

/* モーダル開時に背面スクロールを止める */
html.asbsb-search-lock { overflow: hidden; }

.asbsb-search-modal { position: fixed; inset: 0; z-index: 9999; visibility: hidden; }
.asbsb-search-modal.is-open { visibility: visible; }
.asbsb-search-overlay { position: absolute; inset: 0; background: var(--fx-search-overlay); opacity: 0; transition: opacity .3s ease; }
.asbsb-search-modal.is-open .asbsb-search-overlay { opacity: 1; }

/* ×（右上・白） */
.asbsb-search-close {
  position: absolute; top: 26px; right: 32px; width: 46px; height: 46px; padding: 0;
  background: transparent; border: 0; cursor: pointer; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s ease .05s, transform .3s ease;
}
.asbsb-search-modal.is-open .asbsb-search-close { opacity: 1; }
.asbsb-search-close svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.asbsb-search-close:hover { transform: rotate(90deg); }

/* 中央フォーム（白入力＋黒送信）＝クリックで拡大しながらフェードイン */
.asbsb-search-form {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9);
  display: flex; width: min(var(--fx-search-width), 82vw);
  opacity: 0; transition: opacity .35s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.asbsb-search-modal.is-open .asbsb-search-form { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.asbsb-search-input {
  flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 22px; margin: 0;
  font-family: inherit; font-size: 16px; color: #1d1d1d; background: var(--fx-search-input-bg);
  border: 0; outline: none; border-radius: 0;
}
.asbsb-search-submit {
  flex: 0 0 auto; width: 66px; height: 56px; padding: 0; margin: 0; cursor: pointer;
  background: var(--fx-search-submit-bg); border: 0; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.asbsb-search-submit svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.asbsb-search-submit:hover { background: #000; }

@media (prefers-reduced-motion: reduce) {
  html:not(.asbsb-force-motion) .asbsb-search-overlay,html:not(.asbsb-force-motion) .asbsb-search-close,html:not(.asbsb-force-motion) .asbsb-search-form { transition: opacity .2s linear; }
  html:not(.asbsb-force-motion) .asbsb-search-form { transform: translate(-50%, -50%); }
  html:not(.asbsb-force-motion) .asbsb-search-modal.is-open .asbsb-search-form { transform: translate(-50%, -50%); }
  html:not(.asbsb-force-motion) .asbsb-search-close:hover { transform: none; }
}

/* =====================================================================
   プリローダー（画面遷移の入口演出。fx.preloader）
   プリセット: text（Loading 完コピ）/ spinner / dots / logo-draw。
   マークアップは fx-vocab.mjs preloaderHtml が body 先頭に出す（静的=assemble / WP=wp_body_open）。
   JS（initPreloader）が読み込み後に .is-done を付けてフェード→除去。
   ===================================================================== */
html.asbsb-pl-lock, html.asbsb-pl-lock body { overflow: hidden; }
.asbsb-preloader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  --asbsb-pl-bg: #ffffff; --asbsb-pl-fg: #1c1d20; --asbsb-pl-accent: #f5aa00;
  background: var(--asbsb-pl-bg); color: var(--asbsb-pl-fg);
  transition: opacity .55s ease, visibility .55s ease;
}
.asbsb-preloader.is-dark { --asbsb-pl-bg: #1c1d20; --asbsb-pl-fg: #ffffff; }
.asbsb-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

/* -- text（Loading：1文字ずつ躍る fountain。shop.asobit.jp 完コピ）-- */
.asbsb-pl-text { display: flex; font-size: 15px; letter-spacing: .25em; font-weight: 500; }
.asbsb-pl-text span { display: inline-block; animation: asbsb-pl-fountain 1.05s ease-in-out infinite; }
.asbsb-pl-text span:nth-child(1) { animation-delay: 0s; }
.asbsb-pl-text span:nth-child(2) { animation-delay: .09s; }
.asbsb-pl-text span:nth-child(3) { animation-delay: .18s; }
.asbsb-pl-text span:nth-child(4) { animation-delay: .27s; }
.asbsb-pl-text span:nth-child(5) { animation-delay: .36s; }
.asbsb-pl-text span:nth-child(6) { animation-delay: .45s; }
.asbsb-pl-text span:nth-child(7) { animation-delay: .54s; }
.asbsb-pl-text span:nth-child(8) { animation-delay: .63s; }
@keyframes asbsb-pl-fountain {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-.5em); }
}

/* -- spinner（回転リング）-- */
.asbsb-pl-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, .12); border-top-color: var(--asbsb-pl-accent);
  animation: asbsb-pl-spin .8s linear infinite;
}
.is-dark .asbsb-pl-spinner { border-color: rgba(255, 255, 255, .18); border-top-color: var(--asbsb-pl-accent); }
@keyframes asbsb-pl-spin { to { transform: rotate(360deg); } }

/* -- dots（弾む3点）-- */
.asbsb-pl-dots { display: flex; gap: 11px; }
.asbsb-pl-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--asbsb-pl-fg); animation: asbsb-pl-bounce 1.2s ease-in-out infinite; }
.asbsb-pl-dots span:nth-child(2) { animation-delay: .16s; }
.asbsb-pl-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes asbsb-pl-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-13px); opacity: 1; }
}

/* -- logo-draw（ロゴを線で描いてから色を出す。JS がインライン化）-- */
.asbsb-pl-logo, .asbsb-pl-logo-svg { width: 210px; max-width: 56vw; height: auto; display: block; }
.asbsb-pl-logo-svg path, .asbsb-pl-logo-svg polygon { vector-effect: non-scaling-stroke; }

@media (prefers-reduced-motion: reduce) {
  html:not(.asbsb-force-motion) .asbsb-pl-text span,html:not(.asbsb-force-motion) .asbsb-pl-spinner,html:not(.asbsb-force-motion) .asbsb-pl-dots span { animation: none; }
  html:not(.asbsb-force-motion) .asbsb-pl-text span { opacity: 1; }
  html:not(.asbsb-force-motion) .asbsb-preloader { transition: opacity .2s linear; }
}