/* ============================================================
   North AI Works — ヒーロー（全画面 / 映像の上にテキスト）
   トークンは tokens.css に定義。

   2026-08-03 全画面化。映像は 100vh を占める（モバイルも同じ）。
   参考サイト（phaide.ai）と同じく、映像の中央に H1・リード・CTA を重ねる。
   設計: docs/superpowers/specs/2026-08-03-hero-fullscreen-design.md

   ✅ コントラストは AA を満たしている（2026-08-03 実測）

      かつて「この素材の上に文字は置けない」と判断していた（8/2・雪原素材）。
      しかしそれは "フレーム全体の最も明るい画素" に平坦なスクリムを
      かけた場合の推定値だった。実際にはテキストは中央にあり、
      スクリムの radial も中央が最も濃い。位置を踏まえて測れば足りる。

      現素材（夜のオフィス）でのレンダリング実測。

        要素        1920x1080  1440x900   390x844   最悪
        H1            8.40:1    7.89:1   11.91:1   7.89:1
        リード        5.68:1    5.08:1    6.64:1   5.08:1
        eyebrow      13.15:1   12.42:1    9.01:1   7.59:1

      素材10秒を0.5秒刻みで全走査し、4ビューポートで確認した最悪値。
      いずれも本文基準 4.5:1 を満たす。

   🎬 素材を差し替えたら必ず再実測すること。
      この数値は素材の明るさに依存する。測り方は
      docs/superpowers/specs/ の設計書に記録がある。

   📱 過去に「映像の上にパネルを重ねる案B」がモバイルで破綻している。
      原因は min-height 620px のうえに padding の大きいパネルを
      載せたこと。今回は固定 min-height を置かず flex 中央寄せで回避。
   ============================================================ */

/* --- ①映像 --------------------------------------------------- */
/* 全画面化（2026-08-03）。それまでは aspect-ratio: 16/9 で
   「素材が寸法を決める」形だったが、参考サイト（phaide.ai）に倣って
   「画面が寸法を決める」形に反転した。cover は下で効かせている。

   ⚠️ aspect-ratio と max-height を併用しないこと（二重レターボックスになる）
      そのため aspect-ratio は使わず min-height 単独にしている。

   📐 素材について
      現素材は「ロボットのいる夜のオフィス」1280x720・音声なし。
      黒帯なし・テキストなしで、映像自体は加工していない
      （音声トラックのみ除去。背景映像に音声は不要）。

      ⚠️ ただし中央のロボットが明るいため、モバイルでは
         スクリムを濃くしないと AA を割る（下の @media 参照）。

      旧素材（雪原のロボット）は git 履歴から復元できる。
        CM版:   git show 85d5a5a:.../images/hero.mp4
        背景版: git show 98cef31:.../images/hero.mp4
      ただし両方とも上下に黒帯（上56px/下50px）が焼き込まれており、
      CM版はさらに左寄せのテキストが焼き込まれている。
      戻す場合は crop が要る。経緯は DESIGN.md に記録がある。

   🎬 素材を差し替えるときの要件
      ・黒帯を焼き込まない（焼き込まれていたら crop で除去する）
      ・テキストを焼き込まない（文字はHTML側が担当する）
      ・被写体を中央に置く（モバイルでは中央26%しか残らない）
      ・できるだけ暗い画にする（コントラストに直結する）
      ・差し替えたら必ずコントラストを再実測する */
.naw-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--color-fg);
}

.naw-hero-media,
.naw-hero-media img,
.naw-hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ヒーロー内の重ね順（2026-08-03）
     1 poster / 2 video / 3 scrim / 4 text / 5 操作系（停止ボタン・矢印）
   操作系を最前面にしないと、スクリムやテキストが押さえてクリックできない */

/* poster は LCP 要素。映像が再生されたら隠す */
.naw-hero-poster { z-index: 1; }
.naw-hero-video { z-index: 2; opacity: 0; transition: opacity .6s ease; }
.naw-hero-video.is-playing { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .naw-hero-video { transition: none; }
}

/* --- 一時停止ボタン（WCAG 2.2.2） ---------------------------- */
/* 映像をループさせているため、停止手段は必須（5秒超の自動再生・Level A）。
   ただし常時は表示しない（2026-08-05）。ヒーローへのホバー、
   またはキーボードフォーカスで現れる。
   ⚠️ display:none / visibility:hidden にはしないこと。
      フォーカスを受け取れなくなり、キーボード利用者から停止手段が消える。 */
.naw-hero-toggle {
  position: absolute;
  right: var(--sp-md);
  bottom: var(--sp-md);
  z-index: 5;
  width: 44px;   /* タップ領域44px確保 */
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--r-sm);
  background: rgba(74, 74, 72, .78);
  color: #FFFFFF;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background-color .15s ease;
}

/* ホバー（ヒーロー全体）・フォーカス・一時停止中は見せる。
   一時停止中に隠すと「再生に戻す手段」が見えなくなるため */
.naw-hero:hover .naw-hero-toggle,
.naw-hero-toggle:focus-visible,
.naw-hero-toggle[aria-pressed="true"] {
  opacity: 1;
}

/* タッチ端末はホバーがないので常に見せる。
   ここで隠すと停止手段に到達できない */
@media (hover: none) {
  .naw-hero-toggle { opacity: 1; }
}

.naw-hero-toggle:hover { background: rgba(74, 74, 72, .95); }

.naw-hero-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.naw-hero-toggle .naw-icon-play { display: none; }
.naw-hero-toggle[aria-pressed="true"] .naw-icon-play { display: block; }
.naw-hero-toggle[aria-pressed="true"] .naw-icon-pause { display: none; }

.naw-hero-toggle:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* --- スクリム ------------------------------------------------- */
/* 映像を沈めてテキストを浮かせる。参考サイト（phaide.ai）と同じ3重構成。
   ただし向こうの素材は暗いので合計22%で足りている。
   NAWの素材はモニタや照明に明るい画素があるので、それより強くかけている。

   radial を中央に濃く置いているのが要点。テキストは中央にあるので、
   映像の端を明るく保ったままテキスト位置だけ暗くできる。
   これで全ビューポート・全フレームで AA を満たしている（上部コメント参照）。

   ⚠️ #141413 はトークン外の色である（DESIGN.md 追認済み・2026-08-03）
      スクリムは「文字色でも面の色でもない、映像を沈めるための膜」で、
      パレットの用途分類に当てはまらない。
      fg #4A4A48 で同じ暗さを作ると純白背で 4.59:1 まで落ち、
      モバイルのリード（実測4.78:1）が AA を割る。
      純黒 #000000 は DESIGN.md が禁じているため、その手前の値を使う。

   最下段は次セクションの白へ繋ぐグラデーション。 */
.naw-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(78% 52% at 50% 46%, rgba(20, 20, 19, .62), transparent 76%),
    linear-gradient(rgba(20, 20, 19, .30), rgba(20, 20, 19, .30)),
    linear-gradient(to bottom,
      rgba(20, 20, 19, .40) 0%,
      rgba(20, 20, 19, .10) 22%,
      rgba(20, 20, 19, .10) 78%,
      rgba(20, 20, 19, .30) 94%,
      var(--color-bg) 100%);
}

/* 🚨 狭い画面ではスクリムを濃くする（2026-08-03 素材差し替えに伴い追加）
      cover で拡大されるため、320px では素材の中央31.7%（390pxでは26%）しか
      画面に残らない。現素材はその中央にロボットの白い頭部と肩が来るため、
      デスクトップでは暗い背景だった場所が最も明るい被写体に変わる。

      実測（差し替え直後・スクリム据え置き）:
        320x568  H1 4.31 / リード 4.34 / eyebrow 3.70  → いずれも AA 割れ
        1920x1080 は 7.13 / 6.11 / 7.01 で問題なし

      デスクトップを暗くすると映像が沈むので、狭い画面だけ中央を濃くする。
      値は推定ではなくレンダリング実測で決めている（DESIGN.md 参照）。 */
@media (max-width: 768px) {
  .naw-hero-scrim {
    background:
      radial-gradient(96% 62% at 50% 46%, rgba(20, 20, 19, .82), rgba(20, 20, 19, .18) 88%),
      linear-gradient(rgba(20, 20, 19, .34), rgba(20, 20, 19, .34)),
      linear-gradient(to bottom,
        rgba(20, 20, 19, .44) 0%,
        rgba(20, 20, 19, .14) 22%,
        rgba(20, 20, 19, .14) 78%,
        rgba(20, 20, 19, .30) 94%,
        var(--color-bg) 100%);
  }
}

/* --- ヒーロー上のテキスト ------------------------------------- */
/* 中央寄せ。ナビの高さぶん下げてから中央に置く */
.naw-hero-content {
  position: relative;
  z-index: 4;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-md);
  padding: calc(var(--sp-3xl) + var(--sp-xl)) var(--sp-lg) var(--sp-3xl);
  margin-inline: auto;
  max-width: var(--w-wide);
}

.naw-hero-content .naw-eyebrow { color: rgba(255, 255, 255, .82); }

.naw-hero-title {
  color: #FFFFFF;
  font-size: clamp(1.75rem, 5.2vw, 3.5rem);
  line-height: 1.25;
  margin: 0;
  text-shadow: 0 2px 32px rgba(0, 0, 0, .55);
}

.naw-hero-sub {
  color: rgba(255, 255, 255, .94);
  max-width: 34em;
  margin: 0 auto;
  text-shadow: 0 1px 20px rgba(0, 0, 0, .55);
}

/* 映像の上に置く副ボタン。白地用の naw-btn--secondary は
   枠線が見えないので、映像用に別途用意する */
.naw-btn--on-media {
  border: 1px solid rgba(255, 255, 255, .72);
  color: #FFFFFF;
  background: rgba(20, 20, 19, .28);
}

.naw-btn--on-media:hover {
  background: rgba(20, 20, 19, .48);
  border-color: #FFFFFF;
}

.naw-hero-content .naw-btn-row { margin-top: var(--sp-sm); }

@media (max-width: 768px) {
  .naw-hero-content {
    /* 上はナビぶん、下は停止ボタンと矢印ぶんを空ける。
       デスクトップと同じ 3xl+xl では 320x568 で中身が溢れ、
       矢印と停止ボタンが画面外に出た（2026-08-03 実測） */
    padding: calc(var(--sp-2xl) + var(--sp-md)) var(--sp-md) var(--sp-2xl);
    gap: var(--sp-sm);
  }
  .naw-hero-content .naw-btn-row {
    flex-direction: column;
    width: 100%;
    max-width: 20rem;
  }
  .naw-hero-content .naw-btn { width: 100%; }
}

/* 極端に低い画面では文字を詰める。
   横幅ではなく高さで判定する（横向きスマホも拾う） */
@media (max-height: 640px) {
  .naw-hero-content {
    padding-block: calc(var(--sp-xl) + var(--sp-md)) var(--sp-xl);
    gap: var(--sp-xs);
  }
  .naw-hero-title { font-size: clamp(1.375rem, 4.6vw, 2rem); }
  .naw-hero-sub { font-size: 0.875rem; }
}

/* --- スクロール誘導 ------------------------------------------- */
/* 全画面化でファーストビューが映像だけになったため、
   下にコンテンツがあることを示す。装飾ではなく導線。

   下端は素材が最も明るい（実測 輝度1.0 = 純白）ので、
   矢印は白ではなく fg の面に白を抜く。ナビのピルと同じ手法。 */
.naw-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--sp-lg);
  translate: -50% 0;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(74, 74, 72, .78);
  color: #FFFFFF;
  pointer-events: none;
}

.naw-hero-scroll svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  animation: naw-hero-bob 2.4s ease-in-out infinite;
}

@keyframes naw-hero-bob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .naw-hero-scroll svg { animation: none; }
}

/* --- ②H1＋CTA（白地。ここに文字を置く） -------------------- */
/* 色は指定しない。site.css の既定（fg 8.88 AAA / muted 6.50 AA）に従う */
.naw-hero-copy {
  padding-block: var(--sp-2xl) var(--sp-3xl);
}

.naw-hero-copy h1 { max-width: 20em; }
.naw-hero-copy .naw-lead { max-width: 40em; }

/* --- 実績3点 -------------------------------------------------- */
.naw-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xl);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--color-line);
}

.naw-fact-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-fg);
  line-height: 1.2;
}

.naw-fact-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: var(--sp-xs);
}

/* --- モバイル ------------------------------------------------- */
/* 映像の高さは 100vh 固定なのでここでは触らない。
   ここは②以降（白地の文字ブロック）の調整のみ。
   ⚠️ 白地側に固定の min-height を置かないこと
      （案Bはここで 620px を固定して破綻した） */
@media (max-width: 768px) {
  .naw-hero-copy { padding-block: var(--sp-xl) var(--sp-2xl); }
  .naw-facts { gap: var(--sp-lg); }
  .naw-fact-value { font-size: 1.25rem; }
}