/* ============================================================
   scroll-video-hero — hero.css
   site.css の .hero / .hero-visual の中に入る前提。
   テキスト層(.hero-card / .site-header)には一切触らない。
   ============================================================ */

.svh {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 退場演出の駆動値。hero.js がスクロール終端で 0→1 に動かす。
   JS が動かない環境では 0 のままなので、通常のヒーローとして成立する。 */
.hero { --svh-exit: 0; --svh-exit-scale: 1; }

/* 1. 静止フォールバック ─ 素材ゼロで即描画される層。
      フレーム抽出が終わるまで、また mobile/低速/reduced-motion では
      これがそのままヒーロービジュアルになる。 */
.svh-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 静止画ポスターを使う場合(data-poster 指定時に JS が付ける)。
   業種テンプレートが持ち込む静止フォールバック(建設=.hero-iso / 介護=.hero-still)は
   ポスターと二重になるので隠す。テンプレートを増やすときはここに1セレクタ足す */
.svh-fallback.has-poster { background-size: cover; background-position: center; }
.svh-fallback.has-poster .hero-iso,
.svh-fallback.has-poster .hero-still { display: none; }

/* 2. キャンバス ─ 準備完了までは透明 */
.svh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.svh.is-ready .svh-canvas { opacity: 1; }

.svh-video {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* 環境映像モード(降格の受け皿)。スクラブせず**1回だけ**自動再生して
   最終フレームで静止する。**ループはしない**(hero.js が loop=false 固定)。
   ピンしないのでスクロール操作は普通のページのまま。
   **「モバイルだから」ここへは落ちない。** 落ちる条件は
   「スマホ かつ (GSAPが読めない / deviceMemory < 3)」か、フレーム抽出に失敗したとき。
   PC幅は GSAP無し・低メモリでも環境映像へは落ちない(applyMode の isMobile &&)。
   通常のスマホは PC と同じピン + スクラブで動く */
.svh.is-ambient .svh-video {
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity .6s ease;
}
.svh.is-ambient .svh-canvas { display: none; }

/* 環境映像は上部が明るいカット(空・白い建物)になるため、ロゴが乗る帯だけ
   スクリムを足す。アイソメ静止(暗い)のときは不要なので is-ambient に限定する */
.svh.is-ambient .svh-overlay {
  background:
    linear-gradient(180deg, rgba(10, 24, 38, .58) 0%, rgba(10, 24, 38, 0) 28%),
    linear-gradient(0deg, rgba(10, 24, 38, .55) 0%, rgba(10, 24, 38, 0) 60%);
}

/* 3. オーバーレイ ─ 文字の可読性。上げすぎない(0.5超で動画の意味が消える) */
.svh-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 24, 38, .72) 0%, rgba(10, 24, 38, .34) 46%, rgba(10, 24, 38, .12) 100%),
    linear-gradient(0deg, rgba(10, 24, 38, .5) 0%, rgba(10, 24, 38, 0) 42%);
  pointer-events: none;
}

/* ── 退場演出 ────────────────────────────────
   スクロール進捗の終盤(hero.js の EXIT_START 以降)は動画を進めず、
   最終フレームをわずかに拡大しながら次セクションの地色へ溶かす。
   「建物に近づいて、中へ入っていく」体験をヒーロー内で完結させるため。 */

.svh-canvas,
.svh-fallback {
  transform: scale(var(--svh-exit-scale, 1));
  /* 拡大の中心。ヒーローの視線誘導点(右寄り中央)へ寄せる。
     左のテキストカード側を原点にすると建物が画面外へ逃げる */
  transform-origin: 60% 46%;
}
.hero.svh-exiting .svh-canvas,
.hero.svh-exiting .svh-fallback { will-change: transform; }

/* 退場ベール(.svh-exit-veil)は **2026-08-07 に廃止**。

   終端でヒーロー全面を次セクションの地色(明るいクリーム/白)へ 0.55 まで
   被せていたが、ゆい氏の指摘「ヒーローの最後が白くボワッとなる。それを
   入れる理由が特にない」で全デモから外した。要素ごと hero-visual.html から
   削除してあるので、**復活させるならHTMLとCSSの両方を戻すこと**。
   退場のズーム(--svh-exit-scale)は残している ─ 白飛びとは別の演出で、
   「建物に近づいて中へ入る」体験そのものはこちらが作っている。 */

/* **白カードは退場区間でも一切薄くしない(2026-08-07)。**

   もとは `opacity: calc(1 - var(--svh-exit) * 1.15)` で終端に向けて引いていた
   (テンプレ側で 0.45 まで緩めていた社もある)。どちらもゆい氏の指摘
   「スクロールして下がっていくときに白いカードが薄くぼやけて、何が書いてあるか
   見えなくなる。はっきり見せたい」で**opacity の指定ごと外した**。
   キャッチとCTAはヒーローで一番読ませたい要素なので、
   **ここに opacity を書き戻さないこと。** 24px 持ち上げる動きだけ残している
   (可読性に影響しないうえ、退場のズームと合わせて「奥へ入っていく」感が出る)。

   図面グリッド(.hero-grid / 建設テンプレの装飾)は文字ではないので従来どおり引く。 */
.hero.svh-exiting .hero-grid {
  opacity: calc(1 - var(--svh-exit, 0) * 1.15);
}
.hero.svh-exiting .hero-card {
  transform: translateY(calc(var(--svh-exit, 0) * -24px));
}

@media (prefers-reduced-motion: reduce) {
  .svh-canvas, .svh-fallback { transform: none; }
  .hero.svh-exiting .hero-card,
  .hero.svh-exiting .hero-grid { opacity: 1; transform: none; }
}

/* ピン中はヒーローがビューポート高になる */
.hero.svh-pinned { height: 100vh; height: 100svh; }

/* ピン中はスクロールインジケータを出しっぱなしにしない */
.hero.svh-pinned .hero-scroll { transition: opacity .3s ease; }
.hero.svh-pinned.svh-progressing .hero-scroll { opacity: 0; }

/* **768px。テンプレート側のモバイル節(640px)ではなく hero.js の判定に合わせる。**
   hero.js は `max-width: 768px` をモバイル(軽い抽出予算 + 画面に映る範囲だけの
   切り出し)と見なす。**ピンの有無は幅で変わらない**(PC・スマホとも張る)。
   ここを 640px にしていると 641〜768px(iPad縦・iPhone横持ち)だけ
   レイアウトが別物になり、直したかった絵がそこにだけ残る
   (2026-08-06 検品るんの指摘)。**hero.js の MOBILE 判定とこの値は必ず揃える。** */
@media (max-width: 768px) {
  /* モバイルは映像で**ビューポートを埋める**(cover)。PCと同じ「全画面の映像に
     テキストカードが重なる」構図にする。左右が切れるのは許容する。

     経緯(逆戻りさせないために3段階とも残す):
     1. 当初は .hero(テンプレートの固定高 480〜520px)へ全面に敷き、
        object-fit: cover で埋めていた。**縦長すぎる枠**に 16:9 を入れたので
        中央の狭い縦帯しか残らず、全景が左右とも大きく切れて何が写っているか
        分からない絵になった(2026-08-06 ゆい氏指摘「圧縮されてすごく見づらい」)。
     2. そこで .hero-visual を素材比率(--svh-aspect)の**帯**にし、カードを
        その下へ積んだ。比率は守られたが、**ピン中のヒーローは 100svh あるのに
        中身は帯 + カードで 500px ほどしかない**ため、カードの下に地色が
        300px 近く余り、画面が埋まらず迫力に欠けた
        (2026-08-06 ゆい氏指摘「下の方が空いている。端をトリミングしてもいいので、
         迫力が出るようスマホの画面を全部埋めて」)。
     3. **いまは PC と同じ全画面。**.hero を 100svh、.hero-visual を絶対配置の
        inset:0 に戻し、カードは映像の**上に重ねる**(位置はテンプレート側)。

     **帯(.hero-visual に aspect-ratio を当てる作り)へ戻さないこと。**
     戻すとカードの下に地色が余る絵に逆戻りする。1. の「圧縮されて見づらい」は
     枠が固定pxで縦長すぎたのが原因で、100svh + 中央クロップなら
     **縦は必ず全部入り、切れるのは左右だけ**になる(下の object-position の注記)。

     この節は hero.css が読まれるとき = hero_type: video のときだけ効く。
     静止写真ヒーロー(photo)には影響しない。 */
  .hero {
    /* このファイル上部の `.hero.svh-pinned { height: 100svh }`(詳細度0,2,0)と
       **同じ値**を、ピンが張られる前(フレーム抽出中)から当てておく。
       ピン前後で高さが変わらないので画面が跳ねない。
       **auto や固定px を書かないこと。** メディアクエリ内で
       `.hero:has(.svh)` 等の高い詳細度から高さを書き直すと 100svh が消え、
       ピンが効かなくなる。 */
    height: 100vh;
    height: 100svh;
    min-height: 0;
    /* 建設テンプレはビジュアルを帯にしていた名残で padding-top: 330px を
       持っている。全画面へ戻したぶん、その予約ぶんは要らない */
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ビジュアルはヒーロー全面。素材比率の帯にしない */
  .hero-visual {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
  }

  .svh {
    position: absolute;
    inset: 0;
    height: auto;
    aspect-ratio: auto;
    max-height: none;
  }

  /* 中央クロップで cover する。
     **16:9 を縦長ビューポートへ cover すると基準になるのは高さ**なので、
     上下は必ず全部入り、切れるのは左右だけ。したがって object-position の
     縦方向は効かない ─ 動かすなら横だけにすること。
     現行4素材(建設=入口へ寄る / 介護=居室へ寄る / 製菓=ケーキへ寄る /
     モノ系=加工品へ寄る)はいずれも被写体が画面中央へ集まるフライスルーなので、
     center のままで頭も足も切れない(2026-08-06 に全素材の中央クロップを実写で確認)。
     canvas 側の cover は hero.js の drawSource() が中央で計算している。 */
  .svh-fallback.has-poster { background-size: cover; background-position: center; }
  .svh.is-ambient .svh-video { object-fit: cover; object-position: center; }

  /* 下端のスクリム。帯だった頃は「地色との継ぎ目を消す」ためだったが、
     いまは**下端に重なる白カードを浮かせる**影として効かせる */
  .svh-overlay {
    background: linear-gradient(0deg,
      rgba(10, 24, 38, .62) 0%,
      rgba(10, 24, 38, .18) 42%,
      rgba(10, 24, 38, 0) 70%);
  }

  /* ── ピン中(= PCと同じスクロール挙動)のモバイルレイアウト ──────
     上の `.hero` と `.hero.svh-pinned` が同じ 100svh なので、ピンが張られても
     レイアウトは変わらない。**ここで height を書き直さないこと。**

     ベール類(介護・モノ系の `.hero-veil`、介護の `.hero-fade`、製菓の
     `.hero-frame`)は各テンプレートの 768px 節で **inset:0 の全面**へ戻してある。
     帯に合わせた `aspect-ratio: var(--svh-aspect)` を残すと、映像だけ全画面・
     ベールだけ上部の帯サイズになり、**映像の上に地色の板が乗る**
     (2026-08-06 の帯レイアウトで実測した症状。全画面化した以上は必ず追随させる)。 */

  /* SCROLL の合図はモバイルでは出さないまま(テンプレート側の
     `.hero:has(.svh) .hero-scroll { display: none }` を尊重する)。
     縦書きの合図は狭い画面でカードと干渉するので、ピンを張るように
     なっても戻さない。 */
}