/* ============================================================
   Career Shift — スクロール連動ビデオヒーロー
   すべて .csfilm 配下に閉じたスタイルです。
   既存テーマ(css/style.css)とは干渉しません。
   ============================================================ */

/* ホストページのCSSに依存しないよう、box-sizing を自前で固定する。
   これが無いと stage の padding が height 計算の外側に足され、
   動画の下端が viewport からはみ出す（＝下余白が消える） */
.csfilm,
.csfilm *,
.csfilm *::before,
.csfilm *::after{
  box-sizing: border-box;
}

.csfilm{
  /* ---- 調整用パラメータ ---- */
  --csfilm-nav: 76px;         /* 固定ナビ(.c-nav)の高さ。ヒーローはこの下に収まる */
  --csfilm-radius: 26px;      /* 動画フレームの角丸 */
  --csfilm-inset: 18px;       /* フレームと画面端の余白（上下左右で均一） */
  --csfilm-veil: rgba(8,8,10,.92); /* 暗転の最終濃度はJS側 0.92 と連動 */
  --csfilm-accent: #ffffff;

  position: relative;
  /* 高さはJSが data-height (vh) から設定。JS無効時のフォールバック: */
  height: 260vh;
  /* テーマのコンテナ幅を突き破って全幅にする */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.csfilm__stage{
  position: sticky;
  top: var(--csfilm-nav);
  /* 動画の高さ = 100vh − ナビ高さ − 上下の余白(inset×2) */
  height: calc(100vh - var(--csfilm-nav));
  height: calc(100svh - var(--csfilm-nav)); /* mobile address-bar safe */
  display: flex;
  flex-direction: column;
  padding: 0 var(--csfilm-inset);
}

.csfilm__frame{
  position: relative;
  flex: 1;
  border-radius: var(--csfilm-radius);
  overflow: hidden;
  background: #0c0c0d;
  box-shadow: 0 24px 70px rgba(20,20,25,.18);
}

.csfilm__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 暗転ベール ---------- */
.csfilm__veil{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,.55) 0%, transparent 60%),
    linear-gradient(0deg, var(--csfilm-veil), rgba(8,8,10,.72) 45%, rgba(8,8,10,.55));
  opacity: 0;
  pointer-events: none;
}

/* ---------- 最後に現れるコピー ---------- */
.csfilm__copy{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 0 6vw;
  pointer-events: none;
}
.csfilm__copy > *{
  opacity: 0;
  transform: translateY(34px);
  will-change: opacity, transform;
  margin: 0;
}
.csfilm__title{
  font-family: "Poppins", "Helvetica Neue", Arial, "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 9.5vw, 150px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: #fff;
}
.csfilm__sub{
  margin-top: 26px;
  font-size: clamp(18.75px, 2.1875vw, 30px);
  font-weight: 400;
  letter-spacing: .06em;
}
.csfilm__period{
  margin-top: 16px;
  font-size: clamp(13px, 1.35vw, 19px);
  font-weight: 400;
  letter-spacing: .08em;
}
.csfilm__tri{ font-size: .75em; }
.csfilm__actions{
  margin-top: 34px;
  display: flex;
  gap: 16px;
  pointer-events: auto;
}
.csfilm__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 15px 34px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, background .25s ease, color .25s ease;
}
.csfilm__btn:hover{ transform: translateY(-2px); }
.csfilm__btn--ghost{ background: #fff; color: #1d1d1f; }
.csfilm__btn--dark{ background: rgba(43,43,46,.92); color: #fff; }
.csfilm__btn--dark:hover{ background: #000; }

/* ---------- SCROLLヒント ---------- */
.csfilm__hint{
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 11px;
  letter-spacing: .34em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: .9;
  transition: opacity .4s;
  font-weight: 500;
}
.csfilm__hintline{
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,.6);
  overflow: hidden;
  position: relative;
}
.csfilm__hintline::after{
  content: "";
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: #fff;
  animation: csfilm-drop 1.6s ease-in-out infinite;
}
@keyframes csfilm-drop{ to{ top: 100%; } }

/* ---------- 進行メーター ---------- */
.csfilm__meter{
  position: absolute;
  left: 26px;
  bottom: 22px;
  color: #fff;
  font-size: 11px;
  letter-spacing: .18em;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: .85;
  font-family: "Poppins", monospace, sans-serif;
}
.csfilm__bar{
  width: 120px;
  height: 2px;
  background: rgba(255,255,255,.28);
  border-radius: 2px;
  overflow: hidden;
}
.csfilm__bar i{
  display: block;
  height: 100%;
  width: 0%;
  background: #fff;
}

/* ---------- モバイル ---------- */
@media (max-width: 760px){
  .csfilm{ --csfilm-inset: 10px; --csfilm-radius: 18px; }
  .csfilm__actions{ flex-direction: column; }
}

/* ---------- 動きを減らす設定のユーザー ---------- */
@media (prefers-reduced-motion: reduce){
  .csfilm{ height: auto !important; }
  .csfilm__stage{ position: relative; height: calc(100svh - var(--csfilm-nav)); }
  .csfilm__veil{ opacity: 1 !important; }
  .csfilm__copy > *{ opacity: 1 !important; transform: none !important; }
  .csfilm__hint, .csfilm__meter{ display: none; }
}