/*
 * /services/ ショーケース改修（off / final）のスタイル。
 *
 * 最終候補の構成は「現行FV → 相談例の斜め帯 → カード一覧」。
 * 見せ場は斜めの帯1つに絞り、カード側は内容とCTAが主役（Founder判断 2026-08-21。
 * 初期案の巨大タイポ・交差帯・区分チップ・choose節の装飾は不採用。経緯は
 * docs/motion/SERVICES_SHOWCASE.md、実装は git 履歴 78e167e にある）。
 *
 * 方針
 *  - 新しい色・書体・曲線を1つも持ち込まない。既存の --color-* / --mo-* だけで組む。
 *    虹（--mo-spectrum）は既存の文法どおり「線」としてだけ使う（帯の罫・ホバーの罫・CTAの下線）。
 *  - motion-system.css の後に読み込まれる前提。ただし Astro は _astro のCSSを
 *    このファイルより後に注入するので、既存クラスへの上書きは詳細度を1段上げる。
 *  - public/ の固定名で配信する。src/styles に置くと孤児 _astro CSS が出る（実測済みの罠）。
 */

/* ================================================================
 * 案の出し分け（.sv-plan / data-good-sv）
 * 仕組みは .mo-plan と同じ。JSが動く前は何も出さず、二重表示を構造的に防ぐ。
 * ================================================================ */

.sv-plan {
  display: none;
}

/* 属性が立っていない＝JS無効。そのときは最終候補だけを見せる。
   標準を変えるときは services-showcase.ts と、この1行の両方を直す */
:root:not([data-good-sv]) .sv-plan[data-sv-variants~='final'],
:root[data-good-sv='off'] .sv-plan[data-sv-variants~='off'],
:root[data-good-sv='final'] .sv-plan[data-sv-variants~='final'] {
  display: contents;
}

/*
 * このページではサイト全体の Motion 案切替（別実験）を隠し、サービス案の切替だけを出す。
 * 2つの切替UIが同時に出ると、どの操作が何を変えたのか分からなくなる。
 * 左上の視覚設定コントローラー（オープニング・背景の別実験）も同じ理由で隠す。
 * どちらも他ページでは今までどおり使える。
 */
.sv-page .mp-root:not(.sv-switcher),
.sv-page .pv-root {
  display: none;
}

/* off は「いまの本番」。本番のフッターに停止トグルは無いので、offのときだけ隠す
   （属性を重ねているのは、サイト全体Motion案側の表示規則より詳細度を上げるため） */
:root[data-good-sv='off'] .sv-page .mo-plan-footer[data-mo-plans] {
  display: none;
}

/* 切替UIの推奨タグと、2文字キー（最終）が収まる幅 */
.sv-reco {
  margin-inline-start: 0.4rem;
  color: var(--color-ochre, #68720f);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.sv-switcher .mp-key {
  inline-size: auto;
  min-inline-size: 1.5rem;
  padding-inline: 0.3rem;
}

/* ================================================================
 * 相談例の斜め帯（ページ唯一の見せ場）
 * 紙地の帯は紙地の上だと帯に見えない（実測済み）ので、地を mist に落とす。
 * 停止ボタンは帯の直上・右端。流れる対象のすぐそばに止める手段を置く。
 * ================================================================ */

.sv-band-zone {
  --sv-band-height: 8rem;
  --sv-band-angle: -2.5deg;
}

.sv-band-controls {
  display: flex;
  justify-content: flex-end;
  padding-block: 0.5rem 0.6rem;
}

.sv-band {
  background: var(--color-mist, #f4f3f5);
  border-block: 1px solid var(--color-line, #dedde2);
}

@media (max-width: 48rem) {
  .sv-band-zone {
    --sv-band-height: 6.5rem;
    --sv-band-angle: -2deg;
  }
}

/* ================================================================
 * サービスカード（final案）
 * 全面クリックは現行から可能（h3 a の stretched link）。
 * ここでは「押せる」が見た目から分かる状態にする:
 * カードのどこに乗ってもCTAボタンが点灯し、上辺に虹の罫が引かれる。
 * ================================================================ */

.sv-card {
  display: flex;
}

.sv-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

/* ホバーで上辺に引かれる罫。出現の先端と同じ「引かれた線」の文法 */
.sv-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--mo-spectrum);
  transform: scaleX(0);
  transform-origin: left center;
  transition: var(--mo-transition--line);
  pointer-events: none;
  z-index: 2;
}

.sv-card:hover::before,
.sv-card:focus-within::before {
  transform: scaleX(1);
}

.sv-card:hover h3 a {
  color: var(--color-teal, #5d2e54);
}

/* ================================================================
 * 詳細へのCTA。文字リンクをやめ、押せる形にする。
 * サービス説明 → CTA の順が視線の流れとして成立するよう、
 * カードの最下辺へ揃える（margin-top: auto）。
 * ================================================================ */

.sv-cta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.9rem;
  margin-block-start: auto;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--color-ink, #1b1a1f);
  border-radius: var(--radius, 0.5rem);
  color: var(--color-ink, #1b1a1f);
  font-size: 0.92rem;
  font-weight: 750;
  text-decoration: none;
  overflow: hidden;
  transition:
    background-color var(--mo-dur-micro, 160ms) var(--mo-ease-out),
    color var(--mo-dur-micro, 160ms) var(--mo-ease-out);
}

/* 下辺を走る虹の罫。ボタン内側の底辺に引かれる */
.sv-cta::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--mo-spectrum);
  transform: scaleX(0);
  transform-origin: left center;
  transition: var(--mo-transition--line);
}

.sv-cta__arrow {
  flex: none;
  transition: var(--mo-transition--lift);
}

/* カードのどこに乗ってもCTAが点灯する。カード全体が入口であることの合図 */
.sv-card:hover .sv-cta,
.sv-card:focus-within .sv-cta,
.sv-cta:hover,
.sv-cta:focus-visible {
  background: var(--color-ink, #1b1a1f);
  color: var(--color-paper, #fbfbfa);
}

.sv-card:hover .sv-cta::after,
.sv-card:focus-within .sv-cta::after,
.sv-cta:hover::after,
.sv-cta:focus-visible::after {
  transform: scaleX(1);
}

.sv-card:hover .sv-cta__arrow,
.sv-cta:hover .sv-cta__arrow {
  transform: translateX(4px);
}

/* 指で押す端末ではボタンの的を大きく取る */
@media (pointer: coarse) {
  .sv-cta {
    min-height: 3.1rem;
  }
}

/* ================================================================
 * ホバー系の動きは、動きを弱める設定では時間ゼロで到達させる
 * （状態の手がかりは残し、移動は待たせない）
 * ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .sv-card::before,
  .sv-cta::after,
  .sv-cta,
  .sv-cta__arrow {
    transition: none;
  }

  .sv-card:hover .sv-cta__arrow,
  .sv-cta:hover .sv-cta__arrow {
    transform: none;
  }
}