/* =============================================================================
   Entry bridge — 「開演の瞬間」
   公開ページ（紙の総譜）からアプリ（暗いホール）への橋。
   ページ上部はプログラム冊子の紙、下へ沈むとホールの暗がりでログインする。
   login.html（.entry-bridge を含む画面）でのみ読み込まれる。
   ============================================================================= */

/* opening.html側もこのat-ruleで同意しているときだけ、ブラウザが
   ページ遷移をネイティブのクロスフェード/モーフィングでつなぐ。
   未対応ブラウザではこのルールは無視され、従来通りの即時遷移になる。 */
@view-transition {
  navigation: auto;
}

/* 紙の降下と同じ速度で、昼の紙から夜のホールへゆったり溶け合わせる。 */
::view-transition-group(root),
::view-transition-group(bridge-paper) {
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
}

body:has(.entry-bridge){
  background:
    linear-gradient(180deg,
      #f6f1e4 0,
      #f6f1e4 142px,
      #ded5c3 166px,
      #4a4a4d 214px,
      #171c24 252px,
      #0d1117 286px,
      #0d1117 100%);
}

body:has(.entry-bridge) .container{
  max-width:560px;
  min-height:100vh;
  padding:0 16px 28px;
}

.entry-bridge{
  --bridge-top-pad:max(30px, calc(env(safe-area-inset-top) + 14px));
  position:relative;
  margin:0 -16px 18px;
  padding:var(--bridge-top-pad) 18px 24px;
  text-align:center;
  view-transition-name:bridge-paper;
}

/* 紙の部分にだけ五線を敷く。文字の上余白(--bridge-top-pad)に追随させる。 */
.entry-bridge::before{
  content:"";
  position:absolute;
  inset:calc(var(--bridge-top-pad) - 4px) 0 auto;
  height:88px;
  z-index:-1;
  background-image:linear-gradient(to bottom,
    rgba(72,70,60,.22) 0 1px, transparent 1px 11px,
    rgba(72,70,60,.22) 11px 12px, transparent 12px 22px,
    rgba(72,70,60,.22) 22px 23px, transparent 23px 33px,
    rgba(72,70,60,.22) 33px 34px, transparent 34px 44px,
    rgba(72,70,60,.22) 44px 45px, transparent 45px 100%);
  -webkit-mask-image:linear-gradient(to right, transparent, black 18%, black 82%, transparent);
  mask-image:linear-gradient(to right, transparent, black 18%, black 82%, transparent);
}

/* 紙と闇の境界に赤い糸 */
.entry-bridge::after{
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(178,58,44,.65), transparent);
}

.bridge-kicker{
  margin:0 0 8px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-weight:600;
  font-size:15px;
  letter-spacing:.12em;
  color:#b23a2c;
}

.bridge-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.bridge-mark{
  width:44px;
  height:44px;
  flex:none;
  object-fit:contain;
}

.bridge-brand .brand-script{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-weight:600;
  font-size:26px;
  line-height:1;
  color:#b23a2c;
}

.bridge-brand .brand-word{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-weight:700;
  font-size:20px;
  letter-spacing:.2em;
  color:#20222a;
}

.bridge-sub{
  margin:7px 0 0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.14em;
  color:rgba(32,34,42,.62);
}

/* 暗がり側：このページの主ボタンだけ赤鉛筆の赤 */
body:has(.entry-bridge) .btn-primary{
  background:linear-gradient(135deg,#c4503e,#a8341f);
  border-color:rgba(220,110,90,.55);
  box-shadow:0 10px 26px -10px rgba(196,80,62,.55);
  color:#fff;
  font-weight:600;
}

body:has(.entry-bridge) .btn-primary:hover{
  background:linear-gradient(135deg,#d05a47,#b23a2c);
}

body:has(.entry-bridge) .scr-title{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  font-size:19px;
  font-weight:600;
  line-height:1.4;
  margin-bottom:6px;
}

/* 認証画面の本文。ヘッダーの演出と操作領域を分離し、同じ幅・間隔で揃える。 */
.auth-flow{
  width:100%;
  max-width:520px;
  margin:0 auto;
}

.auth-flow .back-btn{
  min-height:36px;
  margin:0 0 18px;
  padding:5px 2px;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(210,220,238,.72);
}

.auth-flow .back-btn:hover{
  background:transparent;
  color:#fff;
}

.auth-flow .scr-sub{
  margin-bottom:22px;
  font-size:13px;
  line-height:1.7;
  color:rgba(190,205,230,.76);
}

.auth-flow .form-group{
  margin-bottom:16px;
}

.auth-flow .form-label{
  margin-bottom:7px;
  font-size:13px;
  line-height:1.5;
  color:rgba(205,216,235,.78);
}

.auth-flow .form-input{
  min-height:52px;
  padding:13px 15px;
  border:1px solid rgba(180,198,225,.2);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  font-size:16px;
  line-height:1.5;
}

.auth-flow .form-input:focus{
  border-color:rgba(217,106,87,.75);
  box-shadow:0 0 0 3px rgba(217,106,87,.13);
}

.auth-flow .btn{
  min-height:52px;
  padding:13px 16px;
  border-radius:12px;
  font-size:14px;
  line-height:1.4;
}

.auth-flow .btn-secondary{
  border:1px solid rgba(180,198,225,.18);
  background:rgba(255,255,255,.025);
  color:rgba(195,208,232,.78);
}

.auth-flow > form + .alert,
.auth-flow > form + div,
.auth-flow > .alert + div{
  margin-top:18px !important;
}

.auth-flow .alert{
  margin-bottom:18px;
  padding:13px 15px;
  border-width:1px;
  border-radius:12px;
  font-size:13px;
  line-height:1.75;
}

.auth-flow .alert-info{
  border-color:rgba(180,198,225,.18);
  background:rgba(255,255,255,.035);
  color:rgba(190,205,230,.78);
}

body:has(.entry-bridge) .footer{
  display:flex;
  width:100%;
  margin-top:26px;
  padding-top:16px;
}

@media (min-width:640px){
  body:has(.entry-bridge) .container{
    max-width:600px;
    padding-inline:24px;
  }

  .entry-bridge{
    margin-inline:-24px;
  }

  .auth-flow .scr-title{
    font-size:21px;
  }
}

/* :has 非対応ブラウザでは従来表示のまま（装飾ヘッダーのみ紙で出る） */
@media (prefers-reduced-motion: reduce){
  .entry-bridge{animation:none}
}

/* オープニング直後のテンポを守る：この画面ではグローバルローダーを出さない
   （重いデータを読むメニュー画面等では従来どおり表示される） */
body:has(.entry-bridge) .global-loader{
  display:none !important;
}