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


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

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

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


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


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

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

.is-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(--is-aspect-ratio);
  overflow: hidden;
  background-color: var(--is-bg);
}

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

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

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

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


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

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

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


/* -------------------------------------------------------------
 * ピン: hover演出
 * - PCのhoverのみ対象（タッチ端末では発火しない）
 * - transform-box: fill-box でSVG要素自身の境界を基準にする
 * ------------------------------------------------------------- */

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

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