/*
 * midnight-message.css
 * 同志社幼稚園 — 深夜0時台限定「今月の聖句」＋「卒園生へのメッセージ」演出
 * 縦書きレイアウト版
 *
 * 設計方針:
 *  .midnight-message は通常の横書き flex (row-reverse)。
 *  その中の .midnight-verse-col と .midnight-alumni-col それぞれに
 *  writing-mode: vertical-rl を設定する。
 *  → 縦書きコンテナの中で flex を使うと軸が変わって崩れるため、
 *    親は横書き flex、子だけ縦書きにすることで安定させる。
 */

/* ============================================================
   オーバーレイ（#intro を全面覆う）
   ============================================================ */
.midnight-overlay {
  position: fixed;   /* body直下に追加するため fixed でビューポート全体を覆う */
  inset: 0;
  /* iOS Safari 用フォールバック（inset 未対応・overflow:hidden 干渉対策） */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;    /* ナビゲーション等すべての上に */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
  padding: 4vh 0 3vh;        /* 上下に余白を確保してテキスト上端が切れないようにする */
  overflow: hidden;          /* コンテンツが#intro枠をはみ出さないよう */
  background: rgba(5, 7, 20, 0.80);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-style: normal;        /* #intro の italic 継承を打ち消す */
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none;
}

.midnight-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.midnight-overlay.is-hiding {
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease;
}

/* ============================================================
   閉じるボタン（オーバーレイ右上）
   ============================================================ */
.midnight-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: none;
  border: none;
  color: rgba(210, 205, 190, 0.45);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.4em 0.6em;
  transition: color 0.25s;
  z-index: 52;
  font-family: sans-serif;
}

.midnight-close:hover,
.midnight-close:focus {
  color: rgba(255, 252, 240, 0.9);
  outline: none;
}

/* ============================================================
   同志社ロゴ（上部中央）
   ============================================================ */
.midnight-logo {
  height: min(7vh, 40px);
  width: auto;
  opacity: 0.50;
  display: block;
  flex-shrink: 0;
}

/* ============================================================
   メッセージ: 右→左に2列を横並び
   row-reverse により DOM 先頭要素が視覚的右端になる
   （聖句を右、卒園生を左 = 日本語縦書きの自然な並び）
   ============================================================ */
.midnight-message {
  display: flex;
  flex-direction: row-reverse;   /* 右: 聖句列、左: 卒園生列 */
  align-items: flex-start;
  gap: 3.5em;
  color: #e8e4db;
}

/* ============================================================
   #intro から継承するスタイルを !important で上書き
   （#intro p 等は ID を含むため詳細度が高い）
   ※ 主要要素は <p> → <div> に変更済みのため干渉は大幅に減少。
     万一の継承対策として span も対象にしておく。
   ============================================================ */
.midnight-overlay div,
.midnight-overlay p,
.midnight-overlay span {
  text-align: start !important;
  font-style: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   聖句列
   ─ display: flex / flex-direction: column で
     vertical-rl における block 方向（右→左）をメイン軸にする
   ─ cross 軸 = inline 方向 = 上→下
   ─ align-items: flex-start → 各列を上揃え
   ─ .midnight-reference-body は align-self: flex-end で下揃え
   ============================================================ */
.midnight-verse-col {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  flex-direction: column;   /* vertical-rl: block 方向 = 右→左 = 列が右から並ぶ */
  align-items: flex-start;  /* cross 軸（上→下）: flex-start = 上揃え */
  max-height: min(65vh, 420px);
  overflow: hidden;
}

/* ============================================================
   卒園生列
   ─ verse-col と同様 flex で管理することで
     テキストが max-height を超えても左へ折り返し列が生まれない
   ============================================================ */
.midnight-alumni-col {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  flex-direction: column;   /* vertical-rl: block 方向 = 右→左 = 列が右から並ぶ */
  align-items: flex-start;  /* cross 軸（上→下）: flex-start = 上揃え */
  max-height: min(65vh, 420px);
  overflow: hidden;
}

/* ============================================================
   ラベル（p = block → vertical-rl で独立した列を形成）
   ============================================================ */
.midnight-label,
.midnight-alumni-label {
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  color: rgba(185, 208, 200, 0.48);
  margin: 0;
}

/* ============================================================
   本文ブロック（p = block → ラベルの隣の列）
   margin-block-start でラベル列との間隔を調整
   ============================================================ */
.midnight-verse-body,
.midnight-alumni-body {
  margin-block-start: 1.2em !important;  /* ラベル列との間隔（グローバルリセットを上書き） */
}

/* ============================================================
   聖句出典（.midnight-verse-col の最後の flex アイテム）
   align-self: flex-end → cross 軸（上→下）の末尾 = 下揃え
   ============================================================ */
.midnight-reference-body {
  margin-block-start: 0.6em !important;  /* 聖句本文列との間隔（グローバルリセットを上書き） */
  align-self: flex-end;                  /* 縦方向の下端に揃える */
}

/* ============================================================
   聖句テキスト（inline → verse-body 内を1本の流れに）
   ============================================================ */
.midnight-verse {
  font-size: clamp(0.82rem, 1.6vw, 1.0rem);
  line-height: 2.2;
  letter-spacing: 0.18em;
  color: rgba(248, 242, 228, 0.96);
  font-weight: 300;
  display: inline;
}

.midnight-reference {
  font-size: 0.76rem;
  color: rgba(180, 198, 192, 0.46);
  letter-spacing: 0.12em;
  display: inline;
}

/* ============================================================
   卒園生メッセージ（inline → alumni-body 内を1本の流れに）
   ============================================================ */
.midnight-alumni-message {
  font-size: clamp(0.78rem, 1.5vw, 0.92rem);
  line-height: 2.2;
  letter-spacing: 0.15em;
  color: rgba(222, 216, 200, 0.78);
  font-weight: 300;
  display: inline;
}

/* ============================================================
   音楽ボタン（.midnight-overlay の直接の子 → 横書き）
   ============================================================ */
.midnight-audio-button {
  writing-mode: horizontal-tb;
  background: none;
  border: 1px solid rgba(185, 208, 200, 0.22);
  border-radius: 100px;
  color: rgba(185, 208, 200, 0.46);
  font-size: 0.68rem;
  letter-spacing: 0.20em;
  padding: 0.5em 1.6em;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: inherit;
}

.midnight-audio-button:hover,
.midnight-audio-button:focus,
.midnight-audio-button.is-playing {
  color: rgba(218, 236, 228, 0.85);
  border-color: rgba(185, 208, 200, 0.48);
  outline: none;
}

/* ============================================================
   モバイル (≤736px)
   ─ デスクトップ: justify-content: center → コンテンツが収まれば中央に
   ─ モバイル: justify-content: flex-start → 上詰めにしてロゴが絶対に切れないようにする
     （#intro がモバイルで短く設定されており、center だと上端が overflow:hidden でクリップされる）
   ============================================================ */
@media screen and (max-width: 736px) {
  .midnight-overlay {
    justify-content: flex-start;   /* 上詰め → ロゴが画面上端に常に表示される */
    padding-top: 6vh;
    padding-bottom: 2vh;
    gap: 1em;
  }
  .midnight-logo {
    height: min(4vh, 26px);
  }
  .midnight-verse-col,
  .midnight-alumni-col {
    max-height: min(52vh, 310px);
  }
  .midnight-message {
    gap: 2em;
  }
  .midnight-verse {
    font-size: clamp(0.92rem, 3.5vw, 1.1rem);
    line-height: 2.2;
  }
  .midnight-alumni-message {
    font-size: clamp(0.82rem, 3.0vw, 0.95rem);
    line-height: 2.2;
  }
}

/* ============================================================
   prefers-reduced-motion 対応
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .midnight-overlay,
  .midnight-overlay.is-hiding {
    transition: none;
  }
}