/* =============================================================
 * mv-map.css
 * MV専用スコープのスタイル
 * - リセットCSS不使用
 * - すべてのセレクタは .mv-map 以下に限定
 *
 * ■ ファイル構成
 *   ZONE A: カスタムプロパティ（調整可能な値）
 *   ZONE B: スタイルルール（ZONE A の値を参照して動作）
 * ============================================================= */


/* ╔═══════════════════════════════════════════════════════════════╗
 * ║                                                               ║
 * ║   ZONE A: 設定値（★ ここを編集してください ★）               ║
 * ║                                                               ║
 * ║   色・比率・フォント・アニメーション値など、                  ║
 * ║   調整が必要なパラメータをカスタムプロパティで定義します。    ║
 * ║   値を変えたい場合はこのブロックだけ編集してください。        ║
 * ║                                                               ║
 * ╚═══════════════════════════════════════════════════════════════╝ */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.mv-map {
  /* ★ アートボード比率（Illustratorのアートボード寸法に合わせる） */
  --mv-aspect-ratio: 2560 / 1440;
  /* ★ 背景色（SVG読み込み前・SVG透明部分のフォールバック色） */
  --mv-bg: #fffcca;
  /* ★ SVG内テキストのフォント */
  --mv-font: "Lexend", sans-serif;
  /* ★ ピン hover: スケール倍率 */
  --mv-pin-scale: 1.1;
  /* ★ ピン hover: 上方向への移動量（負値で上へ） */
  --mv-pin-lift: -4%;
  /* ★ ピン hover: トランジション時間 */
  --mv-pin-duration: 0.2s;
}


/* ╔═══════════════════════════════════════════════════════════════╗
 * ║                                                               ║
 * ║   ZONE B: スタイルルール（★ 編集不要 ★）                     ║
 * ║                                                               ║
 * ║   以下は ZONE A のカスタムプロパティを参照して動作します。    ║
 * ║   値の変更は ZONE A のカスタムプロパティを編集してください。  ║
 * ║                                                               ║
 * ╚═══════════════════════════════════════════════════════════════╝ */


/* -------------------------------------------------------------
 * ラッパー / SVG 基本配置
 * ------------------------------------------------------------- */

.mv-map-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.mv-map {
  /* object-fit: cover 相当: アスペクト比を維持しながらビューポートを埋める */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, calc(100vh * 2560 / 1440));
  height: auto;
  aspect-ratio: var(--mv-aspect-ratio);
  overflow: hidden;
  background-color: var(--mv-bg);
}

.mv-map__svg-wrap {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mv-map__svg-wrap.is-ready {
  visibility: visible;
}

.mv-map__svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mv-map__svg text {
  font-family: var(--mv-font);
}


/* -------------------------------------------------------------
 * 花壇: ステージ切替
 * - デフォルトは全ステージ非表示
 * - .mv-map 親に付与された is-flower-* クラスに応じて
 *   対応するステージのみ表示する
 * ------------------------------------------------------------- */

.mv-map__flowerbed-stage {
  display: none;
}

.mv-map.is-flower-0   .mv-map__flowerbed-stage--0,
.mv-map.is-flower-20  .mv-map__flowerbed-stage--20,
.mv-map.is-flower-40  .mv-map__flowerbed-stage--40,
.mv-map.is-flower-60  .mv-map__flowerbed-stage--60,
.mv-map.is-flower-80  .mv-map__flowerbed-stage--80,
.mv-map.is-flower-100 .mv-map__flowerbed-stage--100 {
  display: inline;
}


/* -------------------------------------------------------------
 * 人物: フレーム切替
 * - デフォルトは全フレーム非表示
 * - フレーム1のみ初期表示（JSが未ロードの場合のフォールバック）
 * - 実際のコマ切替はJSで制御する
 * ------------------------------------------------------------- */

.mv-map__person-frame {
  display: none;
}

.mv-map__person-frame--01 {
  display: inline;
}


/* -------------------------------------------------------------
 * ピン: hover演出
 * - PCのhoverのみ対象（タッチ端末では発火しない）
 * - transform-box: fill-box でSVG要素自身の境界を基準にする
 * - ピンの原点がSVG座標上でズレる場合は transform-box も確認する
 * ------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .mv-map__pin {
    transform-origin: center bottom;
    transition: transform var(--mv-pin-duration) ease;

    transform-box: fill-box;
  }

  .mv-map__pin:hover {
    transform: scale(var(--mv-pin-scale)) translateY(var(--mv-pin-lift));
  }
}