/* =========================================================
   トップのファーストビュー：夜間飛行（2026-10-30）
   写真が無いとき（sections.toml の [hero] image が空）に、夜景のループ動画（js/hero-night.js）を全面に敷く
   style.css の .hero の上書き。トップだけで読み込む（templates/index.html の head）
   元の絵：tools/hero_video_v2/ → python make_hero_video_v2.py で design-proto/hero-v2/ に書き出し、public/ へ入れる
   ========================================================= */
/* 動画が出るまでの1枚の画（最初に流す A の1コマ目。templates/index.html の preload と同じ URL にする）。動きを減らす設定の人には、郵便機が大きく写った A の1コマ */
.hero--night { background: #03040a url("../images/hero/hero-night-start-pc.jpg") center 40% / cover no-repeat; }
@media (max-width: 768px) { .hero--night { background-image: url("../images/hero/hero-night-start-sp.jpg"); } }
@media (prefers-reduced-motion: reduce) {
  .hero--night { background-image: url("../images/hero/hero-night-pc.jpg?v=20261102"); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .hero--night { background-image: url("../images/hero/hero-night-sp.jpg?v=20261102"); }
}
/* 動画を止めるボタン（左上） */
.hero__pause { position: absolute; top: 16px; left: 16px; z-index: 1; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; }
.hero__pause:hover { background: rgba(0, 0, 0, .6); }
.hero__pause-icon { position: absolute; top: 50%; left: 50%; width: 12px; height: 14px; transform: translate(-50%, -50%); border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
/* 止めているときは ▶ */
.hero__pause[aria-pressed="true"] .hero__pause-icon { width: 0; height: 0; border-width: 8px 0 8px 13px; border-style: solid; border-color: transparent transparent transparent currentColor; transform: translate(-35%, -50%); }
.hero__night { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%;; opacity: 0; transition: opacity 1.2s ease; }
/* 2本の動画を重ねて、流しているほうだけ見せる（切り替えはフェード） */
.hero__night.is-on { opacity: 1; }
/* 縦書きのコピーが読めるよう、右上だけ少し暗くする。左下は「MARCH ON」が読める程度に薄く沈める
   （2026-10-30：説明の帯のために強く暗くしたのを戻した。FV は映像とコピーで見せる） */
.hero--night::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(3, 4, 10, .55) 0%, transparent 35%),
    radial-gradient(ellipse 50% 60% at 78% 30%, rgba(0, 0, 0, .45), transparent 70%);
}

/* 縦書きのコピー：『夜間飛行』の文学っぽさに合わせて明朝 */
.hero--night .hero__copy {
  /* 右下の「先輩の声」カード（幅172px＋余白）の列に入らないよう、右から 220px 以上あける（2026-10-30 レビュー：1280×720 などで「る。」が隠れた） */
  top: 8%; right: max(10%, 220px);
  font-family: var(--font-mincho); font-weight: 700;
  letter-spacing: .14em; line-height: 1.6;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}
/* 文字の大きさは、画面の幅だけでなく高さも見る（横長で背の低い画面で、コピーが下に伸びすぎないように） */
.hero--night .hero__catch { font-size: clamp(28px, min(3.4vw, 5.2svh), 52px); font-weight: 900; letter-spacing: .14em; }
.hero--night .hero__sub { margin-top: 5em; font-size: clamp(15px, min(1.5vw, 2.3svh), 22px); letter-spacing: .1em; color: #e8e8ee; }
/* 「最初のお客さん」は街の灯りと同じオレンジ */
.hero--night .hero__sub em { color: #ffd9a8; font-size: 1.4em; }

/* 左下：MARCH ON（大きく、細く）。何のサイトかの h1 は画面には出さない（visually-hidden） */
.hero__lede { position: absolute; left: 6%; bottom: 9%; max-width: 70%; }
.hero--night .hero__en {
  position: static; margin: 0;
  font-family: var(--font-en); font-weight: 300;
  font-size: clamp(40px, 5.6vw, 88px); line-height: 1; letter-spacing: .26em; white-space: nowrap;
  transform: none; background: none; color: rgba(255, 255, 255, .78); filter: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__lede { animation: hero-in .9s ease .4s both; }
}

/* 右下の「先輩の声」カード：虹色のグラデーション（style.css）をやめ、黒地に細い枠 */
.hero--night .hero__card { background: rgba(8, 10, 18, .72); border: 1px solid rgba(255, 255, 255, .28); color: var(--on-dark); backdrop-filter: blur(6px); }
.hero--night .hero__card:hover { border-color: var(--accent-light); }

/* 「先輩の声」の文字の色（style.css の .hero__card は黒文字） */
.hero--night .hero__card-title { color: var(--on-dark); }

@media (max-width: 768px) {
  .hero--night .hero__copy { top: 4%; right: 7%; }
  .hero--night .hero__catch { font-size: clamp(24px, 4.2svh, 32px); }
  .hero--night .hero__sub { margin-top: 3.5em; font-size: 15px; }
  /* スマホ：説明は下の「先輩の声」「募集中」の上に、左右いっぱいで */
  .hero__lede { left: 16px; right: 16px; bottom: 96px; max-width: none; }
  .hero--night .hero__en { font-size: clamp(36px, 12vw, 56px); letter-spacing: .16em; }
  /* カードは画像を外して、ボタンと同じ高さの小さな札に（説明の場所を空けるため） */
  .hero--night .hero__card { width: auto; padding: 12px 16px; border-radius: 999px; }
  .hero--night .hero__card-img { display: none; }
  .hero--night .hero__card-title { margin: 0; font-size: var(--fs-label); white-space: nowrap; }
}
/* 背の低いスマホ（iPhone SE など）では、コピーを小さく詰める */
@media (max-width: 768px) and (max-height: 700px) {
  .hero--night .hero__copy { top: 3%; }
  .hero--night .hero__catch { font-size: 22px; }
  .hero--night .hero__sub { margin-top: 3em; font-size: 13px; }
}
/* 背の低いPC（1280×720 など）：説明が縦書きのコピーと重ならないよう小さく */
@media (min-width: 769px) and (max-height: 760px) {
  .hero--night .hero__en { font-size: clamp(36px, 4.6vw, 64px); }
}