/* ============================================================
   トップ セクション08: Neovisionの制作フロー (モダン / パイプライン型)
   スクロール連動ビーム + 点灯ノード + カードのリビール。
   アニメは transform / opacity のみ (高負荷 blur 回避 / GPU フレンドリ)。
   トークンは base.css を参照。
   ============================================================ */

.nv-flow{
  --nv-latin:'Montserrat', var(--nv-font);
  --nv-grad:linear-gradient(180deg,#2A67D4,#4EB1EA);
  --rail-x:38px;      /* レール中心 X = ノード列(76px)の中央 */
  --node:64px;
  position:relative;
  padding:96px 0 104px;
  background:
    radial-gradient(1100px 420px at 82% -8%, rgba(78,177,234,.10), transparent 62%),
    #F7FAFE;
  overflow:hidden;
}

/* 背景のドットグリッド (テック質感 / 上方向にフェード) */
.nv-flow__grid{
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(42,103,212,.14) 1px, transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(125% 78% at 50% 0%, #000 32%, transparent 80%);
          mask-image:radial-gradient(125% 78% at 50% 0%, #000 32%, transparent 80%);
  opacity:.55;
  pointer-events:none;
}

/* --- 見出し (他セクションと共通の透かし + タイトル + バー) --- */
.nv-flow__head{
  position:relative;
  z-index:1;
  text-align:center;
  padding-top:40px;
  margin-bottom:64px;
}
.nv-flow__watermark{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--nv-latin);
  font-size:96px;
  font-style:italic;
  font-weight:600;
  line-height:1;
  letter-spacing:.04em;
  color:#E2ECFB;
  white-space:nowrap;
  pointer-events:none;
  z-index:0;
}
.nv-flow__title{
  position:relative;
  z-index:1;
  margin:0;
  font-family:var(--nv-latin);
  font-size:40px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
}
.nv-flow__accent{
  display:block;
  width:40px;
  height:4px;
  margin:20px auto 0;
  border-radius:4px;
  background:var(--nv-main);
}

/* --- ステップ列 --- */
.nv-flow__steps{
  position:relative;
  z-index:1;
  max-width:900px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* レール (トラック) + 進行ビーム。位置は JS が first/last ノード中心に合わせる。
   JS 無効時はフォールバックで steps 全高を薄く走る。 */
.nv-flow__rail{
  position:absolute;
  left:var(--rail-x);
  top:0;
  height:100%;
  width:2px;
  transform:translateX(-50%);
  background:rgba(31,58,95,.12);
  border-radius:2px;
  z-index:0;
}
.nv-flow__rail-fill{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:0;
  background:var(--nv-grad);
  border-radius:2px;
  box-shadow:0 0 12px rgba(42,103,212,.45);
}
/* ビーム先端の光点 (コメットヘッド) */
.nv-flow__rail-fill::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-3px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#5FB6EE;
  transform:translateX(-50%);
  box-shadow:0 0 10px 2px rgba(78,177,234,.65);
}

/* --- 各ステップ (ノード + カード) --- */
.nv-flow__step{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:var(--node) 1fr;
  column-gap:32px;
  align-items:start;
}

/* ノード */
.nv-flow__node{
  position:relative;
  z-index:1;
  width:var(--node);
  height:var(--node);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--nv-white);
  border:2px solid rgba(42,103,212,.22);
  color:var(--nv-text);
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease, background .35s ease, color .35s ease;
}
.nv-flow__node-num{
  font-family:var(--nv-latin);
  font-size:20px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
/* 点灯リング (点灯時に一度だけ拡散) */
.nv-flow__node-ring{
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border:2px solid rgba(78,177,234,.6);
  opacity:0;
  pointer-events:none;
}
.nv-flow__step.is-active .nv-flow__node{
  background:var(--nv-grad);
  border-color:transparent;
  color:#fff;
  transform:scale(1.06);
  box-shadow:0 6px 18px rgba(42,103,212,.32), 0 0 0 6px rgba(78,177,234,.10);
}
.nv-flow__step.is-active .nv-flow__node-ring{
  animation:nv-flow-pulse .9s ease-out;
}
@keyframes nv-flow-pulse{
  0%{ transform:scale(1); opacity:.75; }
  100%{ transform:scale(1.55); opacity:0; }
}

/* カード */
.nv-flow__card{
  position:relative;
  background:var(--nv-white);
  border:1px solid rgba(42,103,212,.10);
  border-radius:14px;
  padding:22px 26px 24px;
  box-shadow:0 10px 30px rgba(31,58,95,.06);
  transition:border-color .35s ease, box-shadow .35s ease;
}
/* 左端の大きな番号 (うっすら透かし / 点灯ステップで少し発色) */
.nv-flow__cardnum{
  position:absolute;
  z-index:0;
  top:2px;
  left:16px;
  font-family:var(--nv-latin);
  font-size:88px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:#F5F8FC;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
  user-select:none;
  transition:color .35s ease;
}
.nv-flow__step.is-active .nv-flow__cardnum{ color:#E9F1FB; }
/* 見出し・本文は透かしより前面に */
.nv-flow__titlerow,
.nv-flow__body{ position:relative; z-index:1; }
.nv-flow__step.is-active .nv-flow__card{
  border-color:rgba(42,103,212,.28);
  box-shadow:0 14px 34px rgba(42,103,212,.12);
}

/* レール → カードをつなぐ横ティック */
.nv-flow__connector{
  position:absolute;
  left:-32px;
  top:33px;
  width:32px;
  height:2px;
  background:linear-gradient(90deg, rgba(42,103,212,.30), rgba(42,103,212,0));
}
.nv-flow__step.is-active .nv-flow__connector{
  background:linear-gradient(90deg, rgba(42,103,212,.7), rgba(42,103,212,0));
}

.nv-flow__titlerow{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.nv-flow__steptitle{
  margin:0;
  font-size:20px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--nv-text);
}
/* 補足ラベルはチップ表示 (テック感) */
.nv-flow__label{
  display:inline-flex;
  align-items:center;
  padding:3px 11px;
  border-radius:999px;
  background:rgba(42,103,212,.08);
  color:var(--nv-main);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}
.nv-flow__body{
  margin:14px 0 0;
  font-size:14px;
  line-height:1.75;
  letter-spacing:.02em;
  color:#48607d;
}

/* --- リビール (JS が .is-anim を付与したときのみ発動) --- */
.nv-flow.is-anim .nv-flow__card{
  opacity:0;
  transform:translateX(20px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.nv-flow.is-anim .nv-flow__step.is-in .nv-flow__card{
  opacity:1;
  transform:none;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1024px){
  .nv-flow{ padding:72px 0 88px; }
  .nv-flow__watermark{ font-size:72px; }
  .nv-flow__title{ font-size:34px; }
  .nv-flow__head{ margin-bottom:48px; }
  .nv-flow__step{ column-gap:24px; }
}

/* SP (Figma 390px 基準 / 左右20pxガター) */
@media (max-width:767px){
  .nv-flow{
    --rail-x:24px;
    --node:48px;
    padding:32px 0 44px;
    background:#F5F9FD;
  }
  .nv-flow__grid{ background-size:22px 22px; opacity:.4; }

  .nv-flow__head{
    padding-top:32px;
    margin-bottom:24px;
  }
  .nv-flow__watermark{ top:0; font-size:40px; color:#FFFFFF; }
  .nv-flow__title{ font-size:24px; }
  .nv-flow__accent{ width:24px; height:3px; margin:8px auto 0; }

  .nv-flow__steps{ gap:14px; }
  .nv-flow__step{
    grid-template-columns:var(--node) 1fr;
    column-gap:14px;
  }
  .nv-flow__node-num{ font-size:16px; }
  .nv-flow__card{ padding:16px 16px 18px; border-radius:12px; }
  .nv-flow__cardnum{ font-size:58px; top:4px; left:12px; }
  .nv-flow__connector{ display:none; }
  .nv-flow__steptitle{ font-size:17px; }
  .nv-flow__body{ margin-top:10px; font-size:13.5px; line-height:1.7; }

  /* モバイルは下から出す (横スクロール誘発を避ける) */
  .nv-flow.is-anim .nv-flow__card{ transform:translateY(16px); }
}

/* モーション控えめ設定を尊重 */
@media (prefers-reduced-motion:reduce){
  .nv-flow.is-anim .nv-flow__card,
  .nv-flow__node,
  .nv-flow__card,
  .nv-flow__connector{ transition:none; }
  .nv-flow.is-anim .nv-flow__card{ opacity:1; transform:none; }
  .nv-flow__step.is-active .nv-flow__node-ring{ animation:none; }
}