/* ============================================
   curve-animation.css
   背景曲線アニメーション — 河野正美様サイト用
   使い方: セクションに class="curve-bg" を付ける
   色やパス形状はdata属性でカスタマイズ可能
   ============================================ */

/* ---- ベース ---- */
.curve-bg {
  position: relative;
  overflow: hidden;
}

/* ---- SVGコンテナ（絶対配置で背景に敷く） ---- */
.curve-bg__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* コンテンツは前面に */
.curve-bg > *:not(.curve-bg__svg) {
  position: relative;
  z-index: 1;
}

/* ---- 曲線パス（太） ---- */
.curve-bg__path {
  fill: none;
  stroke: #409e11;
  stroke-width: 250;
  stroke-linecap: round;
  opacity: 0.1;

  stroke-dasharray: 4000; /* JSで上書き */
  stroke-dashoffset: 4000;

  /* opacityは変化させない。stroke-dashoffsetだけアニメーション */
  transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
  animation: none !important;
}

/* ---- 曲線パス（細・ハイライト） ---- */
.curve-bg__path--thin {
  fill: none;
  stroke: #409e11;
  stroke-width: 0;
  stroke-linecap: round;
  opacity: 0.15;

  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;

  transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
  animation: none !important;
}

/* ---- アニメーション発火・発火後も維持 ---- */
.curve-bg.is-fired .curve-bg__path,
.curve-bg.is-fired .curve-bg__path--thin {
  stroke-dashoffset: 0 !important;
}

/* ---- セクション別のカラーバリエーション ---- */
/* curve-bg--light → 薄め（白背景デフォルト） */
.curve-bg--light .curve-bg__path       { opacity: 0.12; }
.curve-bg--light .curve-bg__path--thin { opacity: 0.25; }

/* curve-bg--strong → 濃いめ（薄色背景セクション向け） */
.curve-bg--strong .curve-bg__path       { opacity: 0.28; }
.curve-bg--strong .curve-bg__path--thin { opacity: 0.5;  }