/* Build 739: give the first-memory welcome the same airy ocean canvas as
   Welcome Back while keeping its existing primary action treatment. */
html body .app-shell .map-stage.home-focus.has-empty-home,
html body main.app-shell section.map-stage.home-focus.has-empty-home {
  background:
    radial-gradient(circle at 14% 8%, rgba(52, 145, 181, 0.16) 0%, rgba(52, 145, 181, 0) 36%),
    radial-gradient(circle at 88% 86%, rgba(63, 187, 151, 0.12) 0%, rgba(63, 187, 151, 0) 40%),
    radial-gradient(circle at 50% 110%, rgba(221, 185, 118, 0.1) 0%, rgba(221, 185, 118, 0) 42%),
    linear-gradient(145deg, #edf5f6 0%, #fbfbf7 52%, #f4f3ec 100%) !important;
}

html body .app-shell .map-stage.home-focus.has-empty-home::before,
html body main.app-shell section.map-stage.home-focus.has-empty-home::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(37, 139, 177, 0.08), transparent 31%),
    radial-gradient(circle at 84% 72%, rgba(35, 166, 132, 0.07), transparent 34%),
    repeating-linear-gradient(118deg, transparent 0 76px, rgba(8, 65, 91, 0.022) 76px 77px) !important;
  opacity: 0.82 !important;
}

/* The first-use page owns one quiet journey signature. Legacy map pins and
   ambient map ornaments never peek around the edge of the welcome card. */
html body .app-shell .map-stage.home-focus.has-empty-home :is(
  #map,
  .map-backdrop,
  .map-life-layer,
  .home-background,
  .home-memory-pin,
  .pin-network,
  .memory-marker,
  .leaflet-marker-pane,
  .maplibregl-marker
),
html body main.app-shell section.map-stage.home-focus.has-empty-home :is(
  #map,
  .map-backdrop,
  .map-life-layer,
  .home-background,
  .home-memory-pin,
  .pin-network,
  .memory-marker,
  .leaflet-marker-pane,
  .maplibregl-marker
) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
}

html body .app-shell .map-stage.home-focus.has-empty-home #homeStarter.home-starter-section,
html body main.app-shell section.map-stage.home-focus.has-empty-home #homeStarter.home-starter-section {
  border-color: rgba(50, 139, 164, 0.15) !important;
  background:
    radial-gradient(circle at 14% 4%, rgba(52, 145, 181, 0.13), transparent 34%),
    radial-gradient(circle at 88% 96%, rgba(63, 187, 151, 0.1), transparent 38%),
    linear-gradient(145deg, rgba(248, 253, 253, 0.98), rgba(241, 249, 246, 0.97)) !important;
  box-shadow:
    0 30px 72px rgba(2, 47, 68, 0.12),
    0 8px 22px rgba(28, 111, 133, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

html body .app-shell .map-stage.home-focus.has-empty-home #homeStarter :is(.home-starter-visual, .home-starter-copy),
html body main.app-shell section.map-stage.home-focus.has-empty-home #homeStarter :is(.home-starter-visual, .home-starter-copy) {
  position: relative !important;
  z-index: 1 !important;
}

html body .app-shell .map-stage.home-focus.has-empty-home #homeStarter.home-starter-section::before {
  width: min(188px, 42%) !important;
  background: linear-gradient(112deg, #00243f 0%, #075965 54%, #0b806e 100%) !important;
  box-shadow: 0 4px 14px rgba(4, 52, 74, 0.13) !important;
}

html body .app-shell .map-stage.home-focus.has-empty-home #homeStarter .home-starter-visual {
  z-index: 1 !important;
  border-color: rgba(66, 153, 179, 0.17) !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(145deg, #f5fcff 0%, #d7eef4 52%, #d8f2e9 100%) !important;
  box-shadow:
    0 15px 34px rgba(34, 119, 143, 0.11),
    0 0 0 8px rgba(225, 246, 247, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

html body .app-shell .map-stage.home-focus.has-empty-home #homeStarter .home-starter-visual::after {
  inset: -28px !important;
  border: 0 !important;
  background: radial-gradient(circle, rgba(43, 151, 181, 0.2) 0%, rgba(57, 183, 147, 0.12) 38%, transparent 72%) !important;
  filter: blur(3px) !important;
  opacity: 0.88 !important;
}

html body .app-shell .map-stage.home-focus.has-empty-home #homeStarter .home-starter-visual img {
  position: relative !important;
  z-index: 2 !important;
  filter: drop-shadow(0 13px 17px rgba(14, 72, 90, 0.16)) !important;
}

html body .app-shell .map-stage.home-focus.has-empty-home #homeStarter .home-starter-eyebrow {
  padding: 6px 10px !important;
  border: 1px solid rgba(34, 143, 151, 0.11) !important;
  border-radius: 999px !important;
  color: #0b7180 !important;
  background: linear-gradient(90deg, rgba(73, 174, 203, 0.08), rgba(64, 180, 139, 0.08)) !important;
}

html body .app-shell .map-stage.home-focus.has-empty-home #homeStarter h2 {
  color: #0b4254 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

/* Match Welcome Back's midnight-ocean action gradient. */
html body .app-shell .map-stage.home-focus.has-empty-home #homeStarter .home-starter-primary,
html body main.app-shell section.map-stage.home-focus.has-empty-home #homeStarter .home-starter-primary {
  position: relative !important;
  overflow: hidden !important;
  border-color: rgba(11, 114, 100, 0.42) !important;
  background: linear-gradient(112deg, #00243f 0%, #075965 54%, #0b806e 100%) !important;
  box-shadow:
    0 15px 30px rgba(4, 52, 74, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html body .app-shell .map-stage.home-focus.has-empty-home #homeStarter .home-starter-primary::before {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  right: 17% !important;
  left: 17% !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent) !important;
  pointer-events: none !important;
}

html body .app-shell .map-stage.home-focus.has-empty-home #homeStarter .home-starter-secondary {
  border-color: rgba(34, 126, 145, 0.09) !important;
  background: rgba(244, 251, 250, 0.68) !important;
}

html body .app-shell .map-stage.home-focus.has-empty-home #homeStarter .home-starter-assurance {
  padding: 7px 10px !important;
  border: 1px solid rgba(25, 115, 127, 0.075) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.5) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .map-stage.home-focus.has-empty-home #homeStarter .home-starter-visual::after {
    animation: none !important;
  }
}