/* =============================================================================
   PATCHWORK DEAD × TapNow LP — hero（ファーストビュー）
   v4（ユーザー直接フィードバック対応）: 切り抜きはどこにも使わない。
   専用キービジュアル（GPT Image 2.5・ネネとルカが秋の通りに大きく立つ絵）を
   数秒見せたあと、黒を挟まず鮮明な hero-loop 動画へディゾルブし、また戻る。
   ロゴ＋キャッチコピーだけを上に重ね、期間・報酬・CTA は下端の帯に格納する。
   ========================================================================== */
/* header は position:sticky で通常フローの高さ(64px)を占有するため、何もしない
   と #hero がその分下にずれ、下端が 64px ビューポート外に出てしまう
   （初回表示で hero-band が見切れる実害があった）。hero だけ引き上げて、
   透明なヘッダーがその上に重なる「オーバーレイ」に見せる。 */
.hero {
  position: relative;
  height: 100svh; min-height: 620px; height: 100dvh;
  margin-top: -64px;
  overflow: hidden; isolation: isolate;
}
@media (max-width: 640px) { .hero { margin-top: -52px; } }

/* ---- キービジュアル ⇄ 動画のディゾルブ（黒を挟まない） ------------------------
   2枚のレイヤーを同じ位置に重ね、逆位相の opacity アニメーションでクロス
   フェードさせる。一方が完全に消える前にもう一方が現れ始めるので、暗転しない。 */
.hero-bg-layer { position: absolute; inset: 0; z-index: var(--z-bg); border-radius: 0; }
.hero-bg-layer--key { animation: hero-cross-key 18s ease-in-out infinite; }
.hero-bg-layer--video { animation: hero-cross-video 18s ease-in-out infinite; }
.hero-bg-layer--key img, .hero-bg-video { width: 100%; height: 100%; object-fit: cover; }
.hero-bg-video { transform: scale(1.02); }
/* v9: ポートレート⇄ランドスケープの出し分けを <picture><source media> に
   移した（hero.js 参照）。どちらのファイルが選ばれたかを JS の data 属性で
   知る必要はなく、<picture> の source が選ばれる条件そのもの
   （orientation:portrait または幅760px以下）と同じメディアクエリで
   object-position も切り替えれば、常に「今表示されているファイルに
   正しい構図」になる。760px の閾値は <picture>・preload・ここの3箇所で
   揃えること。 */
@media (orientation: portrait), (max-width: 760px) {
  .hero-bg-layer--key img { object-position: 50% 15%; }
}
@keyframes hero-cross-key {
  0%, 28% { opacity: 1; }
  42%, 86% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes hero-cross-video {
  0%, 28% { opacity: 0; }
  42%, 86% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-layer--key { animation: none; opacity: 1; }
  .hero-bg-layer--video { animation: none; opacity: 0; }
}
/* v9: Data Saver / 低速回線では hero-loop 自体を読み込まない（hero.js）。
   その場合はクロスフェード演出も止め、キービジュアルを表示したままにする
   （さもないと固定タイマーのアニメーションだけが進み、動画レイヤーが
   ポスター静止画のまま透けて見えてしまう）。 */
.hero[data-video-skip="true"] .hero-bg-layer--key { animation: none; opacity: 1; }
.hero[data-video-skip="true"] .hero-bg-layer--video { animation: none; opacity: 0; }
.hero-bg-scrim {
  position: absolute; inset: 0; z-index: var(--z-tint); pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13,10,8,.45) 0%, rgba(13,10,8,.05) 22%, rgba(13,10,8,.05) 55%, rgba(13,10,8,.5) 82%, rgba(13,10,8,.85) 100%);
}

/* ---- キービジュアル本体 ------------------------------------------------------ */
/* v24バグ修正: .hero-stage は inset:0 でヒーロー全体（下端の .hero-band を
   含む帯）を覆っており、z-index:var(--z-copy)=22 が .hero-band の
   z-index:4 より高いため、実際には中身が無い（ロゴ・キャッチコピー・
   チップだけで、どれもクリック不要）にもかかわらず「参加する」ボタンと
   スクロールヒントへのクリックを奪っていた。中に将来クリック可能な要素を
   置く場合は、その要素だけ pointer-events を個別に戻すこと。 */
.hero-stage { position: absolute; inset: 0; z-index: var(--z-copy); pointer-events: none; }

.hero-logo-block {
  position: absolute; left: var(--s-6); top: 20%; max-width: 480px; z-index: 3;
}
.hero-logo { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(13,10,8,.55)); }
.hero-logo[data-broken="true"] { display: none; }
.hero-title-fallback { display: none; }
.hero-logo[data-broken="true"] + .hero-title-fallback { display: block; }
.hero-title-fallback .ht-jp {
  font-size: var(--t-hero); font-weight: 900; line-height: 1.02; letter-spacing: .01em;
  color: var(--cream-100); text-shadow: 0 12px 28px rgba(13,10,8,.6);
}
.hero-title-fallback .ht-la {
  font-family: var(--font-la); font-style: italic; font-size: clamp(1rem, 2.4vw, 1.5rem);
  color: var(--mustard-300); margin-top: var(--s-2);
}
.hero-catch {
  margin-top: var(--s-5); font-size: var(--t-lead); font-weight: 700; color: var(--cream-100);
  max-width: 22em; text-shadow: 0 6px 18px rgba(13,10,8,.6);
  word-break: keep-all; overflow-wrap: normal; /* 批評R4: 「の／どかな」のような単語途中の改行を禁止 */
}

/* v16（ユーザー指示）: キャッチコピーの下に企画概要とバッジを追加。
   下端の帯（.hero-band）を押さず、暗い面でもAAコントラストを保つよう、
   キャッチコピーと同じ text-shadow の方針＋チップ自体にも暗い敷板を持たせる。 */
.hero-summary {
  margin-top: var(--s-3); font-size: .9375rem; font-weight: 500; line-height: 1.7;
  color: var(--cream-200); max-width: 24em; text-shadow: 0 4px 14px rgba(13,10,8,.75), 0 1px 3px rgba(13,10,8,.9);
  word-break: keep-all; overflow-wrap: anywhere;
}
.hero-chips {
  display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none;
}
.hero-chip {
  display: inline-flex; align-items: center; gap: .3em;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  background: rgba(13,10,8,.6); border: 1px solid color-mix(in srgb, var(--cream-100) 24%, transparent);
  font-size: var(--t-caption); font-weight: 700; color: var(--cream-100);
  text-shadow: 0 2px 8px rgba(13,10,8,.8);
}
.hero-chip-num { color: var(--accent); font-weight: 900; }

@media (max-width: 900px) {
  .hero-summary { font-size: .8125rem; max-width: 20em; }
  .hero-chips { gap: var(--s-1) var(--s-2); margin-top: var(--s-3); }
  .hero-chip { padding: var(--s-1) var(--s-3); font-size: .6875rem; }
}

/* ---- 下端の帯：期間・報酬・CTA・スクロールヒント（階層は脇役として） ----------- */
/* 批評R4: 帯の上端がすぐ透明に抜けるグラデーションだと、日付やボタンが
   背景の絵に沈んでコントラスト不足になっていた。帯の全高でしっかり濃い
   「板」にし、上端だけをシーンへなじませる薄いフェードにする。 */
.hero-band {
  /* v24バグ修正: 旧 z-index:4 は .hero-stage（var(--z-copy)=22）より低く、
     クリックが .hero-stage に奪われていた。トークン体系に合わせ
     var(--z-band)=26 に引き上げ、.hero-stage より確実に上へ。
     var(--z-chrome)（ヘッダー本体）より下に置くのは意図的: ドロワー展開時、
     nav-scrim（--z-scrim=30）がここを覆って背景コンテンツとして無効化する
     （ヘッダー自身の子要素だけは --z-chrome=32 でその上に残る）。 */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-band);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(to top, rgba(10,8,7,.94) 0%, rgba(10,8,7,.94) 55%, rgba(10,8,7,.78) 85%, rgba(10,8,7,.35) 100%);
  backdrop-filter: blur(2px);
}
.hero-band-facts {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3);
  font-size: var(--t-caption); color: var(--cream-200);
}
.hero-band-facts .hero-facts-note { color: var(--mustard-300); }
.hero-band-facts .hfl-dot { color: var(--ink-faint); }
.hero-band .btn { flex: none; }
/* v25（ユーザー指示）: ヒーロー帯の「参加する」を大きく・重みを増して主CTAらしく。
   .btn--sm は他所で共有しているため専用モディファイアを新設。
   モバイルでの幅100%・順序入れ替えは既存の `.hero-band .btn` ルールを継承する。 */
.btn--hero-cta { padding: 14px var(--s-6); font-size: 1rem; line-height: 1.2; font-weight: 900; letter-spacing: .02em; }
.hero-band-hint {
  display: flex; align-items: center; gap: var(--s-2); margin-left: auto;
  color: var(--cream-200); font-size: var(--t-caption); letter-spacing: .1em;
}
.hero-band-hint .hbh-arrow {
  width: 14px; height: 14px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); animation: hbh-bounce 1600ms ease-in-out infinite;
}
@keyframes hbh-bounce { 0%,100% { transform: rotate(45deg) translateY(-3px); opacity: .6; } 50% { transform: rotate(45deg) translateY(2px); opacity: 1; } }

/* ---- ポインタ視差（弱め・reduced-motion で無効化は hero.js 側） ---------------- */
[data-parallax] { transition: transform 220ms linear; will-change: transform; }

@media (max-width: 900px) {
  .hero-logo-block { left: var(--s-5); top: 12%; max-width: 68vw; }
  .hero-catch { font-size: 1rem; margin-top: var(--s-4); }
  .hero-band { padding: var(--s-3) var(--s-4); gap: var(--s-2) var(--s-3); }
  .hero-band-facts { font-size: .75rem; flex-direction: column; align-items: flex-start; gap: 2px; }
  .hero-band-facts .hfl-dot { display: none; }
  .hero-band-hint span:not(.hbh-arrow) { display: none; }
  .hero-band .btn { order: -1; width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-band-hint .hbh-arrow { animation: none; }
  [data-parallax] { transition: none; }
}