/* =========================================================================
   plates.css — パースの回廊（scene: 'plates' 専用の版面）
   -------------------------------------------------------------------------
   3D（scenes/plates.js）が最初から最後まで背後に居続ける前提のCSS。
   だから本文側は「地を塗らない」。塗るのは、文字を読ませるための
   ベール（.bs-veil）だけ。ここが編集誌型（白い紙を敷く）との分かれ目。

   組み方の骨:
     ・.bs-scene が1区間＝板1枚ぶんの担当（data-plate を持つ）
     ・.bs-scene--show  見せ場。文字はキャプション1行だけ。板が全面に出る
     ・.bs-scene--read  読ませる。文字は片側に寄り、板は逆側へ逃げて沈む
     ・.bs-veil         文字側だけを暗くするグラデーション

   brand.css のあとに読む。実物の手本 → sample/09_itonami（同じ規則を itn- 名で持つ）
   ========================================================================= */

/* 舞台は器（canvas はページ全体へ移される）。高さは持たせない。
   持たせると最初の1画面が空になり、FVが1画面ぶん下へ押し出される。
   ★brand.css の `.has-page-canvas[data-progress="…"] .bs-stage` は詳細度が
   高いので、同じ形で書かないと勝てない（後勝ちにはならない） */
.has-page-canvas[data-progress="scroll"] .bs-stage,
.has-page-canvas[data-progress="page"] .bs-stage,
[data-progress] .bs-stage,
.bs-stage { height: 0; }
.has-page-canvas[data-progress="scroll"] .bs-stage__sticky,
.has-page-canvas[data-progress="page"] .bs-stage__sticky,
[data-progress] .bs-stage__sticky,
.bs-stage__sticky { position: static; height: 0; overflow: visible; }

.bs-script { position: relative; z-index: 1; }

/* ヘッダーは写真の上に浮かせる。brand.css の
   `.has-page-canvas .bs-header { position: relative }` は本文を流す前提の指定 */
.has-page-canvas .bs-header,
.bs-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: transparent; }

/* ★区間ごとに上端を沈めると、区間の境目に水平の線が1本出る。
   沈めるのはヘッダーの下だけにして、しかも固定で1枚。継ぎ目が生まれない */
.bs-header::before {
  content: ""; position: absolute; inset: -1px 0 auto 0; height: 170px; z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 74%, transparent), transparent);
  pointer-events: none;
}

/* ---------- 区間の共通 ---------- */
.bs-scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 12vh, 9rem) var(--pad);
  isolation: isolate;
}
.bs-scene > *:not(.bs-veil):not(.bs-plate-fallback):not(.bs-flash):not(.bs-caption--vertical):not(.bs-caption--center) { position: relative; z-index: 2; }

/* ---------- ベール（文字を読ませるための地） ----------
   板そのものを暗くすると写真が死ぬ。文字の側だけを沈めるほうが、
   写真は写真のまま残り、文字はしっかり立つ。 */
.bs-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* ★区間の上下端でベールを 0 に落とす。横方向のグラデーションだけだと、
     区間の境目で「濃さが急に変わる横線」が出る */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.bs-veil--left {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--bg) 93%, transparent) 0%,
    color-mix(in srgb, var(--bg) 82%, transparent) 26%,
    color-mix(in srgb, var(--bg) 44%, transparent) 54%,
    transparent 82%);
}
.bs-veil--right {
  background: linear-gradient(260deg,
    color-mix(in srgb, var(--bg) 93%, transparent) 0%,
    color-mix(in srgb, var(--bg) 82%, transparent) 26%,
    color-mix(in srgb, var(--bg) 44%, transparent) 54%,
    transparent 82%);
}
/* 結びの下はフッター（不透明）が続くので、下端は落とさない */
.bs-veil--bottom {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 100%);
  background: linear-gradient(6deg,
    color-mix(in srgb, var(--bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--bg) 74%, transparent) 34%,
    color-mix(in srgb, var(--bg) 22%, transparent) 68%,
    transparent 100%);
}

/* ---------- 1｜ファーストビュー ---------- */
.bs-scene--hero { align-items: center; }
.bs-scene--hero .bs-scene__body { max-width: min(46rem, 100%); }

/* ★到着の合図（内田「もっと驚きがほしい」・2026-08-09）。3Dが起動して
   `.has-3d` がドキュメントに付いた瞬間だけ、柔らかい光がさっと差して消える。
   板の起伏が立ち上がる・カメラが到着の一振りをする、のと同じタイミングで
   画面ぜんたいに「何かが起きた」合図を足す。文字より奥（z-index低）に置き、
   可読性は削らない。 */
.bs-flash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;   /* 塗るのではなく「光を足す」。写真の暗部でよく見える */
  background: radial-gradient(58% 55% at 50% 42%,
    #FFFFFF 0%, #FFE7BE 34%, transparent 72%);
}
.has-3d .bs-scene--hero .bs-flash {
  animation: bsHeroFlash 1.4s cubic-bezier(.16,.9,.28,1) both;
}
@keyframes bsHeroFlash {
  0%   { opacity: 0; }
  9%   { opacity: .85; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .has-3d .bs-scene--hero .bs-flash { animation: none; opacity: 0; }
}

/* ★ピントが合う「フォーカスプル」（内田「全力を出して」・2026-08-09）。
   3Dが起動した瞬間、画面全体がわずかにぼけた状態から1.1秒でピントが合う。
   カメラマンが被写体に合焦する、その最初の一呼吸を画面ぜんたいに足す。
   nav-menu.css の `.bs-canvas--page { transition: filter … }`（メニュー開閉用）
   と同じプロパティだが、これは一度きりの再生（animation）なので競合しない。 */
.has-3d .bs-canvas--page {
  animation: bsFocusPull 1.15s cubic-bezier(.19,.86,.24,1) both;
}
@keyframes bsFocusPull {
  0%   { filter: blur(20px) saturate(.62) brightness(.86); }
  100% { filter: blur(0) saturate(1) brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .has-3d .bs-canvas--page { animation: none; }
}

.bs-plate-display {
  font-size: clamp(2.3rem, 5.6vw, 5.2rem);
  line-height: 1.16;
  margin: 1.1rem 0 1.8rem;
  text-shadow: 0 2px 40px color-mix(in srgb, var(--bg) 72%, transparent);
}

/* ---------- 2｜見せ場（板が全面に出る区間） ---------- */
.bs-scene--show {
  min-height: 118svh;
  align-items: flex-end;
  padding-bottom: clamp(4rem, 14svh, 10rem);
}
/* 見せ場は下だけ静かに沈めて、キャプションを箱に入れずに読ませる。
   箱で囲うと、写真の前に紙が1枚出てくる。
   ★帯の両端を 0 にすること（区間の境目に線が出ないように） */
.bs-scene--show::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 60svh; z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg,
    transparent 0%,
    color-mix(in srgb, var(--bg) 62%, transparent) 12%,
    color-mix(in srgb, var(--bg) 86%, transparent) 30%,
    color-mix(in srgb, var(--bg) 40%, transparent) 64%,
    transparent 100%);
}
.bs-caption {
  font-size: clamp(1.15rem, 2.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.8;
  max-width: 32rem;
  padding: 0 0 0 1.2rem;
  margin: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  text-shadow: 0 2px 26px color-mix(in srgb, var(--bg) 85%, transparent);
}
.bs-caption--right {
  margin-left: auto; text-align: right;
  padding: 0 1.2rem 0 0;
  border-left: 0; border-right: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ★「自然は、遊ばせてくれる。」（板6・quote）専用のCSSがどこにも無く、
   本文と同じ小さなpとして出ていた（内田指摘・2026-08-09「もっとでかく」）。
   見出し級の大きさ・太さを新設する。 */
.bs-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 4.8rem);
  line-height: 1.28;
  margin: 0;
  text-shadow: 0 2px 40px color-mix(in srgb, var(--bg) 75%, transparent);
  /* ★親の .bs-plate-col は本文向けの読みやすい幅（38rem）で止まっており、
     大きくした文字サイズだと2行目「遊ばせてくれる。」がそこに収まりきらず、
     「くれ／る。」で3行目に割れていた（内田指摘・2026-08-09、実測で確認）。
     文字サイズは変えず、幅だけ内容に合わせて広げて2行（<br>で指定した
     とおり）に収める。 */
  width: max-content;
  max-width: min(92vw, 48rem);
}

/* ---------- 3｜読ませる区間 ---------- */
.bs-scene--read { align-items: center; }
.bs-scene--read.is-left { justify-content: flex-start; }
.bs-scene--read.is-right { justify-content: flex-end; }
.bs-plate-col { width: min(38rem, 100%); }

/* ---------- 結び ---------- */
.bs-scene--cta { align-items: flex-end; min-height: 108svh; }
.bs-scene--cta .bs-scene__body { width: min(42rem, 100%); }
.bs-cta-row { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.4vw, 18px); }
@media (max-width: 520px) { .bs-cta-row { flex-direction: column; align-items: flex-start; } }

/* ---------- 3Dが無いときの代役 ----------
   `.no-3d` は index.html 先頭のスクリプトが付ける（WebGL不可のときと、
   スクリプトが起動しなかったとき）。display:none のあいだ background-image は
   取りに行かれないので、3Dが動く環境では画像がまるごと落ちてこない。
   ★`:not(.has-3d)` で書くと、3Dが立ち上がるまでの数秒で全部落ちてくる。 */
.bs-plate-fallback { display: none; }
html.no-3d .bs-plate-fallback {
  display: block;
  position: absolute; inset: 0; z-index: 0; margin: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}

/* ---------- 縦画面 ---------- */
@media (max-width: 860px) {
  .bs-scene { padding: clamp(4.5rem, 10vh, 7rem) var(--pad); }
  .bs-scene--read.is-right { justify-content: flex-start; }
  .bs-plate-col { width: 100%; }
  .bs-caption { max-width: 100%; }
  .bs-caption--right {
    text-align: left; margin-left: 0;
    border-right: 0; border-left: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  }
  /* 縦画面は横に逃がす余地が無いので、ベールを縦にする。
     ここも両端を 0 にして、区間の境目に線が出ないようにする */
  .bs-veil--left,
  .bs-veil--right {
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--bg) 66%, transparent) 13%,
      color-mix(in srgb, var(--bg) 76%, transparent) 46%,
      color-mix(in srgb, var(--bg) 66%, transparent) 87%,
      transparent 100%);
  }
  .bs-scene--show { min-height: 92svh; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-scene { min-height: auto; }
  .bs-scene--show { min-height: 60svh; }
}