/**
 * layers.css — 演出レイヤーゲート（FR-005 / US-003）
 *
 * ゲート対象ラッパー: 以下4属性を持つ任意の要素（Playground全体・各Variationカード等）
 *   data-font="on|off"    字種別書体レイヤー
 *   data-size="on|off"    字種別サイズ（size-adjust）レイヤー
 *   data-color="on|off"   意味色レイヤー
 *   data-motion="on|off"  意味モーションレイヤー
 *
 * 実装は「ルートのdata属性切替のみ」で完結させる（再スキャン不要・即時反映）。
 * font/size の組合せは合成ファミリー（fonts.css）の切替に対応させる：
 *   on/on  -> telopia-full   （3書体 + size-adjust）
 *   on/off -> telopia-face   （3書体のみ）
 *   off/on -> telopia-scale  （Noto Sans JP + 字種別size-adjustのみ）
 *   off/off -> 指定しない（base.cssのフォントスタックを継承）
 */

/* ---------------------------------------------------------------
   1. 書体 × サイズ → .stage の font-family 切替
--------------------------------------------------------------- */

[data-font="on"][data-size="on"] .stage {
  font-family: "telopia-full", "Noto Sans JP", sans-serif;
}

[data-font="on"][data-size="off"] .stage {
  font-family: "telopia-face", "Noto Sans JP", sans-serif;
}

[data-font="off"][data-size="on"] .stage {
  font-family: "telopia-scale", "Noto Sans JP", sans-serif;
}

/* data-font="off" data-size="off" は明示指定なし。
   .stage / body 側（base.css）のフォントスタックをそのまま継承する。 */

/* ---------------------------------------------------------------
   2. 意味色レイヤー（.kw）
--------------------------------------------------------------- */

/* color ON: 単色kwに意味色を適用 */
[data-color="on"] .kw {
  color: var(--kw-color, currentColor);
}

/* color ON かつ --kw-gradient を持つkw: グラデーション文字
   （style属性に --kw-gradient があるかどうかはCSS単独で判定できないため、
   属性セレクタ [style*="--kw-gradient"] で分岐する） */
[data-color="on"] .kw[style*="--kw-gradient"] {
  background-image: var(--kw-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* color OFF: 単色・グラデーションいずれも明示的に復帰させる。
   background-image / color / -webkit-text-fill-color の3点セットを
   必ず戻さないとグラデーション文字が消えたままになる（design.md §5 教訓）。 */
[data-color="off"] .kw {
  background-image: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* 名詞kwへの軽い視覚アンカー（color ON時のみ・控えめに下線） */
[data-color="on"] .kw[data-pos="noun"] {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
  text-decoration-color: currentColor;
}

[data-color="off"] .kw[data-pos="noun"] {
  text-decoration: none;
}

/* ---------------------------------------------------------------
   3. 意味モーションレイヤー
--------------------------------------------------------------- */

/* motion OFF: 1文字spanのアニメーションを止める（motion.cssの指定を打ち消す） */
[data-motion="off"] .kw .ch {
  animation: none;
}

/* motion ON は motion.css 側の .kw[data-motion="X"] .ch 定義がそのまま効く
   （ここでは何も上書きしない） */