/* =================================================================
 * c-top-bg — TOP ページ専用 固定パララックス背景  Figma: 5693:90858
 *
 *  役割
 *    Figma 5693:90858 の「KV 背景模様 + blur(2px) + opacity(15%)」を再現する
 *    柔らかいピーチのにじみだけを担う層。鋭い曲線パターン（5693:90817）は
 *    KV セクション側（.c-kv__bg）に置き、KV と一緒にスクロールして上方へ流れる。
 *    結果として：
 *      - 初期表示: ソフト背景の上に鋭い曲線（=KV）
 *      - スクロール後: 曲線は画面外へ、ソフト背景だけが背面に残る（パララックス）
 *
 *  振る舞い
 *    - position:fixed。--c-top-bg-blur (0→13px) で JS から progressive blur。
 *    - z-index:-1。body 地色を透過にして固定背景が見える状態にする。
 *
 *  ※ 表示は body.page-top のみ（誤って他ページに干渉しないようスコープ）。
 * =================================================================*/

body.page-top {
  /* 既定 bg-default はベタ白なのでこのままだと固定背景が見えない。
     TOP だけ透過に切り替え、ヒーロー〜本文の固定背景が表示されるようにする。 */
  background-color: transparent;
}

.c-top-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* 地色：Figma 5693:90858 の見た目に合わせた淡い暖色。曲線は ::before で
     opacity を落として上に乗せ、合成で「ピーチのにじみ」を作る。 */
  background-color: #ffe6d4;
  filter: blur(var(--c-top-bg-blur, 0px));
  will-change: filter;
  transition: filter 120ms linear;
}

/* 柔らかい曲線レイヤ：Figma 5693:90858 の opacity(15%) + blur(2px) 相当を
   さらに強めに掛けてピーチ全体に滲ませる。鋭い曲線は KV 側に出すのでここでは描かない。 */
.c-top-bg::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: url("/img/front/top/bg/lines.svg");
  background-size: 178% auto;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.18;
  filter: blur(22px);
}

/* SP（≤1023.98px）— PC と同じ lines.svg ベース。にじみ範囲だけ調整。 */
@media (max-width: 1023.98px) {
  .c-top-bg::before {
    background-size: 260% auto;
    background-position: center top;
    filter: blur(28px);
  }
}