/* ============================================================
   gallery-mood-overlay.css — BL-GALLERY-PHOTO-G1 (NEW-G1 写真側).

   役割:
     gallery iframe / 詳細ページの hero 写真の上に重ねる装飾 layer
     (SVG コーナー + 業種別 gradient tint) で 8 mood × 5 業種 = 40 通りの
     視覚的差別化を出す (Genspark 本物写真の代替実装).

   スコープ: gallery ページ専用. 公開 LP (lp.css / .lp-page) には一切影響しない.
   ⚠️ .gallery-mood-overlay-host / .mood-overlay の付かない裸セレクタは書かない.

   設計原則:
     - 全ての色は CSS variable. ハードコード禁止 (CLAUDE.md 遵守).
     - !important 禁止. specificity は data-attribute の積み重ねで担保.
     - SVG 装飾は viewBox 100×100 / preserveAspectRatio="none" で .mood-overlay 全面に拡張.

   参照:
     - memory project_gallery_hero_photo_plan.md
     - memory feedback_decorative_illustrations.md (タイル不可、コーナー個別配置)
     - memory feedback_texture_not_pattern.md (gradient + テクスチャ、パターン不可)
   ============================================================ */

/* ----- token: 業種別 tint と mood 別 line color ----- */
.mood-overlay {
  /* 業種別 tint の base color (5 業種). .mkt の --accent / --ink-* token を流用. */
  --mood-tint-rose: 224, 64, 122; /* beauty-salon: 薄ピンク (rose-500 系) */
  --mood-tint-amber: 217, 119, 6; /* ramen: 温かい黄 (amber-600 系) */
  --mood-tint-navy: 30, 58, 95; /* corporate: 深い青 (navy 系) */
  --mood-tint-blush: 244, 114, 182; /* cosmetics: パステルピンク (pink-400 系) */
  --mood-tint-indigo: 49, 46, 129; /* ryokan: 深い藍 (indigo-700 系) */
  --mood-tint-neutral: 100, 116, 139; /* fallback (slate-500 系) */

  /* mood 別 SVG ライン色 (currentColor 経由で SVG に当てる) */
  --mood-line-elegant: var(--accent, #a07d3e); /* 真鍮ゴールド */
  --mood-line-clean: rgba(255, 255, 255, 0.9);
  --mood-line-modern: rgba(255, 255, 255, 0.85);
  --mood-line-natural: rgba(220, 252, 231, 0.85); /* やわらかい緑寄り白 */
  --mood-line-pop: rgba(254, 240, 138, 0.95); /* レモン寄り白 */
  --mood-line-bold: rgba(254, 226, 226, 0.95); /* 赤寄り白 */
  --mood-line-japanese: rgba(199, 210, 254, 0.9); /* 藍寄り白 */
  --mood-line-feminine: rgba(252, 231, 243, 0.95); /* ピンク寄り白 */

  /* mood 別装飾 opacity (デフォ 0.85、繊細さは 0.6 〜 0.9 の範囲で調整). */
  --mood-opacity: 0.85;
}

/* mood-overlay-host: hero 写真の親要素. 子要素を絶対配置するため relative を保証. */
.mood-overlay-host {
  position: relative;
}

/* 実体: hero 写真の全面を覆う層. pointer-events: none で画像のクリック透過. */
.mood-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: block;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
}

/* tint layer: 業種別 gradient. 画像が透けるように mix-blend-mode + alpha で薄く重ねる. */
.mood-overlay__tint {
  position: absolute;
  inset: 0;
  display: block;
  /* fallback (data-tint 未指定): 何も塗らない */
  background: transparent;
  mix-blend-mode: multiply;
  opacity: 0.32;
}

/* 業種別 tint: 上から下へのソフト gradient (画像の可視性 0.7-0.8 を保つ alpha) */
.mood-overlay[data-tint="rose"] .mood-overlay__tint {
  background: linear-gradient(
    180deg,
    rgba(var(--mood-tint-rose), 0.18) 0%,
    rgba(var(--mood-tint-rose), 0.45) 100%
  );
}
.mood-overlay[data-tint="amber"] .mood-overlay__tint {
  background: linear-gradient(
    180deg,
    rgba(var(--mood-tint-amber), 0.2) 0%,
    rgba(var(--mood-tint-amber), 0.5) 100%
  );
}
.mood-overlay[data-tint="navy"] .mood-overlay__tint {
  background: linear-gradient(
    180deg,
    rgba(var(--mood-tint-navy), 0.25) 0%,
    rgba(var(--mood-tint-navy), 0.55) 100%
  );
}
.mood-overlay[data-tint="blush"] .mood-overlay__tint {
  background: linear-gradient(
    180deg,
    rgba(var(--mood-tint-blush), 0.18) 0%,
    rgba(var(--mood-tint-blush), 0.45) 100%
  );
}
.mood-overlay[data-tint="indigo"] .mood-overlay__tint {
  background: linear-gradient(
    180deg,
    rgba(var(--mood-tint-indigo), 0.25) 0%,
    rgba(var(--mood-tint-indigo), 0.55) 100%
  );
}
.mood-overlay[data-tint="neutral"] .mood-overlay__tint {
  background: linear-gradient(
    180deg,
    rgba(var(--mood-tint-neutral), 0.15) 0%,
    rgba(var(--mood-tint-neutral), 0.4) 100%
  );
}

/* svg-wrap: 装飾 SVG を絶対配置で hero 全面に拡張 (tint より上に重ねる) */
.mood-overlay__svg-wrap {
  position: absolute;
  inset: 0;
  display: block;
  opacity: var(--mood-opacity);
}

.mood-overlay__svg-wrap > svg.mood-overlay__svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ----- mood ごとの SVG line color ----- */
.mood-overlay[data-mood="elegant"] .mood-overlay__svg-wrap {
  color: var(--mood-line-elegant);
}
.mood-overlay[data-mood="clean"] .mood-overlay__svg-wrap {
  color: var(--mood-line-clean);
}
.mood-overlay[data-mood="modern"] .mood-overlay__svg-wrap {
  color: var(--mood-line-modern);
}
.mood-overlay[data-mood="natural"] .mood-overlay__svg-wrap {
  color: var(--mood-line-natural);
}
.mood-overlay[data-mood="pop"] .mood-overlay__svg-wrap {
  color: var(--mood-line-pop);
}
.mood-overlay[data-mood="bold"] .mood-overlay__svg-wrap {
  color: var(--mood-line-bold);
}
.mood-overlay[data-mood="japanese"] .mood-overlay__svg-wrap {
  color: var(--mood-line-japanese);
}
.mood-overlay[data-mood="feminine"] .mood-overlay__svg-wrap {
  color: var(--mood-line-feminine);
}

/* ----- 40 通りの specificity を確保する組合せ rule -----
   `[data-mood][data-industry]` で「業種ごとに mood の opacity / blend を微調整」する余地を残す.
   現状は全 40 で共通の base 表現でよく、特異 case のみ override する.
   例: corporate × pop は楽しすぎないよう opacity を下げる、など (今は無し).
*/

/* corporate (業種が硬い) × pop / feminine の組合せはやや抑える */
.mood-overlay[data-industry="corporate"][data-mood="pop"] {
  --mood-opacity: 0.55;
}
.mood-overlay[data-industry="corporate"][data-mood="feminine"] {
  --mood-opacity: 0.6;
}

/* ryokan (和) × pop は和の雰囲気を壊さないよう抑える */
.mood-overlay[data-industry="ryokan"][data-mood="pop"] {
  --mood-opacity: 0.65;
}

/* cosmetics × bold は重く感じるので opacity を抑える */
.mood-overlay[data-industry="cosmetics"][data-mood="bold"] {
  --mood-opacity: 0.6;
}

/* prefers-reduced-motion はあっても overlay 自体は static なので変更不要 */