/* ============================================================================
   search-loader.css — MelodyMap search "Searching..." loading states.

   The "Map-radar scan over pin" loader (a sonar/radar sweep rotating over the
   brand map-pin), in two presentations:
     - .mm-search-toast    : a small fixed corner toast (non-blocking)
     - .mm-search-overlay  : a full-page overlay that dims + locks the view

   Adapted to the live site from the 2026-06-19 Claude Design handoff
   ("Loading States" / loaders.jsx, loader #8 "Radar sweep over pin"). Driven by
   apps/js/search/search-loader.js (window.MmSearchLoader). Pin reuses the
   canonical /files/mm-pin.svg used on search-result address cards.

   The loaders are DECORATIVE (the page's #status aria-live region carries the
   screen-reader announcement), so motion here is safe to suppress for
   prefers-reduced-motion users.
   ============================================================================ */

/* Loader-local tokens (mirror the handoff palette; navy/coral brand family). */
.mm-radar,
.mm-search-toast,
.mm-search-overlay {
  --mm-loader-coral: #f06848;
  --mm-loader-navy: #2a4a7b;
  --mm-loader-ink-mute: #7a8ca8;
}

/* ---- radar core ---------------------------------------------------------- */
.mm-radar {
  width: 110px;
  height: 110px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* faint dish glow under the sweep */
  background: radial-gradient(circle at center,
      rgba(42, 74, 123, 0.06) 0%,
      rgba(42, 74, 123, 0.02) 60%,
      rgba(42, 74, 123, 0) 100%);
}

/* concentric grid rings */
.mm-radar__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(42, 74, 123, 0.14);
}
.mm-radar__ring--1 { inset: 8px; }
.mm-radar__ring--2 { inset: 24px; }
.mm-radar__ring--3 { inset: 40px; }

/* rotating coral sweep wedge, masked to a ring so the centre pin shows through */
.mm-radar__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      rgba(240, 104, 72, 0) 0deg,
      rgba(240, 104, 72, 0) 260deg,
      rgba(240, 104, 72, 0.55) 340deg,
      rgba(240, 104, 72, 0.9) 358deg,
      rgba(240, 104, 72, 0) 360deg);
  -webkit-mask: radial-gradient(circle at center, #000 55%, transparent 55%);
  mask: radial-gradient(circle at center, #000 55%, transparent 55%);
  animation: mm-radar-sweep 1.8s linear infinite;
}

/* brand pin, gently bobbing in the centre. object-fit:contain keeps the
   taller-than-wide /files/mm-pin.svg from squishing inside the square box. */
.mm-radar__pin {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  object-fit: contain;
  animation: mm-pin-bob 2.4s ease-in-out infinite;
}

@keyframes mm-radar-sweep {
  to { transform: rotate(360deg); }
}
@keyframes mm-pin-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* smaller radar variant for the toast presentation */
.mm-radar--sm { width: 84px; height: 84px; }
.mm-radar--sm .mm-radar__ring--1 { inset: 6px; }
.mm-radar--sm .mm-radar__ring--2 { inset: 18px; }
.mm-radar--sm .mm-radar__ring--3 { inset: 30px; }
.mm-radar--sm .mm-radar__pin { width: 26px; height: 26px; }

/* ---- shared text stack --------------------------------------------------- */
.mm-loader__stack { display: flex; flex-direction: column; }
.mm-loader__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--mm-loader-navy);
  letter-spacing: -0.005em;
}
.mm-loader__sub {
  margin-top: 2px;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--mm-loader-ink-mute);
  letter-spacing: 0.02em;
}

/* ---- toast presentation (non-blocking corner) ---------------------------- */
.mm-search-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 240px;
  padding: 14px 18px 14px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(20, 34, 60, 0.06),
    0 10px 30px rgba(20, 34, 60, 0.12),
    inset 0 0 0 1px rgba(42, 74, 123, 0.08);
  /* respect the iOS home-indicator / notch when pinned to a corner */
  margin-bottom: env(safe-area-inset-bottom, 0px);
  animation: mm-loader-pop 0.18s ease-out;
}
@keyframes mm-loader-pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- full-page overlay presentation (blocking) --------------------------- */
.mm-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(42, 74, 123, 0.55);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  animation: mm-loader-fade 0.18s ease-out;
}
@keyframes mm-loader-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mm-search-overlay__card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 280px;
  max-width: calc(100vw - 48px);
  padding: 24px 28px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(10, 20, 40, 0.30);
}
.mm-search-overlay__card .mm-loader__title { font-size: 16px; }
.mm-search-overlay__card .mm-loader__sub { font-size: 13px; }

/* ---- accessibility: reduced motion --------------------------------------- */
/* Stop the spin/bob and the entrance animations; keep a static sweep visible so
   the dish doesn't read as empty. The #status aria-live text still announces the
   search to assistive tech, so no information is lost. */
@media (prefers-reduced-motion: reduce) {
  .mm-radar__sweep { animation: none; opacity: 0.5; }
  .mm-radar__pin { animation: none; }
  .mm-search-toast,
  .mm-search-overlay { animation: none; }
}