/* ==========================================================================
   demo/b1.css — 案B-1（案B をベースに、続きのセクションを作っていく版）
   --------------------------------------------------------------------------
   ★assets/css/demo/fv2.css の複製。クラス名を fv2 → b1 にリネームしてある。

   共有していない理由：
     案B（demo/fv/2/）は浅野社長の確認待ちで凍結する必要がある。
     同じファイルを参照すると、B-1 を触るたびに案B まで変わってしまう。

   ★ただし完全な独立ではない。
     tokens.css / base.css / button.css / site-header.css / stats.css などの
     共有コンポーネントは案B と共用のまま。
     B-1 の作業でこれらを編集すると案B にも及ぶので、
     変更が要るときは .b1 配下に限定して書くこと。
   ========================================================================== */

.b1 {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(78vh, 680px);
  /* ヘッダーが fixed で重なるため、その分だけ上を空ける。
     上の余白を下より小さくして、内容の塊を画面のやや上に置いている
     （align-items: center のままだと重心が下がって見えるため）。 */
  padding-block: calc(var(--header-height-sm) + var(--space-8)) clamp(3rem, 7vw, 6rem);
  background-color: var(--navy-950);
}

@media (min-width: 1024px) {
  .b1 {
    padding-block-start: calc(var(--header-height) + var(--space-10));
  }
}

.b1__media,
.b1__media video,
.b1__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.b1__media {
  z-index: -2;
}

/*
  可読性のためのスクリム。
  以前は navy-950（#040227・彩度 91%）を 0.68 で敷いていたが、
  映像に重なると紫みが強く出ていた。彩度を紺の約半分（45%）に落とした
  #0C0B1E に変え、濃度を 0.72 に上げている。
  「コーポレートカラーの紺と黒の間」を狙った値。

  可読性はむしろ上がっている。映像が真っ白のコマでも
  白文字のコントラストは 7.41:1 → 7.98:1。
  これ以上薄くすると前任案と同じ「見にくい」に戻るので下げないこと。
*/
/*
  ★フラットな 0.72 から、横方向に傾斜させた 2 枚重ねへ変更。

  変更の理由。本文は画面の 59.2% までで終わっているのに（実測）、
  映像が一番よく見えるはずの右 40% まで同じ濃さで潰していた。
  案B の売りは映像なのに、その映像が見えない状態になっていた。

  横：文字側を今より濃く（0.72 → 0.78〜0.80）、右へ抜けて 0.41。
  上：ヘッダーは右端 94.7% まで文字があるので、上部だけ別途暗くする。
      これが無いと透明ヘッダーの白文字が明るいコマで読めなくなる。

  ★可読性は下げていない。むしろ全項目が AAA に上がった
  （映像が真っ白なコマでの実測値）。

    eyebrow  10.50:1 ／ 見出し 10.18:1 ／ サブ 10.20:1
    説明文（navy-200）5.64:1 → 7.12:1 ／ CTA 10.09:1
    ヘッダーのナビ 6.31:1（下端・最悪点）

  横の 62% と 88% は本文の右端 59.2% から決めた値。
  本文を右に伸ばす場合は、この 62% も一緒に動かすこと。
*/
.b1__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    /* 透明ヘッダーの白文字を守るための上部の暗がり */
    linear-gradient(180deg, rgba(12, 11, 30, 0.55) 0%, rgba(12, 11, 30, 0) 22%),
    /* 文字側は濃く、映像を見せたい右側は薄く */
    linear-gradient(
      90deg,
      rgba(12, 11, 30, 0.8) 0%,
      rgba(12, 11, 30, 0.78) 62%,
      rgba(12, 11, 30, 0.44) 88%,
      rgba(12, 11, 30, 0.41) 100%
    );
}

/*
  映像を左右反転させる。再エンコードせず CSS だけで反転しているので、
  元に戻すのはこの 1 行を消すだけ。
  素材に文字が写っていないため反転しても不自然にならない。
  恒久的に反転させたい場合は ffmpeg の hflip で焼き込む。
*/
.b1__media video {
  transform: scaleX(-1);
}

/* 映像が無いとき（デモ）の代替。実映像が入ればこのクラスは付かない */
.b1__media--placeholder {
  background-color: var(--navy-900);
}

.b1__novideo {
  position: absolute;
  inset-block-end: var(--space-5);
  inset-inline-end: var(--space-5);
  z-index: 1;
  padding: var(--space-2) var(--space-3);
  background-color: var(--placeholder-badge-bg);
  color: var(--placeholder-badge-text);
  font-size: var(--text-caption);
  line-height: var(--lh-snug);
  max-width: 22rem;
}

/*
  紺地に置くが、.on-inverse は使わない。
  .on-inverse は --color-bg を差し替えて面を塗るため、背景映像を隠してしまう。
  ここでは「文字と操作系の色だけ」を反転させる。
*/
.b1__inner {
  --color-text: var(--white);
  --color-text-strong: var(--white);
  --color-text-muted: var(--navy-200);
  --color-border-strong: rgba(255, 255, 255, 0.5);
  /* ★これが無いと副 CTA の hover が壊れる。
     .btn--secondary の hover 塗りは --color-bg-tint を使うが、
     既定値は --navy-50（ほぼ白）。ここを振らないと
     「白い面に白い文字」になって hover 中だけ文字が消える。 */
  --color-bg-tint: rgba(255, 255, 255, 0.16);
  --color-action: var(--white);
  --color-action-hover: var(--navy-100);
  --color-action-active: var(--navy-200);
  --color-action-text: var(--navy-800);
  --color-link: var(--white);
  --color-link-hover: var(--navy-200);
  --color-focus: var(--white);

  position: relative;
  color: var(--color-text);
}

/* 映像の上なので、ワイプ後に現れる文字は白。
   帯も白にする（三嶋指示）。暗い映像の上では白のほうが動きが強く出る。 */
.b1__title .hero-title__lead,
.b1__title .hero-title__main {
  --hero-text-color: var(--white);
  --hero-wipe-color: var(--white);
}

.b1__title {
  color: var(--white);
  /* 全幅のコンテナ（1280px で約 1120px）なので、
     2 段組みの 4 文字なら理論上 280px まで入る。
     サブコピーとのバランスを見て 144px を上限にした。 */
  font-size: clamp(3.5rem, 10vw, 9rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.b1__sub {
  margin-top: clamp(var(--space-5), 2.5vw, var(--space-8));
  color: var(--white);
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
  line-height: 1.6;
}

.b1__desc {
  max-width: var(--measure);
  margin-top: var(--space-6);
  color: var(--navy-200);
  font-size: var(--text-base);
  line-height: var(--lh-body);
}

.b1__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
}

@media (min-width: 768px) {
  .b1__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* CTA を btn--lg よりさらに一回り大きく（三嶋指示）。
   映像の上に置くぶん、面としての存在感を強める。 */
.b1__actions .btn {
  min-height: 76px;
  padding-inline: clamp(var(--space-8), 4vw, var(--space-12));
  font-size: var(--text-xl);
}

/* 狭い画面では左右を詰める。
   行末の矢印を足したことで 375px で「サービス資料のダウンロード」が
   折り返すようになった（実測：必要 355px に対しボタン 335px で 20px 不足）。
   案B は文字が --text-xl と大きく、案A の btn--lg より余裕がない。
   左右 32px → 16px で必要幅 322px になり、13px の余裕ができる。 */
@media (max-width: 767px) {
  .b1__title .hero-title__lead {
    font-size: 0.58em;
  }

  .b1__sub {
    font-size: clamp(12.5px, 4.08vw, 15.3px);
    white-space: nowrap;
  }

  .b1__actions .btn {
    padding-inline: var(--space-4);
    font-size: var(--text-base);
  }
}


/* ==========================================================================
   登場の流れ（案B）
   --------------------------------------------------------------------------
   案B にはこれまで固有の登場アニメーションが 1 つも無く、
   見出しの共通ワイプだけだった（案A は 2 種、案C は 5 種）。
   3 案を並べたときに一番静かで、映像が主役のはずの案が
   一番動いて見えないという逆転が起きていた。

   時間の並び（見出しのワイプは hero-wipe.css で 0〜1040ms）
     0ms     映像が 1.06 倍からゆっくり収まる
     1000ms  サブコピー
     1180ms  説明文
     1360ms  CTA

   使うのはフェードと 16px の上昇だけ。回転・拡大・バウンド・
   動き続けるループは使わない（社長の NG）。
   ========================================================================== */

/* 映像は一度だけ、わずかに引きながら収まる。
   ★ループさせない。読み込み直後に「これは映像だ」と伝われば役目は終わり。
   ★scaleX(-1) は左右反転の指定（三嶋指示）。消すと反転が戻るので必ず残すこと。 */
@keyframes b1-settle {
  from {
    transform: scaleX(-1) scale(1.06);
  }

  to {
    transform: scaleX(-1) scale(1);
  }
}

@keyframes b1-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.b1__media video {
  animation: b1-settle 2400ms var(--ease-out) both;
}

.b1__sub {
  animation: b1-rise 600ms var(--ease-out) 1000ms both;
}

.b1__desc {
  animation: b1-rise 600ms var(--ease-out) 1180ms both;
}

.b1__actions {
  animation: b1-rise 600ms var(--ease-out) 1360ms both;
}

/* 抑制設定。時間はトークンではなく実数で書いているので個別に止める */
@media (prefers-reduced-motion: reduce) {
  .b1__media video,
  .b1__sub,
  .b1__desc,
  .b1__actions {
    animation: none;
  }
}