/* ECHIVO — #map · "A map that looks back". OWNED BY: web agent 3. */

#map {
  padding: 0;
  background: var(--night);
  isolation: isolate;
}

/* ---------- Stage (pinned on desktop) ---------- */
#map .map-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
}

/* ---------- 3D scene ---------- */
#map .map-scene {
  position: absolute; inset: 0;
  perspective: 1100px;
  perspective-origin: 50% 18%;
  overflow: hidden;
  pointer-events: none;
}
#map .map-camera {
  position: absolute; left: 54%; top: 60%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -200px);
}
#map .map-plane {
  position: absolute; left: -1000px; top: -1000px;
  width: 2000px; height: 2000px;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-14deg);
}
#map .map-svg,
#map .map-route {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
}


#map .map-svg {
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}

/* Walking route (drawn with scroll) */
#map .map-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#map .map-route__glow { stroke: rgba(245, 200, 130, 0.28); stroke-width: 26; }
#map .map-route__line { stroke: var(--gold); stroke-width: 7; }

/* Extruded buildings (golden-hour: west faces catch the sun) */
#map .map-bld {
  position: absolute;
  width: var(--w); height: var(--l);
  margin: calc(var(--l) / -2) 0 0 calc(var(--w) / -2);
  transform-style: preserve-3d;
  transform: rotateZ(var(--a));
}
#map .map-bld i { position: absolute; display: block; backface-visibility: visible; }
#map .map-bld__t {
  inset: 0;
  transform: translateZ(var(--h));
  background: linear-gradient(135deg, #34426a, #232e4c);
  box-shadow: inset 0 0 0 1.5px rgba(245, 200, 130, 0.22);
}
#map .map-bld__s {
  left: 0; top: calc(var(--l) - var(--h));
  width: var(--w); height: var(--h);
  transform-origin: 50% 100%;
  transform: rotateX(-90deg);
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 196, 120, 0.28) 7px 11px, transparent 11px 16px),
    linear-gradient(180deg, #2a3555, #141b30);
}
#map .map-bld__w {
  left: calc(var(--h) * -1); top: 0;
  width: var(--h); height: var(--l);
  transform-origin: 100% 50%;
  transform: rotateY(90deg);
  background: linear-gradient(90deg, #c9965a, #7a5a3a 70%, #3b3242);
}
#map .map-bld__e {
  left: var(--w); top: 0;
  width: var(--h); height: var(--l);
  transform-origin: 0 50%;
  transform: rotateY(-90deg);
  background: linear-gradient(270deg, #1a2238, #0f1526);
}

/* You-are-here */
#map .map-me { position: absolute; width: 0; height: 0; }
#map .map-me__dot,
#map .map-me__pulse {
  position: absolute; border-radius: 50%;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
#map .map-me__dot {
  width: 34px; height: 34px;
  background: var(--sky);
  border: 6px solid #fff;
  box-shadow: 0 0 30px rgba(79, 179, 255, 0.8);
}
#map .map-me__pulse {
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(79, 179, 255, 0.45), rgba(79, 179, 255, 0) 70%);
  animation: map-pulse 2.4s var(--ease-out) infinite;
}

/* ---------- Photo pins ---------- */
#map .map-pin {
  --d: 132px;
  position: absolute; width: 0; height: 0;
  transform-style: preserve-3d;
}
#map .map-pin--hero { --d: 178px; }

/* ground decals (flat on the plane) */
#map .map-pin__halo,
#map .map-pin__shadow {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  pointer-events: none;
}
#map .map-pin__shadow {
  width: calc(var(--d) * 1.2); height: calc(var(--d) * 1.2);
  margin: calc(var(--d) * -0.6) 0 0 calc(var(--d) * -0.6);
  background: radial-gradient(circle, rgba(245, 200, 130, 0.55) 0%, rgba(245, 200, 130, 0.12) 35%, rgba(245, 200, 130, 0) 68%);
}
#map .map-pin__halo {
  width: calc(var(--d) * 1.5); height: calc(var(--d) * 1.5);
  margin: calc(var(--d) * -0.75) 0 0 calc(var(--d) * -0.75);
  border: 2px solid rgba(245, 200, 130, 0.6);
  background: radial-gradient(circle, rgba(245, 200, 130, 0) 55%, rgba(245, 200, 130, 0.16) 100%);
  opacity: 0;
  animation: map-halo 3.2s var(--ease-out) infinite;
}
#map .map-pin__halo--2 { animation-delay: 1.6s; }
#map .map-pin:nth-of-type(2n) .map-pin__halo { animation-duration: 3.8s; }

/* standing part: counter-rotated by JS so it faces the camera */
#map .map-pin__stand {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-origin: 0 0;
}
#map .map-pin__pop {
  position: absolute; bottom: 0; left: calc(var(--d) / -2);
  width: var(--d);
  display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 100%;
}
#map .map-pin__bubble {
  position: relative;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  padding: calc(var(--d) * 0.045);
  background: conic-gradient(from 210deg, #fff1d2, var(--gold) 20%, #a87a3c 45%, var(--gold) 70%, #fff1d2);
  box-shadow:
    0 0 0 3px rgba(5, 7, 13, 0.85),
    0 0 0 calc(var(--d) * 0.07) rgba(245, 200, 130, 0.18),
    0 0 60px rgba(245, 200, 130, 0.45),
    0 30px 40px -10px rgba(0, 0, 0, 0.7);
}
#map .map-pin__bubble img {
  width: 100%; height: 100%; max-width: none;
  border-radius: 50%;
  object-fit: cover;
  border: calc(var(--d) * 0.03) solid #0b1020;
}
#map .map-pin__badge {
  position: absolute; right: 2%; bottom: 2%;
  width: 30%; height: 30%;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #ffe2ae, var(--gold) 60%, var(--amber));
  border: 3px solid #0b1020;
  color: #2a1c08;
}
#map .map-pin__badge svg {
  width: 56%; height: 56%;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
#map .map-pin__tail {
  width: calc(var(--d) * 0.16); height: calc(var(--d) * 0.13);
  margin-top: -2px;
  background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#map .map-pin__pop::after { /* thin stem to the ground */
  content: "";
  width: 3px; height: calc(var(--d) * 0.28);
  background: linear-gradient(var(--gold), rgba(245, 200, 130, 0));
}

/* hero tag ("now playing") */
#map .map-pin__tag {
  position: absolute; bottom: calc(100% + 14px); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  white-space: nowrap;
  padding: 12px 20px 12px 16px;
  border-radius: 999px;
  font-size: 22px; font-weight: 700; letter-spacing: 0.01em;
  color: #fff;
  background: rgba(14, 19, 36, 0.86);
  border: 1px solid rgba(245, 200, 130, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#map .map-eq { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
#map .map-eq i {
  display: block; width: 4px; height: 100%;
  border-radius: 4px; background: var(--gold);
  transform-origin: 50% 50%;
  animation: map-eq 1s ease-in-out infinite;
}
#map .map-eq i:nth-child(2) { animation-delay: -.3s; }
#map .map-eq i:nth-child(3) { animation-delay: -.6s; }
#map .map-eq i:nth-child(4) { animation-delay: -.15s; }

/* ---------- Vignette / legibility ---------- */
#map .map-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--night) 0%, rgba(5, 7, 13, 0.85) 10%, rgba(5, 7, 13, 0) 38%),
    radial-gradient(60% 40% at 78% 14%, rgba(245, 200, 130, 0.16), rgba(245, 200, 130, 0) 70%),
    linear-gradient(0deg, var(--night) 0%, rgba(5, 7, 13, 0) 22%),
    linear-gradient(90deg, rgba(5, 7, 13, 0.85) 0%, rgba(5, 7, 13, 0) 40%),
    radial-gradient(120% 90% at 55% 60%, rgba(5, 7, 13, 0) 50%, rgba(5, 7, 13, 0.75) 100%);
}

/* ---------- Copy ---------- */
#map .map-copy {
  position: absolute; z-index: 3;
  left: var(--gutter); top: clamp(88px, 15vh, 150px);
  max-width: min(600px, 46vw);
}
#map .map-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; }
#map .map-eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(245, 200, 130, 0.18), 0 0 14px var(--gold);
}
#map .map-title { margin: 0; }
#map .map-title__line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
#map .map-title__line > span { display: inline-block; }
#map .map-title em { font-style: normal; }
#map .map-sub { margin: 22px 0 0; max-width: 34ch; font-size: clamp(1rem, 1.25vw, 1.2rem); }

#map .map-chips {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
#map .map-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  font-size: var(--t-small); font-weight: 650;
  color: var(--text);
  transition: transform .5s var(--ease-spring), border-color .3s, background .3s;
}
#map .map-chip:hover { transform: translateY(-2px); border-color: rgba(245, 200, 130, 0.5); }
#map .map-chip svg {
  width: 26px; height: 26px; padding: 4px;
  border-radius: 50%;
  background: rgba(245, 200, 130, 0.14);
  fill: none; stroke: var(--gold); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Device ---------- */
#map .map-device {
  position: absolute; z-index: 4;
  right: clamp(24px, 7vw, 130px); top: 50%;
  margin-top: calc(var(--phone-h) / -2);
  --phone-w: clamp(230px, min(20vw, 33vh), 320px);
  --phone-h: calc(var(--phone-w) * 2622 / 1206);
  perspective: 1400px;
}
#map .map-phone { --phone-w: inherit; }
#map .map-device .phone { width: var(--phone-w); }
#map .map-callout {
  position: absolute; z-index: 2;
  left: 0; top: 34%;
  transform: translateX(-72%);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 22px;
  white-space: nowrap;
}
#map .map-callout__icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: #1a1206;
  box-shadow: 0 6px 20px rgba(245, 200, 130, 0.45);
}
#map .map-callout__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#map .map-callout__text { display: flex; flex-direction: column; line-height: 1.2; }
#map .map-callout__text b { font-size: 0.95rem; font-weight: 750; }
#map .map-callout__text span { font-size: 0.8rem; color: var(--text-2); }

/* ---------- Keyframes ---------- */
@keyframes map-halo {
  0% { transform: scale(0.35); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes map-pulse {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes map-eq {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

/* ---------- Mobile: stacked, unpinned ---------- */
@media (max-width: 759px) {
  #map .map-stage {
    height: auto; min-height: 0;
    display: flex; flex-direction: column;
    padding: 96px 0 72px;
  }
  #map .map-copy {
    position: relative; left: auto; top: auto;
    max-width: none; padding: 0 var(--gutter);
    order: 1;
  }
  #map .map-scene {
    position: relative; inset: auto;
    order: 2;
    height: 72svh; min-height: 460px; max-height: 680px;
    margin-top: 0;
    perspective: 900px;
  }
  #map .map-camera { left: 50%; top: 56%; }
  #map .map-vignette {
    background:
      linear-gradient(180deg, var(--night) 0%, rgba(5, 7, 13, 0) 26%),
      linear-gradient(0deg, var(--night) 0%, rgba(5, 7, 13, 0) 24%),
      radial-gradient(120% 80% at 50% 55%, rgba(5, 7, 13, 0) 45%, rgba(5, 7, 13, 0.8) 100%);
  }
  #map .map-device {
    position: relative; right: auto; top: auto; margin: -90px auto 0;
    order: 3;
    --phone-w: min(68vw, 270px);
  }
  #map .map-callout { left: 50%; top: auto; bottom: -22px; transform: translateX(-50%); }
  #map .map-chips { gap: 6px; margin-top: 22px; }
  #map .map-chip { padding: 6px 11px 6px 6px; gap: 7px; font-size: 0.78rem; }
  #map .map-chip svg { width: 24px; height: 24px; }
  #map .map-pin { --d: 112px; }
  #map .map-pin--hero { --d: 148px; }
}

/* ---------- Low power (html.lp): fewer composited 3D layers, same scene ---------- */
#map .map-bld.is-culled { display: none; } /* set by map.js: never inside the phone viewport */
.lp #map .map-pin__halo--2 { display: none; }

@media (prefers-reduced-motion: reduce) {
  #map .map-pin__halo, #map .map-me__pulse, #map .map-eq i { animation: none; }
  #map .map-pin__halo { opacity: .5; transform: scale(.7); }
  #map .map-eq i { transform: scaleY(.7); }
}