/* =============================================================
   scroll-film.css — トップの「スクロールで映像が進む」区間
   絵コンテ: 案2「営業の一日」（_スクロール映像演出プロンプト.md）

   Layer 1 = ここ。DOM/CSS だけで成立し、追加ダウンロードはゼロ。
   Layer 2/3（連番WebP→canvas）は素材が置かれたときだけ上に重なる。

   既定の姿は「通常の縦積みセクション」。
   JS が動いたときだけ .sf-ready が付いて映像モードに切り替わる。
   → JSが落ちても reduced-motion でも、内容は全部読める。
   ============================================================= */

.scroll-film { background: var(--black); }

/* =============================================================
   1. 既定（JS無効 / prefers-reduced-motion）— 通常のセクション
   ============================================================= */

.sf-sticky {
  width: 90%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-pad) 0;
}

.sf-heading { text-align: center; margin-bottom: 72px; }

.sf-cuts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 104px;
}

.sf-cut {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
/* 左右を交互にして、全部同じ並びに見えないようにする */
.sf-cut:nth-child(even) .sf-shot { order: 2; }

.sf-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--gold-border);
  background: var(--black-2);
}
.sf-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* カット1：写真を使わない黒＋金の地平線 */
.sf-horizon {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 35%, var(--gold-light) 50%, var(--gold) 65%, transparent);
}

/* カット3：商材カード */
.sf-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.sf-cards li {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--gold-light);
  border: 1px solid var(--gold-border);
  background: rgba(10, 10, 10, 0.55);
  padding: 9px 26px;
  border-radius: 2px;
}

.sf-idx {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.sf-cut p {
  margin: 0;
  font-family: var(--font-serif-ja);
  font-weight: 300;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--white);
}

@media (max-width: 860px) {
  .sf-cuts { gap: 64px; }
  .sf-cut { grid-template-columns: 1fr; gap: 28px; }
  .sf-cut:nth-child(even) .sf-shot { order: 0; }
}

/* =============================================================
   2. 映像モード（JS が .sf-ready を付けたときだけ）
   ============================================================= */

.scroll-film.sf-ready {
  position: relative;
  z-index: 1;             /* ヒーロー終端に重なったとき、映像が上に出る */
  height: 460vh;   /* スクラブの長さ（映像を長く）。iOSでは vh = 大きい方のビューポート＝スクロール中に変わらない */
}
/* ヒーローの「光が集まる」終端に1画面ぶん重ねる＝間に黒い隙間や空スクロールを作らず、
   光からそのまま映像が始まる。WebGLヒーローが 340vh でピンされている時だけ。
   WebGL不可（ヒーローが静止画1画面に畳む）や reduced-motion では重ねない（sf-ready自体が付かない）。 */
/* ヒーローの「光が集まって止まっている」区間に深く重ねる＝映像が育つ間、後ろの光は動かない。 */
/* 背景は黒(base)のまま＝重なったヒーローを覆う。ズーム/透明/白膜は廃止。 */
body:not(.no-webgl) .scroll-film.sf-ready { margin-top: -235vh; }

.sf-ready .sf-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;  /* アドレスバー分の見切れを防ぐ。余った所は黒背景なので目立たない */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 見出しは映像の邪魔になるので視覚的にだけ隠す（読み上げ・JS無効時には残る） */
.sf-ready .sf-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sf-ready .sf-cuts {
  display: block;
  position: absolute;
  inset: 0;
  gap: 0;
}

/* 溶け込み（黒幕・金線ワイプ廃止）：
   映像区間はヒーロー終端に重なる。ここを「黒で覆う」と、ヒーローで前方へ散る粒子が
   黒の裏に隠れて見えない。そこで重なり中は背景を透過にして、後ろのヒーローの拡散を
   透かしつつ、映像レイヤー（canvas＋粒子トンネル＋カット）を上からにじませる＝
   「金の粒子がそのまま映像になる」クロスディゾルブ。--sf-p 0→約0.12 で映像が立ち上がる。
   区間を抜ければ映像canvasが不透明になり、後ろ（body＝黒）は見えない。 */
body:not(.no-webgl) .scroll-film.sf-ready { background: transparent; }
body:not(.no-webgl) .sf-ready .sf-canvas.is-on,
body:not(.no-webgl) .sf-ready .sf-grid,
body:not(.no-webgl) .sf-ready .sf-particles,
body:not(.no-webgl) .sf-ready .sf-cuts {
  opacity: min(1, calc(var(--sf-p, 0) * 6));    /* 0→0.167 でゆっくりにじみ出る（拡散する光と重なる。以降は1で固定） */
  /* 🚨 スクロールに直結させる。既定の opacity 0.8s/1s トランジションが残っていると、
     スクロールのたびに約1秒かけて追従する二重のフェードになり、戻したときに逆方向へ
     動き続けて「ぎこちない・戻すと変」になる。ここで必ず打ち消す。 */
  transition: none;
}
/* WebGL不可・reduced-motion では従来どおり黒背景の縦積み（透過にしない） */

.sf-ready .sf-cut {
  position: absolute;
  inset: 0;
  display: block;
  opacity: var(--o, 0);
  will-change: opacity;
}

.sf-ready .sf-shot {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border: 0;
  background: none;
  overflow: hidden;
}
.sf-ready .sf-shot img {
  transform: scale(var(--s, 1)) translate3d(0, var(--y, 0px), 0);
  transform-origin: center;
}

/* カット動画（sf-vid）：写真の上に重ね、写真と同じ変形で一緒に動く。
   JSが対応環境でだけ data-src を読み込み、表示中のカットだけ再生する。
   未対応・低速回線・reduced-motion では読み込まず poster（＝差し替え写真）が出る。 */
.sf-vid { display: none; }
.sf-ready .sf-shot .sf-vid {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--s, 1)) translate3d(0, var(--y, 0px), 0);
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) { .sf-vid { display: none; } }
/* 文字を読ませるための減光。セクション内に閉じ込める（全画面に敷かない） */
.sf-ready .sf-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(10, 10, 10, 0.74) 0%,
    rgba(10, 10, 10, 0.44) 42%,
    rgba(10, 10, 10, 0.88) 100%);
  pointer-events: none;
}

.sf-ready .sf-horizon {
  left: 22%;
  right: 22%;
  transform: scaleX(var(--s, 1));
}

.sf-ready .sf-cards {
  flex-direction: row;
  flex-wrap: wrap;
  /* 折り返したときは align-content が効く。既定(stretch)のままだと
     行が上下いっぱいに散ってコピーに重なる（スマホ幅で実際に起きた） */
  align-content: center;
  justify-content: center;
  gap: 12px;
  padding: 0 5vw 22vh;
  perspective: 900px;
}
.sf-ready .sf-cards li {
  font-size: clamp(12px, 1.4vw, 15px);
  padding: 12px 30px;
  opacity: var(--k, 0);
  transform: translate3d(0, calc((1 - var(--k, 0)) * 46px), 0) scale(calc(0.88 + var(--k, 0) * 0.12));
}

.sf-ready .sf-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13%;
  width: 90%;
  max-width: var(--container);
  margin: 0 auto;
  transform: translate3d(0, var(--ty, 0px), 0);
}
/* 左・右を交互に置いて、全カットが同じ画に見えないようにする */
.sf-ready .sf-cut:nth-child(even) .sf-text { text-align: right; }
.sf-ready .sf-cut:nth-child(even) .sf-text p,
.sf-ready .sf-cut:nth-child(even) .sf-text .sf-idx { margin-left: auto; }
.sf-ready .sf-text p {
  max-width: 660px;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.75;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55);
}
.sf-ready .sf-text .sf-idx { max-width: 660px; }

@media (max-width: 860px) {
  .scroll-film.sf-ready { height: 400vh; }
  /* スマホはヒーローのピンが300vhと低いので、重なり量を desktop(-235vh) から減らす。
     これをしないと映像が progress 0.32（EVMEL形成中）で始まりヒーローと重なって壊れる。 */
  body:not(.no-webgl) .scroll-film.sf-ready { margin-top: -190vh; }
  .sf-ready .sf-text { bottom: 24%; }   /* 写真のすぐ下に来るよう配置（間を詰める・全体を中央寄り） */
  .sf-ready .sf-text p { font-size: clamp(21px, 5.6vw, 30px); line-height: 1.8; }
  /* スマホでは左右振り分けをやめて読みやすさを優先 */
  .sf-ready .sf-cut:nth-child(even) .sf-text { text-align: left; }
  .sf-ready .sf-cut:nth-child(even) .sf-text p,
  .sf-ready .sf-cut:nth-child(even) .sf-text .sf-idx { margin-left: 0; }
}

/* =============================================================
   3. Layer 2/3 — 連番WebP を描く canvas
   素材（assets/images/film/）が用意されたときだけ表示される
   ============================================================= */

/* canvas は .sf-cuts より前（＝下）に置いてある。
   映像を出す時は Layer 1 の写真だけ引っ込め、減光グラデーションと
   文字・カードはそのまま上に残るので、可読性が変わらない。 */
.sf-canvas { display: none; }
.sf-ready .sf-canvas.is-on {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s var(--ease-smooth);
}
.sf-ready .sf-canvas.is-on.is-lit { opacity: 1; }

/* 背景の金グリッド回廊（grid-corridor.js が挿入する最背面のcanvas）。
   連番WebPの置き換え。線をシェーダーで描くので高解像度でも荒れない。 */
.sf-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* 粒子トンネル（film-particles.js が挿入する）。映像の上・写真と文字の下 */
.sf-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--ease-smooth);
}
.sf-particles.is-lit { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sf-particles { display: none; } }
/* 映像モードでは写真を消さず、グリッド空間に浮かぶ「面」に変える。
   背景の映像だけで進むと、何をしている会社なのかが絵から消えるため。 */
/* 🚨 写真があるカットにだけ掛ける。カット01（地平線）と03（商材カード）は
   写真を持たないので、枠を掛けると「空の額縁」になってしまう。
   :has() 非対応ブラウザではこのブロックごと無効になり、従来の全面表示に戻る。 */
.sf-ready.sf-film-on .sf-shot:has(picture) {
  border: 1px solid var(--gold-border);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
  transition: inset 0.8s var(--ease-smooth);
}
/* 面は文字と反対側に寄せる。中央を空けることで奥行き（消失点）が見え、
   かつコピーと画が重ならない。even=文字が右／odd=文字が左。 */
.sf-ready.sf-film-on .sf-cut:nth-child(even) .sf-shot:has(picture) {
  inset: 12% 42% 20% 6%;
  transform: perspective(1500px) rotateY(7deg);
  transform-origin: left center;
}
.sf-ready.sf-film-on .sf-cut:nth-child(odd) .sf-shot:has(picture) {
  inset: 12% 6% 20% 42%;
  transform: perspective(1500px) rotateY(-7deg);
  transform-origin: right center;
}

/* 映像は主役ではなく背景。ただし落としすぎると真っ黒になって意味が消える */
.sf-ready.sf-film-on .sf-canvas.is-on { filter: brightness(0.62) saturate(0.9); }

/* 文字を読ませるための減光。写真の面は inset されていて ::after の減光が
   画面全体には掛からないので、映像の上に別途1枚敷く。
   ::before は .sf-cut より前に塗られるので、映像の上・写真と文字の下に入る。 */
.sf-ready.sf-film-on .sf-cuts::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(10, 10, 10, 0.28) 38%,
    rgba(10, 10, 10, 0.90) 100%);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 860px) {
  /* 画面が狭いので左右振り分けをやめ、写真＋文字を1つのまとまりとして上下中央寄りに置く。
     写真を大きめにし、すぐ下に文字が来るよう間隔を詰める（浮いて見える／隙間が空きすぎるのを解消）。 */
  .sf-ready.sf-film-on .sf-cut:nth-child(odd)  .sf-shot:has(picture),
  .sf-ready.sf-film-on .sf-cut:nth-child(even) .sf-shot:has(picture) {
    inset: 16% 8% 40% 8%;   /* 上16%〜下60%・幅84%（大きめ・中央寄り） */
    transform: none;
  }
}

/* =============================================================
   4. reduced-motion — 映像モードに入らせない
   JS側でも return しているが、CSS 単体でも成立させておく
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .scroll-film.sf-ready { height: auto; }
  .sf-ready .sf-sticky {
    position: static;
    height: auto;
    width: 90%;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--section-pad) 0;
    overflow: visible;
  }
  .sf-ready .sf-heading {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 72px;
    clip-path: none;
    white-space: normal;
  }
  .sf-ready .sf-cuts { display: grid; position: static; gap: 104px; }
  .sf-ready .sf-cut {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    opacity: 1;
  }
  .sf-ready .sf-shot {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--gold-border);
  }
  .sf-ready .sf-shot img { transform: none; opacity: 1; }
  .sf-ready .sf-cards { flex-direction: column; }
  .sf-ready .sf-cards li { opacity: 1; transform: none; }
  .sf-ready .sf-text { position: static; width: auto; transform: none; }
  .sf-ready .sf-text p { font-size: clamp(20px, 2.6vw, 30px); text-shadow: none; }
  .sf-ready .sf-canvas.is-on { display: none; }
  @media (max-width: 860px) {
    .sf-ready .sf-cut { grid-template-columns: 1fr; gap: 28px; }
  }
}