/* =========================================================================
   スタート演出 案B「ログイン画面」— 確認用の試作（start-b.html だけが読み込む）
   黒い画面にゲームのログインパネル → 自動入力 → LOGIN → 進行線 → WELCOME → 斜めの一閃で FV へ。
   色：黒／チャコール（面）／紙（主役の文字）／グレー（補足）。
   ライムは信号だけ：キャレット・ボタン下端の3px線・進行線（2px）・出口の一閃（2px）。
   ========================================================================= */

.startb { display: none; }
.js .startb {
  display: block;
  position: fixed; inset: 0; z-index: 55; /* ナビ(50)より上。紙の粒子感(60)とカーソル(70)はそのまま上に乗る */
  overflow: hidden;
  touch-action: none; overscroll-behavior: contain;
  -webkit-user-select: none; user-select: none;
  /* JS が読み込めなかった時の保険：7秒後に必ず見えなくする */
  animation: startbFailsafe 0.01s linear 7s forwards;
}
@keyframes startbFailsafe { to { visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .startb { display: none; }
}

/* 画面全体の黒い面。出口で2枚に割るため、中身ごと1枚にまとめておく（2枚目は JS が複製） */
.startb__half { position: absolute; inset: 0; background: var(--black); }
.startb__scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 20px; }
.startb__scene > * { grid-area: 1 / 1; }

/* ---------- ログインパネル ---------- */
.startb__panel {
  position: relative;
  width: min(392px, 100%);
  padding: 26px 28px 30px;
  background: var(--charcoal);
  border: 1px solid rgba(140, 143, 150, 0.42);
  opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity 0.34s var(--ease-out), transform 0.6s var(--ease-out);
}
.startb.is-on .startb__panel { opacity: 1; transform: none; }
.startb.is-welcome .startb__panel {
  opacity: 0; transform: translate3d(0, -8px, 0);
  transition-duration: 0.18s, 0.3s;
}

.startb__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid rgba(140, 143, 150, 0.26);
}
.startb__logo { font-family: var(--f-ja); font-weight: 900; font-size: 26px; letter-spacing: -0.04em; line-height: 1; color: var(--paper); }
.startb__tag { font-family: var(--f-en); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; line-height: 1; color: var(--gray); }

.startb__label {
  display: block; margin-bottom: 8px;
  font-family: var(--f-en); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; line-height: 1; color: var(--gray);
}
.startb__field {
  display: flex; align-items: center;
  height: 48px; padding: 0 14px; margin-bottom: 18px;
  background: var(--black);
  border: 1px solid rgba(140, 143, 150, 0.3);
  font-family: var(--f-en); font-weight: 700; font-size: 20px; letter-spacing: 0.1em; line-height: 1; color: var(--paper);
  transition: border-color 0.3s var(--ease-out);
}
.startb__field.is-active { border-color: rgba(242, 239, 232, 0.5); } /* 入力中の欄は紙色の枠（ライムの枠にはしない） */
.startb__val { white-space: pre; }
.startb__val--pw { font-family: var(--f-ja); font-size: 11px; letter-spacing: 0.46em; transform: translateY(-1px); }

/* キャレット：ライムの細い縦線。入力中は点灯、待機中は点滅 */
.startb__caret { display: block; flex: none; width: 2px; height: 22px; margin-left: 2px; background: var(--lime); opacity: 0; }
.startb__field.is-active .startb__caret { opacity: 1; animation: startbBlink 1s steps(1, end) infinite; }
.startb__field.is-typing .startb__caret { animation: none; }
@keyframes startbBlink { 50% { opacity: 0; } }

/* LOGIN：サイトのボタンと同じ「紙の塗り＋黒文字＋下端にライムの3px線」。押されると白黒反転 */
.startb__btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 54px; margin-top: 8px;
  background: var(--paper); color: var(--black);
  font-family: var(--f-en); font-weight: 900; font-style: italic; font-size: 21px; letter-spacing: 0.05em; line-height: 1;
  transition: background-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear;
}
.startb__btn b { font-weight: 900; }
.startb__btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lime); }
.startb__btn.is-pressed {
  background: var(--black); color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(242, 239, 232, 0.72);
  animation: startbPress 0.28s var(--ease-out);
}
@keyframes startbPress { 35% { transform: scale(0.975); } }

/* 進行線：パネルの下辺を左から満ちる */
.startb__progress {
  position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px;
  background: var(--lime);
  transform: scaleX(0); transform-origin: left center;
}
.startb.is-loading .startb__progress { transform: scaleX(1); transition: transform 0.4s var(--ease-cut); }

/* ---------- WELCOME ---------- */
.startb__welcome {
  font-family: var(--f-en); font-weight: 900; font-style: italic;
  font-size: clamp(56px, 8.2vw, 124px); line-height: 0.9; letter-spacing: 0.01em;
  color: var(--paper); text-align: center; white-space: nowrap;
  pointer-events: none;
}
.startb__welcome .ln { display: inline-block; overflow: hidden; padding: 0.04em 0.1em; vertical-align: top; }
.startb__welcome .ln + .ln { margin-left: -0.12em; } /* 斜体のはみ出し用の余白ぶん、語間を詰める */
.startb__welcome .ln > span { display: inline-block; transform: translate3d(0, 108%, 0); }
/* パネルが消えかけてから立ち上がる（重なって濁らないように） */
.startb.is-welcome .startb__welcome .ln > span { transform: none; transition: transform 0.44s var(--ease-out) 0.1s; }
.startb.is-welcome .startb__welcome .ln + .ln > span { transition-delay: 0.15s; }

/* ---------- 出口：斜めの一閃 ---------- */
.startb__slash {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 2px; height: var(--len, 160vh);
  margin: calc(var(--len, 160vh) / -2) 0 0 -1px;
  transform: rotate(17deg); /* サイト共通の斜め（-17deg の傾き）と同じ角度 */
  pointer-events: none;
}
.startb__slash i { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleY(0); transform-origin: 50% 100%; }

/* 出口が始まったら中の遷移を止めて、割れた2枚の絵をそろえる */
.startb.is-exit .startb__scene * { transition: none !important; }
.startb.is-exit .startb__caret { opacity: 0 !important; animation: none; }
.startb.is-exit { cursor: default; }

/* ---------- SKIP ---------- */
.startb__skip {
  position: absolute; top: 18px; right: var(--gutter); z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(140, 143, 150, 0.36);
  font-family: var(--f-en); font-weight: 700; font-size: 13px; letter-spacing: 0.24em; line-height: 1;
  color: var(--gray);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), opacity 0.2s linear;
}
.startb__skip:hover { color: var(--paper); border-color: rgba(242, 239, 232, 0.6); }
.startb.is-exit .startb__skip { opacity: 0; pointer-events: none; }
.startb__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- SP ---------- */
@media (max-width: 899px) {
  .startb__skip { top: 12px; }
  .startb__panel { padding: 22px 22px 26px; }
  .startb__welcome { font-size: min(18vw, 88px); line-height: 0.92; }
  .startb__welcome .ln { display: block; }
  .startb__welcome .ln + .ln { margin-left: 0; }
}