/* =====================================================================
   3日でええやん — LPサンプル 専用モーションCSS（/lp/ のみ読み込み）
   既存デザインシステム（tokens/base/components）は一切変更せず追加分のみ。
   ・スクロール連動の背景シーン切替（fixed 1枚／色のみ・合成層に優しい）
   ・見出しマスクスライド／ヒーローのマスクリリース／数字カウントアップ
   ・2層 prefers-reduced-motion 対応（動きOFFでも瞬時に内容は表示）
   ・モバイル/LINE安全：background-attachment:fixed 不使用、パララックスはPCのみ
   ===================================================================== */

.lp-page {
  --lp-ease: cubic-bezier(0.16, 1, 0.3, 1);   /* expo.out：必ず slow-out */
  --lp-scene-dur: 480ms;
  --lp-deep: #101a30;   /* hero / 数字バンドの最深ネイビー（テーマ非依存） */
  --lp-navy: #16223d;   /* 帯セクションのネイビー（テーマ非依存） */
}

/* ====================================================================
   1. スクロール連動 背景シーン（固定1枚・色のみトランジション）
   ==================================================================== */
.lp-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--color-cream);
  transition: background-color var(--lp-scene-dur) var(--lp-ease);
}
:root[data-lp-scene="cream"] .lp-bg { background-color: var(--color-cream); }
:root[data-lp-scene="white"] .lp-bg { background-color: var(--color-warm-white); }
:root[data-lp-scene="gold"]  .lp-bg { background-color: var(--color-gold-pale); }
:root[data-lp-scene="navy"]  .lp-bg { background-color: var(--lp-navy); }
:root[data-lp-scene="deep"]  .lp-bg { background-color: var(--lp-deep); }

/* コンテンツ・フッターを背景レイヤより前面へ（fixed z=0 に潜らせない） */
.lp-page #main          { position: relative; z-index: 1; }
.lp-page .site-footer   { position: relative; z-index: 1; }
/* 通常セクションは透過させ、背景シーン色を見せる（カードは各自bgで可読性確保） */
.lp-page main > .section { background: transparent; }

/* ====================================================================
   2. スクロール進捗バー（上端のゴールド）
   ==================================================================== */
.lp-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  transform: scaleX(var(--lp-progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-gold), #d8bd92);
  z-index: calc(var(--z-sticky) + 1);
  pointer-events: none;
  will-change: transform;
}

/* ====================================================================
   3. Hero：ドラマティックな濃紺シーン（テーマ問わず常に暗）
   ==================================================================== */
.lp-page .lp-hero,
:root:not([data-theme="light"]) .lp-hero,
:root[data-theme="dark"] .lp-hero {
  background: linear-gradient(168deg, var(--lp-navy) 0%, var(--lp-deep) 100%);
}
.lp-hero { isolation: isolate; }
.lp-hero::before { color: #ffffff; opacity: 0.06; }      /* ウォーターマークを白に */
.lp-hero .hero__eyebrow    { color: var(--color-gold); }
.lp-hero .hero__title      { color: #ffffff; }
.lp-hero .hero__sub        { color: rgba(255, 255, 255, 0.84); }
.lp-hero .hero__sub strong { color: var(--color-gold); }
.lp-hero .hero__note       { color: rgba(255, 255, 255, 0.62); }
.lp-hero .btn-ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
}
.lp-hero .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: #ffffff;
}

/* Hero パララックス：PC（pointer:fine）のみ JS が --hero-parallax を更新 */
.lp-hero::before {
  transform: translateY(calc(-50% + var(--hero-parallax, 0px)));
}

/* 3b. Hero 見出しのマスクリリース（行ごとに下から立ち上がる） */
.lp-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.lp-line__inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1000ms var(--lp-ease);
  transition-delay: var(--lp-line-delay, 0ms);
}
.lp-hero.is-loaded .lp-line__inner { transform: translateY(0); }

/* 3c. Hero その他要素：ロード時フェードアップ（段階表示） */
.lp-page [data-lp-load] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms var(--lp-ease), transform 800ms var(--lp-ease);
  transition-delay: var(--lp-load-delay, 0ms);
}
.lp-page [data-lp-load].is-loaded { opacity: 1; transform: none; }

/* ====================================================================
   4. セクション見出し：アイブロウ横スライド＋ゴールド罫線描画＋見出しマスク
   ==================================================================== */
.lp-page [data-lp-head] .section-head__eyebrow {
  display: inline-block;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 600ms var(--lp-ease), transform 600ms var(--lp-ease);
}
.lp-page [data-lp-head] .lp-rule {
  display: block;
  width: 48px; height: 2px;
  margin: 12px auto 0;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 720ms var(--lp-ease) 140ms;
}
.lp-head-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lp-head-mask > span {
  display: block;
  transform: translateY(108%);
  transition: transform 860ms var(--lp-ease) 90ms;
}
.lp-page [data-lp-head].is-in .section-head__eyebrow { opacity: 1; transform: none; }
.lp-page [data-lp-head].is-in .lp-rule               { transform: scaleX(1); }
.lp-page [data-lp-head].is-in .lp-head-mask > span   { transform: translateY(0); }

/* ====================================================================
   4b. 煽り帯：テーマ非依存の濃紺に統一（ダークモードのコントラスト確保＋
       新パレットの濃紺バンドと見た目を統一。白文字を常に可読に保つ）
   ==================================================================== */
.lp-page .lp-agitate {
  background: linear-gradient(168deg, var(--lp-navy) 0%, var(--lp-deep) 100%);
}

/* ====================================================================
   5. 数字で見る（濃紺バンド＋カウントアップ）
   ==================================================================== */
.lp-stats {
  position: relative;
  background: linear-gradient(168deg, var(--lp-navy) 0%, var(--lp-deep) 100%);
  padding-block: clamp(var(--space-7), 9vw, var(--space-8));
}
.lp-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 860px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
@media (max-width: 680px) {
  .lp-stats__grid { grid-template-columns: 1fr; max-width: 320px; gap: var(--space-6); }
}
.lp-stats__item { text-align: center; }
.lp-stats__num {
  display: block;
  font-family: var(--font-serif-en);
  font-weight: 300;
  font-size: clamp(3rem, 9vw, 4.5rem);
  line-height: 1;
  color: var(--color-gold);
  letter-spacing: -0.01em;
}
.lp-stats__unit {
  font-family: var(--font-serif-ja);
  font-size: clamp(0.9375rem, 2.4vw, 1.125rem);
  margin-left: 4px;
  color: #ffffff;
}
.lp-stats__label {
  display: block;
  margin-top: var(--space-3);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.04em;
}

/* ====================================================================
   6. 動きを減らす設定（prefers-reduced-motion）への2層対応
   ・透明度フェードは残し、transform/パララックス/罫線描画は無効
   ・背景シーンは瞬時切替（チラつき回避のため transition なし）
   ・count-up は JS 側で即時に最終値へ
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lp-bg { transition: none; }
  .lp-progress { will-change: auto; }
  .lp-line__inner,
  .lp-page [data-lp-load],
  .lp-page [data-lp-head] .section-head__eyebrow,
  .lp-page [data-lp-head] .lp-rule,
  .lp-head-mask > span {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
    opacity: 1 !important;
  }
  /* パララックス停止 */
  .lp-hero::before { transform: translateY(-50%) !important; }
}

/* タッチ／粗いポインタ端末はパララックス無効（保険：JSでも無効化） */
@media (hover: none), (pointer: coarse) {
  .lp-hero::before { transform: translateY(-50%) !important; }
}
@media (max-width: 1023px) {
  .lp-hero::before { transform: translateY(-50%) !important; }
}