/* Lueur — motion layer（案2：印象重視）
   静止版 styles.css には手を入れず、動きに必要なスタイルだけをここに足す。
   .js-motion が html に付いたときだけ初期状態を隠す（JS 失敗時は静止版のまま表示）。 */

/* 初期状態は JS が付与する html.js-motion のときだけ */
html.js-motion [data-reveal] { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
html.js-motion [data-reveal="fade"] { transform: none; }
html.js-motion .hero__photo img { transform: scale(1.06); transform-origin: 50% 40%; will-change: transform; }

/* 全幅写真・大きな写真は、枠の中で少しだけ上下に動く（視差） */
.bleed, .hero__photo, .single { overflow: hidden; }
html.js-motion .bleed img { transform: scale(1.12); will-change: transform; }
html.js-motion .single img { transform: scale(1.08); will-change: transform; }
html.js-motion .pair figure img { will-change: transform; }

/* 節の切り替え：見出し前の細い罫が伸びる */
html.js-motion .eyebrow { position: relative; }
html.js-motion .eyebrow::after {
  content: ""; display: block; width: 28px; height: 1px; margin-top: 10px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left center;
}
html.js-motion .center .eyebrow::after, html.js-motion .hero__copy .eyebrow::after { margin-inline: auto; transform-origin: center; }
html.js-motion .eyebrow::after { transition: transform 1s cubic-bezier(.2,.7,.2,1) .3s; }
html.js-motion .eyebrow.is-in::after { transform: scaleX(1); }

/* マイクロインタラクション */
.cta { transition: background-color .35s ease, color .35s ease, transform .35s ease, opacity .2s; }
.cta:hover { opacity: 1; background: var(--color-sub); border-color: var(--color-sub); transform: translateY(-1px); }
.cta--ghost:hover { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.faq dt { cursor: pointer; transition: color .3s; }
.faq dt:hover { color: var(--color-sub); }
.faq dd { overflow: hidden; }
html.js-motion .faq dd { max-height: 0; padding-top: 0; padding-bottom: 0; transition: max-height .5s ease, padding .5s ease, opacity .4s ease; opacity: 0; }
html.js-motion .faq dd.is-open { max-height: 320px; padding-bottom: 22px; opacity: 1; }
.faq dt::after { content: "＋"; margin-left: auto; font-family: var(--font-latin); color: var(--color-accent); transition: transform .4s ease; }
.faq dt.is-open::after { transform: rotate(45deg); }

/* 追尾ヘッダー：下へスクロールで薄く縮む */
.site-header { transition: padding .35s ease, box-shadow .35s ease; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--color-rule); }
.site-header.is-scrolled .site-header__inner { padding-top: 10px; padding-bottom: 10px; }

/* モーション軽減：すべて即時表示、視差なし */
@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
  html.js-motion .hero__photo img, html.js-motion .bleed img, html.js-motion .single img { transform: none !important; }
  html.js-motion .eyebrow::after { transform: none !important; }
  html.js-motion .faq dd { max-height: none; opacity: 1; padding-bottom: 22px; transition: none; }
  .cta, .faq dt, .site-header { transition: none; }
}