/* ═══════════════════════════════════════════════════════
   finale-cheki.css — 「はじめる」の締め＝チェキ3×3が画面いっぱいに満ちる
   2026-07-30 社長確定（G1・9枚・角度は手置きで総和0°・カードは重なる）
   座標は確定版キャンバス（はじめる-均等×角度バラバラ-3案 G1）の実値をそのまま移植。
   393×852 の座標系で組み、--fs で丸ごと拡縮する＝比率205:292は不可侵。
   ═══════════════════════════════════════════════════════ */
.finale{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden;contain:layout paint;--fs:1}
/* 2026-07-30 社長FB: 締めのコピーがチェキに隠れて読めない。コピー帯だけ最前面へ上げる
   （スクリム z30 は .finale の内側なのでコピーの下に入る＝文字の背後だけ和らぐ） */
.journey.is-finale .journey-reading{position:relative;z-index:40}
/* ★重なりの正しい積み方（2026-07-30 実測で二度是正）
   ・layout ごと z-index:40 にすると、中の .journey-visual（＝実機）も一緒に
     .finale(z9) より前へ出て、あふれ出したチェキが実機の裏に回って濁る。
   ・かといって放置すると、base の `.journey-layout{z-index:1}` が
     **重なり文脈を作ってしまい**、中の .journey-reading の z-index:40 が
     その文脈に閉じ込められてコピーごとチェキの下に沈む
     （低い画面ほどチェキが上まで来るので実害が出る。実測 360x640 で見出しが消えた）。
   → layout の z-index を auto に戻して文脈を作らせない。
     そうすれば sticky の文脈で コピー(40) > チェキ(9) > 実機(1) の順に積める。 */
.journey.is-finale .journey-layout{z-index:auto}
.journey.is-finale .journey-visual{position:relative;z-index:1}
.finale-stage{position:absolute;top:50%;left:50%;width:393px;height:852px;transform:translate(-50%,-50%) scale(var(--fs));transform-origin:50% 50%}
.finale .fk{position:absolute;top:0;left:0;width:205px;transform-origin:50% 50%;
  /* 2026-07-30 社長FB: 実機から飛び出す。--spread（0〜1）をJSがスクロール量から渡す。
     s=0 は実機の中心（x=143.5 y=350 ・小さく・透明）→ s=1 で確定座標へ。 */
  /* 2026-07-30 社長FB: あふれ出しの起点は「ひとり歩きした」チェキの位置（実機中央でなくカードのところ）。
     visual center = (x - 36.5 + ox) + 102.5 なので、起点(196.5, 502) になるよう逆算している。 */
  --s:var(--spread,0);
  --ox:calc((130.5px - var(--x)) * (1 - var(--s)));
  --oy:calc((408px - var(--y)) * (1 - var(--s)));
  /* 2026-07-30 社長FB: チェキは薄くしない。出た瞬間から不透明（登場の差は位置と大きさでつける） */
  opacity:calc(var(--s) * 14 - var(--i,0) * 1.5);
  transform:translate3d(calc(var(--x) - 36.5px + var(--ox)),calc(var(--y) - 52px + var(--oy)),0) rotate(calc(var(--r) * var(--s))) scale(calc(0.24 + 0.4039 * var(--s)));
  transition:none}
.finale.is-in .fk{}
/* 幅132px＝確定値（205 × .6439）。カードは意図的に重なる（びっしり） */
.finale .fk:nth-child(1){--x:-6.8px;--y:193.3px;--r:-6deg;--i:4}
.finale .fk:nth-child(2){--x:124.4px;--y:182.5px;--r:-2.5deg;--i:2}
.finale .fk:nth-child(3){--x:256.2px;--y:182.3px;--r:6.5deg;--i:5}
.finale .fk:nth-child(4){--x:-4.8px;--y:368.8px;--r:4deg;--i:1}
.finale .fk:nth-child(5){--x:129.9px;--y:369.9px;--r:-1deg;--i:0}
.finale .fk:nth-child(6){--x:265px;--y:370.4px;--r:-4.5deg;--i:3}
.finale .fk:nth-child(7){--x:7.3px;--y:556.6px;--r:-5deg;--i:6}
.finale .fk:nth-child(8){--x:132.9px;--y:564.3px;--r:1.5deg;--i:7}
.finale .fk:nth-child(9){--x:257.7px;--y:562.8px;--r:7deg;--i:8}
.finale .fk:nth-child(1){z-index:21}.finale .fk:nth-child(2){z-index:22}.finale .fk:nth-child(3){z-index:23}
.finale .fk:nth-child(4){z-index:24}.finale .fk:nth-child(5){z-index:25}.finale .fk:nth-child(6){z-index:26}
.finale .fk:nth-child(7){z-index:27}.finale .fk:nth-child(8){z-index:28}.finale .fk:nth-child(9){z-index:29}
/* コピー帯を守るスクリム（チェキの上・コピーの下） */
.finale-scrim{position:absolute;inset:0 0 auto;height:206px;z-index:30;pointer-events:none;opacity:calc((var(--spread,0) - .18) * 2.4);
  background:linear-gradient(rgba(250,248,244,.99) 0,rgba(250,248,244,.97) 120px,rgba(250,248,244,.72) 168px,rgba(250,248,244,0))}
.finale.is-in .finale-scrim{}
/* 2026-07-30 社長FB: 「はじめる」はまず**ホーム**の実機に戻る。
   直前の節の「そだち」画面が残ってしまうので、締めではホーム以外のビューを伏せる。 */
.journey.is-finale .journey-sodachi-view,
.journey.is-finale .sodachi-demo-view,
.journey.is-finale .record-detail-view{opacity:0!important;visibility:hidden!important}
.journey.is-finale .journey-home-view{opacity:1!important;visibility:visible!important;transform:none!important}
/* base はスクロールごとにトラックを書き換えるので !important で固定する。
   -890px = 1歳2ヶ月の章が中央、上に10ヶ月の棚が覚く位置（2026-07-30 社長確定） */
.journey.is-finale [data-home-track]{transform:translate3d(0,-890px,0)!important}
/* ホームは「ひとり歩きした」が見える位置で止める（最新章＝1歳2ヶ月を中央に）。
   スクロール位置は finale-cheki.js が締めに入った瞬間に合わせる。
   カードの不透明度は base が inline で書くので、締めでは強制して全枚見せる。 */
.journey.is-finale .journey-home-view [data-home-card]{opacity:1!important}
/* 締めに入ったら単票のチェキは出さない。実機は飛び出しの進行に合わせて退場 */
.journey.is-finale .journey-final-card{opacity:0!important;visibility:hidden!important}
/* ★!important が要る（2026-07-30 実測でCD納品にも同じ症状を確認）。
   base の renderJourney が .shared-phone へ **インラインで** opacity を書き、
   SPでは p=0.82〜0.89 で 1→0 に落とす。CSSの通常規則では勝てないため、
   §10-4-2 の「待機中は鮮明」「退場しても0.5まで＝消し切らない」が実現していなかった
   （実測: p=0.86 で 0.367 / p=0.90 以降 0）。track を !important で固定したのと同じ理由。 */
/* ★2026-07-31 社長「チェキ群の背景の実機が消えるようにしてほしい」（PC・モバイル両方）
   §10-4-2 の「0.5まで＝消し切らない」を撤回して**完全に消す**。
   対象は画面だけでなく**実機ユニット全体**（ベゼルとサイドボタンが残って枠だけ浮いていた）。 */
.journey.is-finale .shared-phone,
.journey.is-finale .shared-phone-entrance{opacity:calc(1 - var(--phone-fade,0))!important}
/* 消え切ったら描画も止める（枠の縁が1pxだけ残るのを防ぐ） */
.journey.is-finale.is-phone-gone .journey-visual{visibility:hidden}
/* PC＝右カラム内に収める。左のコピーへはかからない */
@media (min-width:1041px){.finale{--fs:.86;right:0;left:auto;width:50%}.finale-scrim{display:none}}
@media (min-width:1601px){.finale{--fs:.98}}
/* 561〜1040pxも2カラム（コピー左・実機右）。JSが右カラムの実寸に合わせるので
   ここは初期値だけ持つ（全幅のままだとチェキが左のコピーに乗る＝実測で確認） */
@media (min-width:561px) and (max-width:1040px){.finale{--fs:.78;right:0;left:auto;width:50%}}
@media (max-width:560px){.finale{--fs:.9}}
/* SP版の境界は本番では560px（社長FB 2026-07-30）。縦向きは等倍で確定座標のまま出す */
@media (max-width:560px) and (orientation:portrait){.finale{--fs:1}}
@media (prefers-reduced-motion:reduce){
  .finale .fk{--s:1}
}