/* ============================================================
   video-production.html 専用のモーション拡張
   - styles.css / script.js は一切変更せず、このファイルで上書きする
   - 初期非表示になる指定は必ず「JSが付けたクラス」の配下に置き、
     JS無効・JSエラー時にコンテンツが消えないようにする
   ============================================================ */

/* ------------------------------------------------------------
   1. Hero — フローフィールド背景
   canvas は JS が .hero 内（.hero-inner の手前）に差し込む。
   差し込みに成功したときだけ .fx-flow が付き、既存のグリッド線を退ける。
   ------------------------------------------------------------ */

.hero .fx-flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* 既存 .hero-grid と同じく下端に向かって消す */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 62%, transparent 100%);
}

/* 線の流れ場に置き換えるので、このページのヒーローのグリッドは畳む
   （contact-grid はそのまま残す） */
.hero.fx-flow .hero-grid { display: none; }

/* ------------------------------------------------------------
   2. 見出しのライズリベール
   .fx-rise / .fx-rise-inner / .fx-soft / .fx-soft-inner はすべて JS が付与。
   ------------------------------------------------------------ */

html.js-fx .fx-rise {
  overflow: hidden;
  /* 明朝の下端が刈られないように、クリップ位置をわずかに下げる */
  padding-bottom: .12em;
}

/* 既存 .reveal と二重にならないよう、fx を適用した見出しでは reveal を無効化する。
   ライズの transition は「子」に持たせているので、script.js が親へ入れる
   inline の transition-delay の影響も受けない。 */
html.js-fx .fx-rise.reveal,
html.js-fx .fx-soft.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

html.js-fx .fx-rise .fx-rise-inner {
  display: block;
  transform: translateY(110%);
  filter: blur(5px);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform .9s var(--ease),
    opacity   .9s var(--ease),
    filter    .9s var(--ease);
}
html.js-fx .fx-rise.fx-in .fx-rise-inner {
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
}

/* 見出し直後のリード文は 0.15s 遅れでふわっと */
html.js-fx .fx-soft .fx-soft-inner {
  display: block;
  transform: translateY(14px);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform .8s var(--ease) .15s,
    opacity   .8s var(--ease) .15s;
}
html.js-fx .fx-soft.fx-in .fx-soft-inner {
  transform: translateY(0);
  opacity: 1;
}

/* ------------------------------------------------------------
   3. CTA — マグネティック + シャイン
   .fx-magnetic はポインタが精密デバイスのときだけ JS が付ける。
   ------------------------------------------------------------ */

html.js-fx .btn.fx-magnetic {
  transform: translate3d(var(--fx-mx, 0px), var(--fx-my, 0px), 0);
  /* 追従は JS の lerp が担うので transform の transition は外す */
  transition: box-shadow .25s var(--ease), filter .25s var(--ease);
}
html.js-fx .btn.fx-magnetic:hover {
  transform: translate3d(var(--fx-mx, 0px), calc(var(--fx-my, 0px) - 2px), 0);
}

/* 大きい CTA には hover で光の帯を 1 回だけ走らせる */
html.js-fx .btn-lg {
  position: relative;
  overflow: hidden;
}
html.js-fx .btn-lg::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -75%;
  width: 42%;
  z-index: 1;
  pointer-events: none;
  transform: translateX(0) skewX(-18deg);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .38) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
}
html.js-fx .btn-lg:hover::after,
html.js-fx .btn-lg:focus-visible::after {
  animation: fx-shine .8s var(--ease) 1;
}
@keyframes fx-shine {
  0%   { opacity: 0; transform: translateX(0) skewX(-18deg); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(420%) skewX(-18deg); }
}

/* ------------------------------------------------------------
   4. 実績カード / リストのホバーリフト（CSSのみ）
   iframe の上でも効くよう JS は使わない。
   ------------------------------------------------------------ */

html.js-fx .work-card {
  transition:
    transform  .35s var(--ease),
    box-shadow .35s var(--ease),
    opacity    .7s  var(--ease);
}
html.js-fx .work-card:hover {
  transform: translateY(-4px);
}
html.js-fx .work-card .work-video {
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
html.js-fx .work-card:hover .work-video {
  border-color: var(--brand-lt);
  box-shadow: 0 8px 32px rgba(234, 106, 36, .18);
}

html.js-fx #genres .check-list li:hover,
html.js-fx #faq    .check-list li:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(31, 26, 23, .03),
    0 18px 34px -26px rgba(184, 70, 15, .55);
}

/* ------------------------------------------------------------
   5. Coverflow gallery（hero 内の3Dカルーセル）
   JS が動くまでは「横並びの静的なカード」。.fx-cf-ready が付いて
   はじめて 3D レイアウトへ切り替わるので、JS 無効/エラーでも中身は見える。
   ------------------------------------------------------------ */

/* hero を2カラム化（左テキスト55% / 右コバーフロー45%）。
   このファイルは video-production.html だけが読むので .hero-sub に閉じて指定する。 */
@media (min-width: 769px) {
  .hero-sub .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: center;
    column-gap: clamp(28px, 3.4vw, 64px);
  }
  .hero-sub .hero-col-text { min-width: 0; }
  .hero-sub .hero-col-media {
    min-width: 0;
    overflow: visible;   /* サイドカードのはみ出しをそのまま見せる */
  }
  /* 2カラムだと 46em は広すぎるのでこのページだけ詰める。
     はみ出したサイドカードが本文に被らないよう、カラム幅にも上限を掛ける */
  .hero-sub .hero-lead { max-width: min(28em, 90%); }
  .hero-sub .fx-coverflow { margin-top: 0; }
}

/* 狭めのデスクトップは左へのはみ出しが本文に届くので、カードを詰める */
@media (min-width: 769px) and (max-width: 1100px) {
  .fx-coverflow { --cf-w: min(380px, 26vw); }
}

.fx-coverflow {
  /* NOTE: %は height 計算(--cf-h)で無効になりステージ高が0になるため、
     必ず px / vw で指定する */
  --cf-w: min(380px, 30vw);
  --cf-h: calc(var(--cf-w) * 9 / 16);
  position: relative;
  z-index: 1;            /* フローフィールド canvas(0) より前 */
  margin-top: clamp(40px, 5vw, 60px);
}

.fx-cf-track {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.fx-cf-item { width: var(--cf-w); max-width: 100%; }

.fx-cf-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fx-cf-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: #1F1A17;
  box-shadow:
    0 2px 6px rgba(31, 26, 23, .06),
    0 22px 44px -26px rgba(184, 70, 15, .55);
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.fx-cf-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 画像の上でスワイプしたときにブラウザ標準の画像ドラッグへ持っていかれないように */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* 再生バッジ */
.fx-cf-play {
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 18px rgba(31, 26, 23, .28);
  opacity: .92;   /* JS 無効時（横並び表示）でも再生できると分かるように */
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.fx-cf-play::before {
  content: "";
  position: absolute;
  left: 52%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--brand);
}

.fx-cf-title {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-sub);
}

/* ---- 3D レイアウト（JS 稼働時のみ） ---- */

/* 立ち上がりのフェードは .reveal ではなく fx 側で持つ。
   初期非表示は JS が付ける .fx-cf-ready の配下なので、JS 無効時は最初から見えている。 */
.fx-coverflow.fx-cf-ready {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.fx-coverflow.fx-cf-ready.fx-cf-in {
  opacity: 1;
  transform: none;
}

.fx-coverflow.fx-cf-ready .fx-cf-stage {
  position: relative;
  height: calc(var(--cf-h) + 56px);
  perspective: 1100px;
  perspective-origin: 50% 42%;
  touch-action: pan-y;          /* 縦スクロールは残しつつ横は自前で拾う */
  user-select: none;
  -webkit-user-select: none;
}

.fx-coverflow.fx-cf-ready .fx-cf-track {
  display: block;
  position: absolute;
  inset: 0;
  gap: 0;
  transform-style: preserve-3d;
}

.fx-coverflow.fx-cf-ready .fx-cf-item {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--cf-w);
  max-width: none;
  margin-left: calc(var(--cf-w) / -2);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}

/* 中央カードだけタイトルと再生バッジを見せる */
.fx-coverflow.fx-cf-ready .fx-cf-title,
.fx-coverflow.fx-cf-ready .fx-cf-play {
  opacity: 0;
  transition: opacity .45s var(--ease), transform .35s var(--ease);
}
.fx-coverflow.fx-cf-ready .fx-cf-item[data-active="true"] .fx-cf-title { opacity: 1; }
.fx-coverflow.fx-cf-ready .fx-cf-item[data-active="true"] .fx-cf-play { opacity: .92; }

.fx-coverflow.fx-cf-ready .fx-cf-item[data-active="true"] .fx-cf-card:hover .fx-cf-play,
.fx-coverflow.fx-cf-ready .fx-cf-item[data-active="true"] .fx-cf-card:focus-visible .fx-cf-play {
  opacity: 1;
  transform: scale(1.08);
}
.fx-coverflow.fx-cf-ready .fx-cf-item[data-active="true"] .fx-cf-card:hover .fx-cf-media {
  border-color: var(--brand-lt);
  box-shadow:
    0 2px 6px rgba(31, 26, 23, .06),
    0 26px 52px -24px rgba(184, 70, 15, .7);
}
.fx-coverflow.fx-cf-ready .fx-cf-card:focus-visible .fx-cf-media {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.fx-coverflow.fx-cf-dragging .fx-cf-item,
.fx-coverflow.fx-cf-dragging .fx-cf-track { transition: none; }

/* ---- ライトボックス（JS が body 直下に生成） ---- */

.fx-cf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;          /* header(50) より前 */
  display: grid;
  place-items: center;
  padding: clamp(16px, 5vw, 48px);
  background: rgba(31, 26, 23, .74);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
          backdrop-filter: saturate(140%) blur(6px);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.fx-cf-lightbox[hidden] { display: none; }
.fx-cf-lightbox.is-open { opacity: 1; }

.fx-cf-frame {
  position: relative;
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #1F1A17;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
  transform: scale(.97);
  transition: transform .28s var(--ease);
}
.fx-cf-lightbox.is-open .fx-cf-frame { transform: scale(1); }
.fx-cf-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.fx-cf-close {
  position: absolute;
  top: clamp(12px, 3vw, 24px);
  right: clamp(12px, 3vw, 24px);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.fx-cf-close:hover { background: #fff; transform: scale(1.06); }

/* ≤768px は縦積み（テキストの下にカルーセル）。autoplay はそのまま動く */
@media (max-width: 768px) {
  .fx-coverflow { --cf-w: min(420px, 72vw); }
}
@media (max-width: 640px) {
  .fx-cf-title { font-size: 12.5px; }
  .fx-cf-play { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
}

/* ------------------------------------------------------------
   6. 料金シミュレーター（#estimator）
   .est-ui は既定で非表示 / .est-fallback だけを見せる。
   JS の初期化が最後まで通ったときだけ .est.is-ready が付いて入れ替わるので、
   JS 無効・JS エラーのどちらでも「上の料金表を見てください」の一文が残る。
   ------------------------------------------------------------ */

.est { padding: clamp(22px, 3vw, 34px) clamp(18px, 3vw, 32px); }

.est-fallback {
  margin: 0;
  font-size: 15px;
  color: var(--ink-sub);
}

.est .est-ui { display: none; }

.est.is-ready .est-fallback { display: none; }
.est.is-ready .est-ui {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 316px);
  align-items: start;
  gap: clamp(22px, 3vw, 36px);
}

/* ---- 入力側 ---- */

.est-inputs {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  min-width: 0;
}

.est-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;   /* fieldset の既定 min-width で grid が伸びるのを防ぐ */
}

.est-legend {
  display: block;
  float: left;    /* legend を通常のブロックとして扱わせる（Safari 対策） */
  width: 100%;
  padding: 0;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--brand-dk);
}
.est-legend + * { clear: both; }

/* 共通のボタン地 */
.est-pill,
.est-segbtn,
.est-togbtn,
.est-step {
  font: inherit;
  color: var(--ink-body);
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .22s var(--ease),
    border-color .22s var(--ease),
    color .22s var(--ease),
    box-shadow .22s var(--ease),
    transform .22s var(--ease);
}
.est-pill:focus-visible,
.est-segbtn:focus-visible,
.est-togbtn:focus-visible,
.est-step:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* 用途：ピル */
.est-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.est-pill {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: 14px;
  line-height: 1.5;
}
.est-pill:hover { border-color: var(--brand-lt); color: var(--brand-dk); }
.est-pill[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--brand-lt) 0%, var(--brand) 60%, var(--brand-dk) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 14px rgba(184, 70, 15, .22);
}

/* 尺：セグメント */
.est-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border-radius: 13px;
  background: var(--tint);
  border: 1px solid var(--line);
}
.est-segbtn {
  flex: 1 1 auto;
  min-width: 68px;
  padding: 9px 8px;
  border-radius: 9px;
  border-color: transparent;
  background: transparent;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}
.est-segbtn:hover { background: rgba(255, 255, 255, .7); color: var(--brand-dk); }
.est-segbtn[aria-pressed="true"] {
  background: #fff;
  border-color: var(--line);
  color: var(--brand-dk);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(31, 26, 23, .07);
}

/* 素材：2択トグル */
.est-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.est-togbtn {
  display: block;
  padding: 13px 15px;
  border-radius: 13px;
  text-align: left;
}
.est-togbtn:hover { border-color: var(--brand-lt); }
.est-togbtn-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}
.est-togbtn-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-sub);
}
.est-togbtn[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.est-togbtn[aria-pressed="true"] .est-togbtn-title { color: var(--brand-dk); }

/* 本数：ステッパー */
.est-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--tint);
  border: 1px solid var(--line);
}
.est-step {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border-color: var(--line);
  font-size: 17px;
  line-height: 1;
  color: var(--brand-dk);
}
.est-step:hover:not(:disabled) { border-color: var(--brand); background: #fff; }
.est-step:disabled { opacity: .35; cursor: default; }
.est-count {
  min-width: 78px;
  text-align: center;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---- 結果カード ---- */

.est-result {
  min-width: 0;
  padding: clamp(20px, 2.4vw, 26px);
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--tint) 0%, #fff 62%);
  box-shadow: 0 1px 2px rgba(31, 26, 23, .03), 0 20px 40px -30px rgba(184, 70, 15, .6);
}

.est-result-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-sub);
  margin-bottom: 4px;
}

.est-unit {
  font-family: var(--font-en);
  font-size: clamp(30px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.est-unit small {
  font-size: .5em;
  font-weight: 500;
  color: var(--ink-sub);
  margin-inline-start: 1px;
}
/* 「要お見積り」表示のときは日本語なので明朝寄りの落ち着いたサイズに */
.est-unit.is-quote {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 700;
}

.est-total {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-sub);
}
.est-total strong {
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-inline-start: 6px;
  font-variant-numeric: tabular-nums;
}

.est-discount {
  margin-top: 8px;
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--tint);
  border: 1px solid var(--line-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-dk);
}
.est-discount[hidden] { display: none; }

.est-note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--ink-sub);
}

.est-cta {
  margin-top: 18px;
  width: 100%;
  --btn-py: 16px;
  --btn-px: 22px;
  font-size: 14.5px;
}

/* ---- レスポンシブ ---- */

@media (max-width: 860px) {
  .est.is-ready .est-ui { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .est-toggle { grid-template-columns: minmax(0, 1fr); }
  /* 7項目を 4 + 3 に割る。入らない幅では自然に 3 + 3 + 1 へ折り返す */
  .est-segbtn { min-width: 0; flex: 1 1 22%; padding-inline: 4px; }
  .est-pill { font-size: 13.5px; padding: 8px 14px; }
  .est-cta { --btn-px: 16px; font-size: 13.5px; }
  .est-cta .btn-arrow { padding-inline-start: 4px; }
}

/* ------------------------------------------------------------
   reduced-motion — 動かさず、必ず全部見える状態にする
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html.js-fx .fx-rise {
    overflow: visible;
    padding-bottom: 0;
  }
  html.js-fx .fx-rise .fx-rise-inner,
  html.js-fx .fx-soft .fx-soft-inner {
    transform: none;
    filter: none;
    opacity: 1;
    transition: none;
  }
  html.js-fx .btn-lg::after { display: none; }
  html.js-fx .work-card:hover,
  html.js-fx #genres .check-list li:hover,
  html.js-fx #faq    .check-list li:hover { transform: none; }

  .est-pill,
  .est-segbtn,
  .est-togbtn,
  .est-step { transition: none; }
}