/* =====================================================================
   3日でええやん — /lp/ ベンチマーク級ギミック追加レイヤー
   （lp.css の「後」に読み込む。既存システムは一切変更せず上積みのみ）
   実装：Lenis慣性スクロール／カスタムカーソル／マグネティックCTA／
        スクロール連動パララックス（GSAP・装飾のみ）／フィルムグレイン／
        ヒーロー グラデーションの微ドリフト
   方針：prefers-reduced-motion・タッチ／粗いポインタでは全演出を無効化し、
        内容は常に完全表示。CDN非依存（ライブラリは /lp/vendor/ に自前配置）。
   ===================================================================== */

/* ---- Lenis（慣性スクロール）公式推奨スタイル ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ====================================================================
   1. フィルムグレイン（全面・極薄・装飾）
   ==================================================================== */
.lp-grain {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
@media (prefers-reduced-motion: reduce) { .lp-grain { display: none; } }
/* スマホ／タッチ端末では非表示。
   ローエンドAndroidで mix-blend-mode:overlay がスクロールジャンクの要因になり、
   有機ELでは overlay が白浮きを起こすため（視覚効果はほぼ無いので除去が安全）。 */
@media (max-width: 1023px), (pointer: coarse) { .lp-grain { display: none; } }

/* ====================================================================
   2. カスタムカーソル（デスクトップ／pointer:fine のみ・JSが付与）
   ==================================================================== */
.lp-has-cursor,
.lp-has-cursor a,
.lp-has-cursor button,
.lp-has-cursor summary,
.lp-has-cursor [data-open-modal],
.lp-has-cursor .btn { cursor: none; }

.lp-cursor {
  position: fixed; top: 0; left: 0; z-index: 10000;
  pointer-events: none; will-change: transform;
  transition: opacity 0.3s ease;
}
.lp-cursor__dot {
  display: block; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--color-gold);
}
.lp-cursor__ring {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 1px solid rgba(184, 151, 106, 0.65);
  border-radius: 50%;
  pointer-events: none; will-change: transform;
  transition: width 0.28s var(--lp-ease, ease),
              height 0.28s var(--lp-ease, ease),
              margin 0.28s var(--lp-ease, ease),
              border-color 0.28s ease,
              background-color 0.28s ease,
              opacity 0.3s ease;
}
.lp-cursor__ring.is-hover {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-color: var(--color-gold);
  background: rgba(184, 151, 106, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .lp-cursor, .lp-cursor__ring { display: none !important; }
  .lp-has-cursor, .lp-has-cursor * { cursor: auto !important; }
}

/* ====================================================================
   3. マグネティックCTA（デスクトップのみ・JSが付与）
   ==================================================================== */
.lp-magnetic { transition: transform 0.18s var(--lp-ease, ease); }

/* ====================================================================
   4. ヒーロー：濃紺グラデーションのゆっくりとした揺らぎ（奥行き演出）
   ==================================================================== */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .lp-page .lp-hero {
    background-size: 180% 180%;
    animation: lpHeroDrift 22s ease-in-out infinite;
  }
  @keyframes lpHeroDrift {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
  }
}

/* ====================================================================
   5. スクロール連動パララックス対象の初期化補助（GSAPが上書きする）
   ==================================================================== */
/* will-change はPC（演出が実際に動く環境）限定。
   常駐 will-change はローエンド端末のメモリを浪費しページ強制再読込を招くため。 */
@media (min-width: 1024px) and (pointer: fine) {
  .lp-page .section-head__num { will-change: transform; }
}