/* ============================================================
   line-effects.css — 流れ星Canvas & セクション区切りライン
   ============================================================ */

/* body：黒背景と stacking 基準 */
body {
  position: relative;
  background-color: var(--color-bg-dark); /* 全体の黒を担保。セクションが transparent でも黒に見える */
}

/* 流れ星 Canvas：z-index:0 で全セクションの背面に固定 */
.bg-stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* セクション共通：position:relative を保証 */
section {
  position: relative;
}

/* ヘッダー・フッター：Canvas より前面 */
header,
footer {
  position: relative;
  z-index: 1;
}

/* 区切りライン：Canvas より前面、ただしセクションより背面
   ※ z-index:1 のままだと、HTML上でセクションより後ろにあるぶん
     セクション内のコンテンツ（固定表示中の写真など）より前面に来てしまう。
     Canvas は z-index:0 かつ HTML上で先にあるため、0 でも線のほうが前面に描かれる。 */
.section-divider-line {
  position: relative;
  z-index: 0;
}

/* ============================================================
   全セクションを Canvas（z-index:0）より前面に
   背景色を持つことで Canvas を確実に隠す
   ============================================================ */
.hero,
.lead-section,
.about,
.vision,
.members,
.message,
.sns,
.event,
.news-section,
.contact-section,
.line-final-cta {
  z-index: 1;
}


/* ============================================================
   セクション切替ライン（A-1）
   ============================================================ */
.section-divider-line {
  width: 100%;
  height: 1px;
  overflow: hidden;
}

.section-divider-line__inner {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(201, 169, 97, 0)    0%,
    rgba(229, 204, 138, 0.9) 50%,
    rgba(201, 169, 97, 0)    100%
  );
  transform: scaleX(0);
  transform-origin: left center;
}