/* =============================================================
   hero-film.css — ヒーローをスクロールで進む1シーンにする

   流れ：
     ① オープニング（映像だけ）… スクロールで映像が進む。文字は出さない
     ② 着地したら文字が現れる  … ラベル／EVMEL／説明／CTA が浮かび上がる

   既定（JS無効 / reduced-motion / 素材なし）では .hero-pin はただの
   ラッパーで、従来どおり文字が最初から見える1画面ヒーローになる。
   ============================================================= */

/* JS が data-hero-manifest を読めたときだけ留める */
.hero-pin-on {
  position: relative;
  height: 260vh;                 /* この高さぶんスクロールする間、ヒーローが留まる */

  /* 文字の出現量 0→1。--hero-p が 0.62 を超えたところから立ち上がる。
     max()/min() で 0〜1 に丸める（clamp より対応が広い） */
  --t: max(0, min(1, calc((var(--hero-p, 0) - 0.62) * 4)));
}
.hero-pin-on .hero {
  position: sticky;
  top: 0;
  height: 100vh;
}

/* ===========================================================
   ①-a 静止画のオープニング（夜の街の灯り）
   連番映像を使わず、1枚をスクロールで引いていく。
   生成に頼らないので崩れようがなく、容量も1枚ぶんで済む。
   =========================================================== */
.hero-still {
  position: absolute;
  inset: 0;
  z-index: 0;                    /* 粒子(immersive.js)より奥 */
  overflow: hidden;
  display: block;
}
/* 連番映像が出たら静止画は退場（縦画面で帯の外に二重に見えるため） */
.hero-film-live .hero-still { opacity: 0; transition: opacity 0.8s var(--ease-smooth); }

.hero-still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 寄った状態から始まり、スクロールで引いて全景になる */
  transform: scale(calc(1.42 - var(--hero-p, 0) * 0.42));
  transform-origin: 50% 46%;
  will-change: transform;
}

/* ===========================================================
   ①-b 連番映像（任意・data-hero-manifest がある時だけ）
   素材が純黒背景なので screen で黒が抜ける（切り抜き不要）
   =========================================================== */
.hero-logo3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;          /* CTAのクリックを奪わない */
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.2s var(--ease-smooth);
}
/* オープニング中はしっかり見せ、文字が出てきたら引く */
.hero-logo3d.is-lit { opacity: calc(0.95 - var(--t) * 0.42); }

/* 写真の連番（夜景など）は素の合成で全面に敷く。screen だと白飛びする。
   静止画の上に重なるので、読ませる減光は ::before / ::after が担当する。 */
.hero-logo3d.is-photo { mix-blend-mode: normal; z-index: 1; }
.hero-logo3d.is-photo.is-lit { opacity: 1; }

/* 文字を読ませるための減光。オープニング中は薄く、文字が出たら効かせる */
.hero-pin-on .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: calc(0.18 + var(--t) * 0.82);
  background: radial-gradient(120% 78% at 50% 40%,
    rgba(10, 10, 10, 0.34) 0%,
    rgba(10, 10, 10, 0.66) 55%,
    rgba(10, 10, 10, 0.88) 100%);
}
.hero-pin-on .hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 52%;
  z-index: 4;
  pointer-events: none;
  opacity: var(--t);
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.7) 55%, rgba(10, 10, 10, 0.92) 100%);
}

/* ===========================================================
   ② 文字（オープニングのあと）
   映像と同じ進捗で駆動するので、別々に動いて見えない
   =========================================================== */
.hero-pin-on .hero-content {
  z-index: 5;
  opacity: var(--t);
  transform: translate3d(0, calc((1 - var(--t)) * 34px), 0);
  will-change: transform, opacity;
}
/* 中の要素をわずかにずらして出す（一斉に出ると板に見える） */
.hero-pin-on .hero-label { opacity: max(0, min(1, calc((var(--hero-p, 0) - 0.62) * 5))); }
.hero-pin-on .hero-desc  { opacity: max(0, min(1, calc((var(--hero-p, 0) - 0.70) * 5))); }
.hero-pin-on .hero-cta   { opacity: max(0, min(1, calc((var(--hero-p, 0) - 0.74) * 5))); }

/* スクロール案内はオープニングの間だけ出す（読ませる相手がまだ居ないため） */
.hero-pin-on .hero-scroll {
  z-index: 5;
  opacity: max(0, calc(1 - var(--hero-p, 0) * 1.6));
}

/* 縦書きタグラインも文字と一緒に出す */
.hero-pin-on .hero-tagline-v { opacity: calc(var(--t) * 0.85); }

@media (max-width: 860px) {
  /* スマホは留める距離を短くする（長いと「進まない」と感じる） */
  .hero-pin-on { height: 200vh; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pin-on { height: auto; }
  .hero-pin-on .hero { position: relative; }
  .hero-still img { transform: none; }
  .hero-logo3d { display: none; }
  .hero-pin-on .hero::before,
  .hero-pin-on .hero::after { display: none; }
  .hero-pin-on .hero-content { transform: none; opacity: 1; }
  .hero-pin-on .hero-label,
  .hero-pin-on .hero-desc,
  .hero-pin-on .hero-cta,
  .hero-pin-on .hero-scroll,
  .hero-pin-on .hero-tagline-v { opacity: 1; }
}