/* =========================================================
   FloorMap Mobile - styles.mobile.css
   =========================================================

   ■ カスタマイズ早見表
   ─────────────────────────────────────────────────────────
   見た目を変えたい箇所            → 変数名（:root セクション）
   ─────────────────────────────────────────────────────────
   アプリ全体の背景色              → --fm-map-bg
   マップ背景グラデーション        → --fm-map-grad-1 / --fm-map-grad-2
   マップ背景画像                  → [MAP] .fm-stage の background-image を参照
   ─────────────────────────────────────────────────────────
   上部マップ選択バー 背景/透明度  → --fm-topbar-bg
   上部マップ選択バー 下線         → --fm-topbar-border
   マップ選択タブ 通常時           → --fm-tab-bg / --fm-tab-border / --fm-tab-color
   マップ選択タブ 選択中           → --fm-tab-active-bg / --fm-tab-active-border / --fm-tab-active-color
   ─────────────────────────────────────────────────────────
   検索パネル 背景/透明度          → --fm-sheet-bg
   検索パネル ハンドル 背景        → --fm-sheet-bg-2
   ─────────────────────────────────────────────────────────
   リスト各レコード 背景           → --fm-list-item-bg
   ─────────────────────────────────────────────────────────
   詳細モーダル 背景               → --fm-modal-bg
   詳細モーダル 枠線               → --fm-modal-border
   詳細モーダル 影                 → --fm-modal-shadow
   ─────────────────────────────────────────────────────────
   共有/詳細 背景オーバーレイ      → --fm-overlay-bg
   ─────────────────────────────────────────────────────────
   ズームボタン 背景/枠線          → --fm-zoom-bg / --fm-zoom-border
   ─────────────────────────────────────────────────────────
   全体の枠線色（薄い区切り線）    → --fm-border
   全体の影                        → --fm-shadow
   ─────────────────────────────────────────────────────────
   アクセントカラー（青）          → --fm-accent
   テキスト 主色                   → --fm-text
   テキスト 補助色（薄）           → --fm-muted
   ========================================================= */


/* =========================================================
   [THEME] CSS変数（ここを変えると全体に反映される）
   ========================================================= */
:root {
  /* ---- レイアウト定数 ---- */
  --fm-topbar-h:   72px;    /* 上部マップ選択バーの高さ */
  --fm-sheet-peek: 84px;    /* 検索パネルの見えている高さ（折りたたみ時） */
  --fm-radius:     22px;    /* 検索パネルの角丸 */

  /* ---- 全体共通 ---- */
  --fm-shadow:  0 12px 40px rgba(0,0,0,.18);   /* 各パネルの影 */
  --fm-border:  rgba(0,0,0,.10);               /* 薄い区切り線 */
  --fm-accent:  #2563eb;                       /* アクセントカラー（青） */
  --fm-text:    #0b1220;                       /* テキスト主色 */
  --fm-muted:   rgba(0,0,0,.55);               /* テキスト補助色 */

  /* ---- [MAP] マップ背景 ---- */
  --fm-map-bg:      #0b1220;                   /* マップ領域のベース色 */
  --fm-map-grad-1:  rgba(30,58,138,.35);       /* グラデーション 上右（青系） */
  --fm-map-grad-2:  rgba(15,118,110,.20);      /* グラデーション 下左（緑系） */
  /* ↑ 背景画像を使う場合は [MAP] .fm-stage の background-image を参照 */

  /* ---- [TOPBAR] マップ選択バー ---- */
  --fm-topbar-bg:     rgba(10,14,24,.82);      /* バー背景色・透明度 */
  --fm-topbar-border: rgba(255,255,255,.08);   /* バー下線色 */

  /* ---- [TAB] マップ選択タブ ---- */
  --fm-tab-bg:     rgba(255,255,255,.07);      /* 通常時 背景 */
  --fm-tab-border: rgba(255,255,255,.14);      /* 通常時 枠線 */
  --fm-tab-color:  rgba(255,255,255,.70);      /* 通常時 文字色 */

  --fm-tab-active-bg:     rgba(37,99,235,.85); /* 選択中 背景（青ベタ） */
  --fm-tab-active-border: rgba(37,99,235,1);   /* 選択中 枠線 */
  --fm-tab-active-color:  #ffffff;             /* 選択中 文字色 */

  /* ---- [SHEET] 検索パネル ---- */
  --fm-sheet-bg:   rgba(255,255,255,.96);      /* パネル背景 */
  --fm-sheet-bg-2: rgba(255,255,255,.92);      /* ハンドル（引き上げバー）背景 */

  /* ---- [LIST] リスト各レコード ---- */
  --fm-list-item-bg: rgba(255,255,255,.92);    /* 1件ずつの背景 */

  /* ---- [DETAIL] 詳細モーダル ---- */
  --fm-modal-bg:     rgba(255,255,255,.98);    /* モーダル背景 */
  --fm-modal-border: rgba(0,0,0,.10);          /* モーダル枠線 */
  --fm-modal-shadow: 0 18px 50px rgba(0,0,0,.32); /* モーダル影 */

  /* ---- [SHARE / DETAIL] オーバーレイ ---- */
  --fm-overlay-bg: rgba(0,0,0,.48);            /* 背景暗転の色・濃度 */

  /* ---- [MAP UI] ズームボタン ---- */
  --fm-zoom-bg:     rgba(10,14,24,.65);        /* ズームボタン背景 */
  --fm-zoom-border: rgba(255,255,255,.18);     /* ズームボタン枠線 */
}


/* =========================================================
   ベース
   ========================================================= */
html, body {
  height: 100%;
  overscroll-behavior: none;
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, sans-serif;
}
body {
  margin: 0;
  background: var(--fm-map-bg);
}
#root, .fm-mobile-app {
  font-size: 18px;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  position: relative;
}


/* =========================================================
   [TOPBAR] マップ選択バー
   - 背景/透明度 : --fm-topbar-bg
   - 下線        : --fm-topbar-border
   ========================================================= */
.fm-topbar {
  position: relative;
  z-index: 20;
  height: var(--fm-topbar-h);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 14px;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  background: var(--fm-topbar-bg);
  border-bottom: 1px solid var(--fm-topbar-border);
}

/* ---- タブ一覧 ---- */
.fm-map-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1 1 auto;
}
.fm-map-tabs::-webkit-scrollbar { display: none; }

/* ---- [TAB] 各マップ選択タブ ---- */
/* 通常時: --fm-tab-* 変数で調整 */
.fm-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 14px;
  border-radius: 999px;
  border: 1px solid var(--fm-tab-border);
  color: var(--fm-tab-color);
  background: var(--fm-tab-bg);
  font-size: 18px;
  line-height: 1;
  user-select: none;
  transition: background 150ms, border-color 150ms, color 150ms, box-shadow 150ms;
}
/* 選択中: --fm-tab-active-* 変数で調整 */
.fm-tab.is-active {
  background: var(--fm-tab-active-bg);
  border-color: var(--fm-tab-active-border);
  color: var(--fm-tab-active-color);
  box-shadow: 0 2px 12px rgba(37,99,235,.40);  /* 青い光彩で視認性UP */
  font-weight: 900;
}

.fm-top-right {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 8px;
}
.fm-fit-wrap { flex: 0 0 auto; margin-left: 10px; }
.fm-fit-btn  { padding: 14px 14px; font-size: 18px; }


/* =========================================================
   [MAP] マップ表示領域
   - 背景色   : --fm-map-bg
   - グラデ   : --fm-map-grad-1 / --fm-map-grad-2
   - 背景画像 : 下の background-image コメントを参照
   ========================================================= */
.fm-stage {
  position: relative;
  z-index: 10;
  height: calc(100vh - var(--fm-topbar-h));
  height: calc(100dvh - var(--fm-topbar-h));
  overflow: hidden;

  /* ↓ 背景をカスタマイズする場合はここを編集 */
  background:
    radial-gradient(1200px 600px at 70% 10%, var(--fm-map-grad-1), transparent 60%),
    radial-gradient(800px  500px at 10% 70%, var(--fm-map-grad-2), transparent 60%),
    var(--fm-map-bg);
  /* 背景画像を使う場合は以下のコメントを外して画像URLを指定:
  background-image: url('/uploads/settings/bg.jpg');
  background-size: cover;
  background-position: center; */

  /* タッチ操作: ネイティブTouchEventsで制御するためブラウザジェスチャーを抑止 */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
.fm-map-layer {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.fm-map-frame {
  position: relative;
  width: 1px; height: 1px;
}
.fm-map-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  max-width: none; max-height: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.fm-pins-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}


/* =========================================================
   [MAP UI] ズームボタン
   - 背景   : --fm-zoom-bg
   - 枠線   : --fm-zoom-border
   ========================================================= */
.fm-zoom-ui {
  position: absolute;
  z-index: 22;
  right: 10px;
  top: calc(var(--fm-topbar-h) + 18px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fm-zoom-btn {
  width: 54px; height: 54px;
  border-radius: 16px;
  border: 1px solid var(--fm-zoom-border);
  background: var(--fm-zoom-bg);
  color: rgba(255,255,255,.92);
  font-size: 22px; font-weight: 900;
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
}
.fm-zoom-label {
  width: 54px; height: 54px;
  border-radius: 16px;
  border: 1px solid var(--fm-zoom-border);
  background: rgba(10,14,24,.55);
  color: rgba(255,255,255,.92);
  font-size: 14px; font-weight: 900;
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
}


/* =========================================================
   [PIN] マップ上のピン
   ========================================================= */
.fm-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  background: transparent;
  border: none;
  box-shadow: none;
  display: grid;
  place-items: center;
  z-index: 20;
}
.fm-pin.is-selected { z-index: 60; }

.fm-pin-icon-wrap {
  display: grid;
  place-items: center;
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  transition: transform 120ms ease;
}
/* 通常: 白背景 + グレー枠 */
.fm-pin-bg-normal {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  transform: scale(1.0);
}
/* 選択中: 黄色背景 + 拡大 */
.fm-pin-bg-active {
  background: #facc15;
  border: 1.5px solid #eab308;
  transform: scale(1.12);
}


/* =========================================================
   [BUBBLE] 吹き出し（ピン選択時）
   - 背景色 : .fm-bubble の background
   - 枠線色 : .fm-bubble の border + .fm-bubble-tail-border の border-top
   ========================================================= */
.fm-bubble-wrap {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  pointer-events: none;
  z-index: 50;
}
.fm-bubble {
  position: relative;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 10px 12px 8px;
  max-width: 192px;
  min-width: 80px;
  box-sizing: border-box;
}
.fm-bubble.has-thumb { width: 192px; }
.fm-bubble-thumb { margin-bottom: 8px; }
.fm-bubble-thumb img {
  display: block; width: 100%; height: auto;
  border-radius: 8px;
}
.fm-bubble-title {
  font-size: 13px; font-weight: 900;
  color: #0f172a;
  line-height: 1.3;
  text-align: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.fm-bubble-tail-border {
  position: absolute;
  bottom: -9px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left:  9px solid transparent;
  border-right: 9px solid transparent;
  border-top:   9px solid #cbd5e1;
}
.fm-bubble-tail-inner {
  position: absolute;
  bottom: -7px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left:  7px solid transparent;
  border-right: 7px solid transparent;
  border-top:   7px solid #ffffff;
}


/* =========================================================
   [SHEET] 検索パネル（下から引き上げるやつ）
   - 背景/透明度 : --fm-sheet-bg
   - 枠線        : --fm-border
   - 影          : --fm-shadow
   ========================================================= */
.fm-sheet {
  position: absolute;
  top: 0;
  z-index: 25;
  left: 0; right: 0; bottom: 0;
  height: auto;
  max-height: 100dvh;
  background: var(--fm-sheet-bg);
  border-top-left-radius: var(--fm-radius);
  border-top-right-radius: var(--fm-radius);
  box-shadow: var(--fm-shadow);
  border: 1px solid var(--fm-border);
  overflow: hidden;
  transform: translateY(calc(100% - var(--fm-sheet-peek)));
  will-change: transform;
}

/* ---- 引き上げバー ---- */
.fm-sheet-handle {
  height: var(--fm-sheet-peek);
  display: flex;
  align-items: center;
  padding: 10px 12px;
  box-sizing: border-box;
  gap: 10px;
  background: var(--fm-sheet-bg-2);          /* ハンドル背景: --fm-sheet-bg-2 で調整 */
  border-bottom: 1px solid var(--fm-border);
  touch-action: none;
  position: relative;
}
.fm-handle-grip {
  width: 36px; height: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  position: absolute;
  left: 50%; top: 10px;
  transform: translateX(-50%);
}
.fm-sheet-handle-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}

/* ---- ハンドル内ボタン共通（ホーム・リロード） ---- */
.fm-home-btn,
.fm-reload-btn {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.06);               /* ボタン背景 */
  border: 1px solid rgba(0,0,0,.08);         /* ボタン枠線 */
  color: rgba(0,0,0,.75);                    /* アイコン色 */
  flex: 0 0 auto;
  text-decoration: none;
  line-height: 1;
  box-sizing: border-box;
}
.fm-home-btn:active,
.fm-reload-btn:active { background: rgba(0,0,0,.12); }

/* ---- サイトタイトル（ハンドル内・完全センター基準） ---- */
.fm-sheet-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  max-width: calc(100% - 140px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
  font-size: 20px;
  color: var(--fm-text);
  line-height: 1.2;
}
/* タイトルが溢れる場合: ホームボタン右から左揃え */
.fm-sheet-title.is-overflow {
  position: static;
  left: auto;
  transform: none;
  text-align: left;
  flex: 1 1 auto;
  max-width: none;
}

/* ---- 右端ボタン群（ソート・リロード等） ---- */
.fm-sheet-handle-actions-right {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}
.fm-sort-btn,
.fm-share-btn {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.80);
  font-weight: 900; font-size: 16px;
  line-height: 1;
}
.fm-sort-btn:active,
.fm-share-btn:active { transform: scale(.98); }

/* ---- パネル本体 ---- */
.fm-sheet-body {
  height: calc(100% - var(--fm-sheet-peek));
  overflow: auto;
  display: flex;
  flex-direction: column;
}


/* =========================================================
   [SEARCH] 検索フィルタ・入力
   ========================================================= */
.fm-filters { padding: 10px 10px 0; }


/* =========================================================
   [LIST] 検索結果リスト
   ========================================================= */
.fm-results {
  flex: 0 0 auto;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  padding: 8px 8px 14px;
  touch-action: pan-y;
}

/* リストバー（件数・共有・ソートが並ぶ行） */
.fm-listbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 6px;
  margin: 0 6px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.fm-listbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.fm-listbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.fm-count {
  font-size: 14px; font-weight: 900;
  color: rgba(0,0,0,.65);
  white-space: nowrap;
}
.fm-share-icon-btn {
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.05);
  display: grid;
  place-items: center;
  font-size: 18px; font-weight: 900;
  color: rgba(0,0,0,.80);
}


/* =========================================================
   [DETAIL] 詳細モーダル
   - 背景          : --fm-modal-bg
   - 枠線          : --fm-modal-border
   - 影            : --fm-modal-shadow
   - オーバーレイ  : --fm-overlay-bg
   ========================================================= */
.fm-modal-backdrop {
  position: absolute;
  z-index: 30;
  inset: 0;
  background: var(--fm-overlay-bg);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}
.fm-modal {
  width: min(520px, 96vw);
  height: 90vh;
  height: 90dvh;
  background: var(--fm-modal-bg);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--fm-modal-shadow);
  border: 1px solid var(--fm-modal-border);
  display: flex;
  flex-direction: column;
  will-change: transform;
}
/* ミニマップ（詳細上部） */
.fm-modal-map {
  height: 25%;
  background: var(--fm-map-bg);              /* ミニマップ背景: --fm-map-bg で調整 */
  position: relative;
  overflow: hidden;
  touch-action: none;
}
.fm-modal-body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 16px;
}
.fm-modal-title {
  font-weight: 900; font-size: 20px;
  color: var(--fm-text);
}
.fm-modal-close {
  border: 0;
  border-top: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.06);              /* 閉じるボタン背景 */
  padding: 14px 12px;
  font-size: 18px; font-weight: 900;
  width: 100%;
  color: rgba(0,0,0,.82);
}

/* 詳細内テキスト */
.fm-detail-tags    { margin-top: 6px;  font-size: 14px; color: rgba(0,0,0,.70); font-weight: 900; }
.fm-detail-memo    { margin-top: 10px; font-size: 16px; color: rgba(0,0,0,.80); font-weight: 800; white-space: pre-wrap; word-break: break-word; }
.fm-detail-updated { margin-top: 10px; text-align: right; font-size: 14px; color: rgba(0,0,0,.55); font-weight: 900; }
.fm-detail-header  { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fm-detail-kv {
  margin-top: 10px;
  border-top: 1px solid rgba(0,0,0,.10);
  padding-top: 10px;
  display: grid;
  gap: 10px;
  font-size: 16px;
}
.fm-detail-kv .k { color: rgba(0,0,0,.55); font-size: 14px; font-weight: 900; margin-bottom: 2px; }
.fm-detail-kv .v { color: rgba(0,0,0,.82); font-weight: 800; white-space: pre-wrap; word-break: break-word; }

/* スライドアニメーション（上から降りてくる） */
.fm-modal.fm-modal-enter {
  transform: translateY(0);
  transition: transform 500ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.fm-modal.fm-modal-leave {
  transform: translateY(-110%);
  transition: transform 500ms cubic-bezier(0.4, 0.0, 0.6, 1);
}


/* =========================================================
   [SHARE] 共有ダイアログ
   - オーバーレイ   : --fm-overlay-bg
   - ダイアログ背景 : --fm-modal-bg
   ========================================================= */
#fm-share-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--fm-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}
#fm-share-dialog {
  width: min(520px, 96vw);
  background: var(--fm-modal-bg);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
  padding: 14px;
}
#fm-share-title {
  font-weight: 900; font-size: 18px;
  margin-bottom: 10px;
}
#fm-share-url {
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 10px 12px;
  font-size: 14px;
  color: rgba(0,0,0,.85);
  box-sizing: border-box;
  background: rgba(255,255,255,.96);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#fm-share-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}
.fm-share-act {
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 10px 28px;
  font-size: 14px; font-weight: 900;
  margin-top: 10px;
}

/* コピーボタン（SVGアイコン） */
.fm-share-copy-icon-btn {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.75);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.fm-share-copy-icon-btn:active { background: rgba(0,0,0,.12); }
.fm-share-dialog-actions .fm-share-copy-icon-btn { height: 44px; }

.fm-share-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.06);
  font-size: 18px; font-weight: 900;
  display: grid;
  place-items: center;
}


/* =========================================================
   [DEBUG] デバッグバッジ（開発用）
   ========================================================= */
.fm-debug {
  position: absolute;
  z-index: 40;
  left: 10px;
  top: calc(var(--fm-topbar-h) + 10px);
  padding: 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  line-height: 1.35;
  max-width: calc(100vw - 20px);
  word-break: break-word;
  white-space: pre-wrap;
}


/* =========================================================
   [EASTER EGG] made in Hary
   ========================================================= */
.fm-easter {
  font-size: 13px; font-weight: 900;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,.40);
  animation: fm-easter-in 0.4s ease-out;
}
@keyframes fm-easter-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}