/* =====================================================================
   lux-motion.css  v1.0.0 … lux-motion.js と対（両方読むこと）
   L.U.X.I 見本LP 共用の演出部品

   このファイルの決めごと
     ・--カスタムプロパティを定義しない（LP検品 G10「定義したのに未使用」対策。色は LP 側で持つ）
     ・font-size / font-family / font ショートハンドを書かない（G1・G3 を LP の値で判定させる）
     ・半透明の gradient を書かない（G7 のオーバーレイ判定に混ざらないように）
     ・要素を隠すのは html.lux-js かつ「動きを減らす」設定でない時だけ
     ・LP 側の CSS はこのファイルより後に読み、色・太さ・大きさを上書きする
===================================================================== */

/* ---------------------------------------------------------------------
   1. 出現前のチラつき防止
   JS が要素ごとに初期状態を付け終える（.lux-armed）までだけ透明にする。
   JS が来ない・vendor が無い・3秒で保険が切れる → lux-js が外れて全部見える。
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .lux-js [data-lux~="lines"]:not(.lux-armed),
  .lux-js [data-lux~="chars"]:not(.lux-armed),
  .lux-js [data-lux~="fade"]:not([data-lux-stagger]):not(.lux-armed),
  .lux-js [data-lux~="rise"]:not([data-lux-stagger]):not(.lux-armed),
  .lux-js [data-lux~="fade"][data-lux-stagger]:not(.lux-armed) > *,
  .lux-js [data-lux~="rise"][data-lux-stagger]:not(.lux-armed) > *,
  .lux-js [data-lux~="reveal-img"]:not(.lux-armed),
  .lux-js [data-lux~="count"]:not(.lux-armed),
  .lux-js [data-lux-intro]:not(.lux-armed) {
    opacity: 0;
  }

  /* 幕は JS が動く時だけ出す */
  .lux-js [data-lux-curtain] {
    visibility: visible;
  }

  /* 進捗バーは JS が起動できた時だけ出す */
  .lux-ok [data-lux~="progress"] {
    display: block;
  }
}

/* ---------------------------------------------------------------------
   2. 幕（ページロード時のイントロ）data-lux-curtain
   位置と重なりだけ持つ。背景色・ロゴの置き方は LP 側で書く。
   pointer-events を切ってあるので、万一残ってもページは操作できる。
--------------------------------------------------------------------- */
[data-lux-curtain] {
  position: fixed;
  inset: 0;
  z-index: 2000;
  visibility: hidden;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   3. 行マスク data-lux="lines"
   行ごとに clip-path で切り抜く。上下に少しはみ出させて、
   字の上端・英字の下端（g や y）が欠けないようにしている。
   レイアウトは変えない（行の高さ・折り返しは分割前と同じ）。
--------------------------------------------------------------------- */
.lux-line {
  display: block;
  clip-path: inset(-0.15em -0.3em -0.15em -0.3em);
  text-indent: 0;
}

.lux-line:first-child {
  text-indent: inherit;
}

.lux-line__inner {
  display: block;
}

.lux-in > .lux-line {
  clip-path: none;
}

/* 両端揃えの段落: 最終行以外は両端揃えのまま保つ */
.lux-justify > .lux-line:not(:last-child) > .lux-line__inner {
  text-align-last: justify;
}

/* ---------------------------------------------------------------------
   4. 1文字ずつ data-lux="chars"
   単語（英数字）と禁則文字はかたまりのまま折り返す。
--------------------------------------------------------------------- */
.lux-word {
  display: inline-block;
  white-space: nowrap;
}

.lux-char {
  display: inline-block;
}

/* ---------------------------------------------------------------------
   5. 数字 data-lux="count"
   カウント中に桁の幅が揺れないよう等幅数字にする。
--------------------------------------------------------------------- */
[data-lux~="count"] {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   6. 無限マーキー data-lux="marquee"
   JS が中身を1行のトラックに組み替えた時だけ効く（.lux-marquee-on）。
   動かない時は LP 側のレイアウト（折り返し推奨）のまま全部見える。
--------------------------------------------------------------------- */
.lux-marquee-on {
  overflow: hidden;
}

.lux-marquee__track {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  width: max-content;
}

.lux-marquee__group {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: center;
}

.lux-marquee__group > * {
  flex-shrink: 0;
}

/* 左右の端をぼかす（任意）: data-lux-edge を付ける */
.lux-marquee-on[data-lux-edge] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* ---------------------------------------------------------------------
   7. ピン留め横スクロール data-lux="hscroll"
   既定（スマホ・JSなし・動きを減らす設定）は CSS だけで成立する形:
     data-lux-mobile="swipe"（既定）… 指で横にスワイプ、1枚ずつ吸着
     data-lux-mobile="stack"        … 縦に積む
   PC で JS が動くと .lux-hscroll-on が付き、ピン留め＋横送りに切り替わる。
   パネルの幅は LP 側で決める（例: width: min(80vw, 420px)）。
--------------------------------------------------------------------- */
[data-lux~="hscroll"] [data-lux-track] {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

[data-lux~="hscroll"] [data-lux-track] > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

[data-lux~="hscroll"][data-lux-mobile="stack"]:not(.lux-hscroll-on) [data-lux-track] {
  flex-direction: column;
  overflow-x: visible;
  scroll-snap-type: none;
}

[data-lux~="hscroll"][data-lux-mobile="stack"]:not(.lux-hscroll-on) [data-lux-track] > * {
  width: auto;
  max-width: none;
}

.lux-hscroll-on {
  overflow: hidden;
}

.lux-hscroll-on [data-lux-track] {
  width: max-content;
  overflow: visible;
  scroll-snap-type: none;
}

/* ---------------------------------------------------------------------
   8. 画面上端のスクロール進捗バー data-lux="progress"
   色は currentColor（LP 側で color を指定）。高さ・位置も LP 側で上書き可。
--------------------------------------------------------------------- */
[data-lux~="progress"] {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   9. カスタムカーソル（PC・マウスのみ。JS が body 直下に作る）
   色は currentColor ＝ body の文字色を継ぐ。LP で .lux-cursor { color: … } と上書き。
   OS のカーソルは消さない。
--------------------------------------------------------------------- */
.lux-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2100;
  pointer-events: none;
  opacity: 0;
}

.lux-cursor__ring {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color 0.3s, border-color 0.3s;
}

.lux-cursor.is-label .lux-cursor__ring {
  background-color: currentColor;
}

.lux-cursor__label {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   10. Lenis（PC の慣性スクロール）推奨設定
   html.lenis の間は CSS の scroll-behavior:smooth を切る（二重に滑らせない）。
--------------------------------------------------------------------- */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto !important;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ---------------------------------------------------------------------
   11. 動きを減らす設定 … 念のため JS が付けた装置も隠す
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lux-cursor,
  [data-lux~="progress"],
  [data-lux-curtain] {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   12. 印刷 … 途中の状態で刷られないよう、全部を最終状態で出す
--------------------------------------------------------------------- */
@media print {
  [data-lux],
  [data-lux-intro],
  [data-lux-stagger] > *,
  .lux-line__inner,
  .lux-char {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .lux-line {
    clip-path: none !important;
  }

  .lux-cursor,
  [data-lux-curtain],
  [data-lux~="progress"] {
    display: none !important;
  }
}