@charset "UTF-8";
/* ==========================================================================
   JOMONÖW — Home Connection Styles
   ファイル: home.css
   役割:
     - OP-3 → Home の接続部分
     - 下からせり上がる「STATEMENTパターン + 動画」の2層Hero
   ---
   重要: JOMONÖW + ロゴは .opening__brand が担当 (opening.css)
   このファイルでは Home 領域のレイアウトのみ
   ========================================================================== */

/* --------------------------------------------------------------------------
   Site Home (Hero)
   ---
   構造 (op-3-1 / op-3-2 参照):
     - 上半分: JOMONÖW + ロゴが見える明色領域 (空白)
     - 中段: 黄色いSTATEMENTパターン (pttn-big-2.svg の中央トリミング)
     - 下段: Statement動画ポスター (見切れ部分)
   ---
   挙動:
     - オープニング完了後 (data-opening="done") にパターン+動画が
       下からフェードイン+スライドアップ
   -------------------------------------------------------------------------- */

.site-home {
  position: relative;
  width: 100%;
  background-color: var(--color-bg-light);
}

/* 上半分: ページ上部の明色スペーサー
   v9.6: 480px固定 → 50vh (viewport の半分) に変更
   理由: ロゴが画面中央、その下にパターン上端 = 画面中央に来るレイアウトを
         viewport の高さに依らず維持するため。
   結果: パターン上端(=Statement セクション上端) が常に画面の縦中央。
   scroll-snap-align は別途 .site-home__snap-marker で実装。 */
.site-home__top {
  width: 100%;
  height: 50vh;
  background-color: var(--color-bg-light);
}

/* Hero全体に scroll-snap-type: y proximity を設定
   proximity = 近いところだけスナップ、強制ではない (CD指示の「軽く止まる」) */
html {
  scroll-snap-type: y proximity;
  background-color: var(--color-wine);   /* v46.1: Homeのみ左右マージンの地色=小豆(中ページはreset.cssの薄グレー) */
}

/* v19.9: scroll-snap を解除する範囲を 1024px → 1366px に拡大
   ---
   理由: iPad Air 13" 横画面 (1366×1024) でも OP-3 スキップ・「ガクン」が発生していた。
   バナーレイアウト等は 1024px ベースのまま、scroll-snap だけ別bpで管理する。
   タッチデバイスは iPad Air 13" 横画面まで含めて scroll-snap オフ。 */
@media (max-width: 1366px) {
  html {
    scroll-snap-type: none;
  }
}

/* JS によるスムーズスクロール中 (html.js-scrolling) は
   scroll-snap を一時無効化する。
   ---
   理由: JS の requestAnimationFrame スクロール (アンカー戻り等) の
   終了時に scroll-snap が吸着して「ガクン」と段差が出るのを防ぐ。
   スクロール完了後にクラスが外れ、snap が再び有効になる。 */
html.js-scrolling {
  scroll-snap-type: none;
}

/* v15.4: ユーザーがアンカーを越えて下にスクロールした後は snap を完全無効化。
   旧: proximity が past-anchor 後も吸着してロゴが上下にピンポンする問題があった。
   下方向への進行を妨げないために、past-anchor 中は snap-type:none。 */
html:has(body.past-anchor) {
  scroll-snap-type: none;
}

/* スナップポイント: op-3-2 位置
   v9.6: top: 350px (固定) → calc(50vh - 130px) (動的) に変更。
         50vh は .site-home__top の新しい高さ、130px は op-3-1 から op-3-2 への
         オフセット (= __top の終端から 130px 手前で吸い付く)。
   スペーサー用の不可視要素として scroll-snap-align を持つマーカーを追加。 */
.site-home__snap-marker {
  position: absolute;
  top: calc(50vh - 130px);
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: normal;  /* normal: 通過OK、近い時だけ吸い付く */
}

/* --------------------------------------------------------------------------
   v9.7: 元の __media/__pattern/__video 構造を復元
   (v9.5で削除したのが誤り。本来は Statement ヘッダー兼 Hero 下見切れ)
   静止画は新しい Statement 動画に差し替え、コピー10セットも内側に統合。
   -------------------------------------------------------------------------- */

/* せり上がりラッパー (パターン + 動画の両方をまとめて動かす) */
.site-home__media {
  position: relative;
  width: 100%;

  /* せり上がり初期状態: 下にずれて、透明 */
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}

/* オープニング完了後 (data-opening="done") にせり上がる
   タイミング: 0.5s でテンポ良くせり上がる */
body[data-opening="done"] .site-home__media {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

/* STATEMENTパターン領域 (テキスト「STATEMENT」を中央に重ねる)
   元からあったアンカー仕込み箇所、活かす
   v15.1: パターンH/SVG幅を variables.css の --header-pattern-h / --header-pattern-svg-w で動的化 */
.site-home__pattern {
  position: relative;
  width: 100%;
  height: var(--header-pattern-h);
  background-image: url('../svg/statement-h.svg');
  background-size: var(--header-pattern-svg-w) auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* パターン上の STATEMENT 文字
   フォント: Goudy Bookletter 1911 (Google Fonts)
   太さ: 400 (Regular only) — 太くならないよう明示 */
.site-home__pattern-label {
  font-family: var(--font-goudy);
  font-size: var(--fs-header);  /* 56px */
  font-weight: 400;             /* Regular明示 */
  font-style: normal;
  color: var(--color-wine-typo);
  letter-spacing: var(--ls-display);
  text-align: center;
  line-height: 1;
  position: relative;
  z-index: 2;
  /* stroke系を全て無効化 */
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

/* Statement動画エリア
   仕様: 天地960pxでトリミング、内部に動画+縦書きコピー10セット */
.site-home__video {
  position: relative;
  width: 100%;
  height: 960px;
  background-color: var(--color-wine);  /* v19.7: 黒→wine (リロード時の表示色をCDの想定に) */
  overflow: hidden;
}

/* 動画本体: cover で枠を満たし、scale(1.25) で125%拡大・中央トリミング
   (v8.7-8.9 の statement__video と同じ仕様) */
.site-home__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.25);
  display: block;
}

/* (旧 hero-poster.jpg を入れていた img の互換は残しておく
    使う場合は <img class="site-home__video-poster"> として手動指定) */
.site-home__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .site-home__media {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   v15.1: SP用パターンサイズ上書きは variables.css の動的変数に統合済み
   --header-pattern-h / --header-pattern-svg-w が全範囲を制御。
   ========================================================================== */

/* ==========================================================================
   SP (≤481px) — STATEMENT ヘッダータイポ + Statement動画サイズ
   ========================================================================== */
@media (max-width: 481px) {
  .site-home__pattern-label {
    font-size: 38px;
  }

  /* Statement動画: 16:9 縦 = W390 × H693 (画面幅基準)
     動画自体は scale(1.25) で 125%中央トリミング (PC同様)。
     vw連動で W が変動しても 9:16 比率を保つため aspect-ratio で指定。 */
  .site-home__video {
    height: auto;
    aspect-ratio: 9 / 16;
  }
}

/* v21.3: ファーストプレビュー以外 (intro-skip) は演出を完全に無効化し全表示。
   intro-gate.js が <html> に intro-skip を付与する。
   ※ banner 画像の brightness フェード(filter)も殺す = 戻り時の明滅バグ修正。 */
html.intro-skip .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html.intro-skip .design__banner-img {
  /* v21.9: 戻り時は実像(blur0/scale1)で即表示 (フェード残り抑止)。
     banner-imgは.reveal要素 → html.intro-skip .reveal の transition:none を上書きし、
     ホバー拡大/明るさは初回同様 滑らかに動かす。 */
  filter: blur(0);
  transform: scale(1);
  transition:
    width 0.5s var(--ease-out),
    margin 0.5s var(--ease-out),
    filter 0.3s var(--ease-out) !important;
}
/* v21.4: 戻り着地が決まるまで本体を隠す → Op-3 の一瞬の見切れを防ぐ */
html.intro-landing body {
  visibility: hidden;
}
/* v47.1: 着地中(intro-landing≒300ms)は body が丸ごと不可視になるため、
   露出する html 背景が小豆(下の html{wine})だと「戻ると一瞬小豆全面」になっていた
   (パンくずHome/?from=home・ブラウザ戻る 共通。CD動画解析: 小豆全面300ms=settle 6×50msと一致)。
   着地中だけ html 地色を明色にする(ガタつき隠しは維持・色のみ変更)。
   クラス付きセレクタなので下の html{wine} に勝つ。解除後は wine(横向きマージン)が復帰。 */
html.intro-landing {
  background-color: var(--color-bg-light);
}