/* ============================================================
   HELIOCASTLE — MOCKUP — map
   Used by a card with class "mock mock-map".
   ============================================================ */

/* ---------- mock: location-aware app ---------- */
.mock-map { background: radial-gradient(80% 70% at 55% 20%, #0d1014, #06070a 78%); }
.map-phone {
  position: absolute;
  top: 9%; left: 50%;
  transform: translateX(-50%);
  width: 41%; height: 88%;
  background: #17181c;
  border-radius: 22px;
  padding: 4%;
  box-shadow: 0 30px 60px rgb(var(--shadow-rgb) / calc(0.7 * var(--shadow-a))), inset 0 0 0 1px rgb(var(--ink-rgb) / 0.09);
}
.map-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 15px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgb(var(--ink-rgb) / .045) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(rgb(var(--ink-rgb) / .045) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(190deg, #10131a, #0a0c10);
}
.map-road {
  position: absolute;
  left: -10%; top: 46%;
  width: 130%; height: 7px;
  background: rgb(var(--ink-rgb) / 0.07);
  transform: rotate(-18deg);
}
.map-route {
  position: absolute;
  left: 18%; top: 30%;
  width: 46%; height: 34%;
  border-left: 2px dashed rgb(var(--accent-rgb) / 0.75);
  border-bottom: 2px dashed rgb(var(--accent-rgb) / 0.75);
  border-radius: 0 0 0 10px;
}
.map-pin {
  position: absolute;
  left: 58%; top: 24%;
  width: 16px; height: 16px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--gold);
  box-shadow: 0 0 16px rgb(var(--accent-rgb) / 0.7);
  animation: pin-drop 3.4s ease-in-out infinite;
}
@keyframes pin-drop {
  0%, 100% { transform: rotate(-45deg) translateY(0); }
  50% { transform: rotate(-45deg) translateY(-6px); }
}
.map-ping {
  position: absolute;
  left: 54%; top: 30%;
  width: 34px; height: 34px;
  border: 1px solid rgb(var(--accent-rgb) / 0.6);
  border-radius: 50%;
  animation: ping-out 3s ease-out infinite;
}
@keyframes ping-out {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- mock: embedded / electronics ---------- */