/* ============================================================================
   LP アニメーション辞典のうち、未適用だった手法の追加 — 2026-10-16
   既存の演出層（wn-com-experience / wn-blog-experience / design-refresh）には
   手を入れず、このファイルと lp-techniques.js だけで完結させる。
   すべて prefers-reduced-motion: reduce で無効になる。
   ============================================================================ */

/* 既定では何も変えない。JS が対応を確認したページにだけ .wn-lp 系クラスを付ける。 */

/* ----------------------------------------------------------------------------
   1. カードスタック（S-14）
   手順カードがスクロールに合わせて順に重なっていく。
   sticky の top を 1 枚ずつずらすことで、前のカードの上に次が乗る。
   ---------------------------------------------------------------------------- */
@media (min-width: 768px) {
  html body[class] .wn-lp-stack > * {
    position: sticky;
    /* JS の順序値は sticky が有効な幅でだけ使う。 */
    top: var(--wn-lp-stack-top);
    background: var(--c-paper, #fff);
  }
}

/* ----------------------------------------------------------------------------
   2. カルーセル（06）
   カード列を横スクロール + スナップにする。矢印は出さず、
   指とトラックパッドで送れる形にとどめる（既存の静かな調子を崩さない）。
   ---------------------------------------------------------------------------- */
/* 対象は既に display:grid で、そちらの grid-template-columns が詳細度で勝つ。
   flex に変えるのではなく grid のまま横 1 列に流す（クラスを重ねて詳細度を上げる）。 */
html body[class] .wn-lp-carousel.wn-lp-carousel {
  /* grid のまま流すと既存の配置指定（先頭カードの列指定など）が残り、
     1 枚目が 0 幅になった。flex に切り替えて配置指定ごと無効化する。 */
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 8px;
}
html body[class] .wn-lp-carousel.wn-lp-carousel > * {
  scroll-snap-align: start;
  margin: 0;
  min-width: 0;
  flex: 0 0 min(82%, 320px);
}

/* ----------------------------------------------------------------------------
   3. 背景色切り替え（S-13）
   セクションが画面に入ったとき、背景をごく薄く変える。
   色そのものは既存トークンの範囲に収め、新しい色を持ち込まない。
   ---------------------------------------------------------------------------- */
html body[class] .wn-lp-bgshift {
  transition: background-color 700ms cubic-bezier(.2, .7, .25, 1);
}
html body[class] .wn-lp-bgshift.is-in {
  background-color: var(--c-surface, rgba(246, 249, 254, .75));
}

/* ----------------------------------------------------------------------------
   4. パララックス（02 / 03）
   装飾レイヤーだけをスクロールより遅く動かす。
   本文やボタンには掛けない（読む位置がぶれるため）。
   ---------------------------------------------------------------------------- */
html body[class] .wn-lp-parallax {
  will-change: transform;
}

/* ----------------------------------------------------------------------------
   5. スクロール連動変形（03）
   キャラクター等の装飾を、スクロール量に応じてわずかに傾ける。
   ---------------------------------------------------------------------------- */
html body[class] .wn-lp-scrolltf {
  will-change: transform;
}

/* ----------------------------------------------------------------------------
   動きを減らす設定では、すべて静止させる
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html body[class] .wn-lp-stack > * { position: static; }
  html body[class] .wn-lp-carousel.wn-lp-carousel {
    overflow-x: visible; display: block; scroll-snap-type: none;
  }
  html body[class] .wn-lp-carousel.wn-lp-carousel > * { flex: none; }
  html body[class] .wn-lp-bgshift { transition: none; }
  html body[class] .wn-lp-parallax,
  html body[class] .wn-lp-scrolltf { transform: none !important; }
}