/* ============================================================
   front-page.css — TOPページ専用スタイル
   Phase 1: Lenis / マスクテキスト / スケールイン / マーキー
============================================================ */

/* ------ 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;
}

/* ------ マスクテキスト ------ */
.js-mask-text {
  overflow: hidden;
  /* 既存の display / margin を保持しつつ clip するためブロック化 */
  display: block;
}

.js-mask-inner {
  display: block;
  /* will-change: transform で GPU に乗せる */
  will-change: transform;
}

/* ------ 画像スケールイン ------ */
.js-scale-img {
  overflow: hidden;
  will-change: transform;
}

/* js-scale-img 内の img は overflow から飛び出さないよう制限 */
.js-scale-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* ------ マーキーセクション ------ */
.marquee-section {
  overflow: hidden;
  padding: 20px 0;
  border-top: 1px solid rgba(139, 115, 85, 0.18);
  border-bottom: 1px solid rgba(139, 115, 85, 0.18);
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  /* JS でアニメーション → will-change 付与 */
  will-change: transform;
}

.marquee-item {
  display: inline-block;
  padding: 0 2.4em;
  font-family: 'Marcellus SC', serif;
  font-size: clamp(11px, 1.5vw, 15px);
  letter-spacing: 0.22em;
  color: #8b7355;
  white-space: nowrap;
  user-select: none;
}

/* 区切り記号 */
.marquee-item::after {
  content: '\2014'; /* em dash */
  margin-left: 2.4em;
  opacity: 0.35;
}

/* ============================================================
   SP 対応（max-width: 768px）
============================================================ */
@media (max-width: 768px) {
  /* パララックスは SP 側で無効化（JS 側でも分岐済み） */
  .js-scale-img img {
    will-change: auto;
  }

  .marquee-item {
    padding: 0 1.6em;
    letter-spacing: 0.16em;
  }

  .marquee-item::after {
    margin-left: 1.6em;
  }
}
