/* ═══════════════════════════════════════════════════════════════════════
   location-experience.css — styling for the Tapestry dual-view Location
   experience: a branded MapLibre map ⇄ the VVScene 360° pano.

   Owns ONLY this page's dual-view chrome:
     · the two pane hosts (primary fills the stage, PiP in the corner)
     · the PiP frame (glass border, soft shadow, expand affordance, label)
     · the Map / 360 toggle pill
     · branded MapLibre markers (POI pins + project home) + popups
     · the branded map fallback placeholder

   Themed entirely through the [data-project="tapestry"] tokens already in
   play (tapestry-brand.css + tapestry.css): Pale Stone --proj-accent on the
   Emerald --proj-deep, the --glass-* recipe, brand fonts. No new brand hue is
   hardcoded except where a literal is needed for a MapLibre-injected element.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Pane hosts ──────────────────────────────────────────────────────────
   #primaryHost fills the stage (z below the scrim/chrome). #pipHost is the
   corner frame's content well. Both #map and #pano are absolutely-filled
   children of whichever host currently owns them, so re-parenting on swap is
   seamless — each pane always fills its host. */
#primaryHost {
  position: absolute; inset: 0; z-index: 0;
  background: var(--proj-deep, #163029);
  overflow: hidden;
}
#map, #pano {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* The VVScene host normally carries page CSS; here it just fills its host. */

/* ── PiP frame ───────────────────────────────────────────────────────────
   ~280×190, bottom-left, rounded, glass border, soft shadow. Sits above the
   stage scrim but below the topbar. Clicking it swaps it to primary. */
#pip {
  position: absolute;
  left: var(--glass-offset, 40px);
  bottom: calc(var(--glass-offset, 40px) + env(safe-area-inset-bottom, 0px));
  z-index: 22;
  width: 280px; height: 190px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: var(--proj-deep, #163029);
  border: 1px solid var(--glass-hair, rgba(232, 229, 222, .3));
  box-shadow:
    0 18px 50px rgba(10, 22, 18, .5),
    0 2px 8px rgba(10, 22, 18, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .04);
  transition: transform .28s var(--ease-out, cubic-bezier(.22,.61,.36,1)),
              box-shadow .28s var(--ease-out, cubic-bezier(.22,.61,.36,1)),
              border-color .2s;
  will-change: transform;
}
#pipHost { position: absolute; inset: 0; }   /* the PiP's content well */

#pip:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow:
    0 26px 64px rgba(10, 22, 18, .58),
    0 4px 12px rgba(10, 22, 18, .4);
  border-color: var(--proj-accent, #e8e5de);
}

/* The PiP is non-interactive-pass-through for its inner pane EXCEPT the
   expand control + (when the map is inside) the markers. We keep the inner
   pane interactive but rely on the frame's click handler for "expand". To
   stop a stray pano-drag from hijacking the swap, dim pointer capture on the
   pano while it's the PiP via a thin scrim that still lets the click bubble. */
#pip .pip-veil {
  position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(180deg, rgba(13,26,22,0) 55%, rgba(13,26,22,.45) 100%);
  pointer-events: none;
}

/* PiP corner label — what clicking the PiP opens ("360° View" / "Map"). */
.pip__label {
  position: absolute; left: 12px; bottom: 10px; z-index: 8;
  font-family: var(--font-project, sans-serif);
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #fafaf8; text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
  pointer-events: none;
}

/* Expand affordance — top-right of the PiP. A glass disc with the same
   diagonal-arrows glyph the VVScene popup uses, for a consistent visual. */
.pip__expand {
  position: absolute; top: 10px; right: 10px; z-index: 8;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(232, 229, 222, .18);
  border: 1px solid rgba(232, 229, 222, .45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--proj-accent, #e8e5de);
  pointer-events: none;   /* the whole frame handles the click */
  transition: background .18s, transform .18s;
}
.pip__expand svg { width: 15px; height: 15px; }
#pip:hover .pip__expand { background: rgba(232, 229, 222, .32); transform: scale(1.08); }

/* ── Swap transition ─────────────────────────────────────────────────────
   On swap, both hosts briefly fade so the re-parent isn't a hard cut. */
.stage.is-swapping #primaryHost,
.stage.is-swapping #pip { transition: opacity .22s var(--ease-out, ease); }
.stage.is-swapping #primaryHost { opacity: .55; }
.stage.is-swapping #pip { opacity: .35; }

/* ── Map / 360 toggle pill ───────────────────────────────────────────────
   Bottom-centre glass pill, mirrors the .vv-panhint / cta language. Shows
   what tapping will switch TO. */
.view-toggle {
  position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 23;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 13px; border-radius: 22px;
  background: var(--glass-deep, rgba(22, 48, 41, .42));
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--glass-hair, rgba(232, 229, 222, .22));
  box-shadow: var(--glass-shadow, 0 18px 50px rgba(10, 22, 18, .4));
  color: var(--proj-on-deep, #ebe2d6);
  font-family: var(--font-project, sans-serif);
  font-size: 10.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .12s;
}
.view-toggle:hover { background: var(--proj-accent-bg, rgba(232,229,222,.12)); border-color: var(--proj-accent, #e8e5de); }
.view-toggle:active { transform: translateX(-50%) translateY(1px); }
.view-toggle__icon { width: 16px; height: 16px; display: block; flex: none; color: var(--proj-accent, #e8e5de); }
.view-toggle__label { white-space: nowrap; }

/* ── Caption chip (carried over from the original page) ──────────────────
   Bottom-LEFT is taken by the PiP, so the caption moves to bottom-RIGHT here
   to avoid a collision while staying in the original glass language. */
.location-caption {
  position: absolute;
  bottom: calc(var(--glass-offset, 48px) + env(safe-area-inset-bottom, 0px));
  right: var(--glass-offset, 40px);
  left: auto;
  z-index: 20;
  max-width: 320px;
  padding: 18px 22px 16px;
  border-radius: var(--radius-lg, 14px);
}
.location-caption__label {
  font: 500 10px/1 var(--font-project, sans-serif);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--proj-accent, #e8dcc8); opacity: .82; margin-bottom: 8px;
}
.location-caption__title {
  font: italic 24px/1.15 var(--font-project-display, serif);
  color: #fafaf8; margin: 0 0 6px;
}
.location-caption__body {
  font: 400 12px/1.6 var(--font-project, sans-serif);
  color: rgba(250, 250, 248, .72); margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   BRANDED MAPLIBRE MARKERS
   These elements are created in JS and handed to maplibregl.Marker, which
   wraps them in its own positioned div. We style our inner element only.
   ═══════════════════════════════════════════════════════════════════════ */

/* POI pin — teardrop in emerald, pale-stone dot, label above. */
.map-poi {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer;
  font-family: var(--font-project, sans-serif);
  -webkit-user-select: none; user-select: none;
  transition: transform .18s var(--ease-out, ease);
}
.map-poi__label {
  font-size: 9.5px; font-weight: 600; line-height: 1;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--proj-deep, #163029);
  background: rgba(232, 229, 222, .9);
  padding: 3px 7px; border-radius: 10px;
  border: 1px solid rgba(22, 48, 41, .14);
  white-space: nowrap; text-align: center;
  box-shadow: 0 2px 8px rgba(10, 22, 18, .22);
  transition: background .18s, color .18s, box-shadow .18s;
}
.map-poi__label small {
  display: block; font-weight: 400; font-size: 8.5px;
  opacity: .72; margin-top: 1px; letter-spacing: .04em;
}
.map-poi__pin { display: block; line-height: 0; filter: drop-shadow(0 3px 6px rgba(10, 22, 18, .4)); }
.map-poi__teardrop {
  fill: var(--proj-deep, #163029);
  stroke: var(--proj-accent, #e8e5de); stroke-width: 1.4;
  transition: fill .18s, stroke-width .18s;
}
.map-poi__dot { fill: var(--proj-accent, #e8e5de); transition: fill .18s, r .18s; }

.map-poi:hover { transform: translateY(-2px); }
.map-poi:hover .map-poi__teardrop { fill: #1f3d34; }

/* cross-highlight active state (driven from the 360 via highlightMapPin):
   the pin scales + the dot glows + the label inverts to emerald. */
.map-poi.is-active { transform: translateY(-3px) scale(1.18); z-index: 5; }
.map-poi.is-active .map-poi__teardrop { fill: #1f3d34; stroke-width: 2.2; }
.map-poi.is-active .map-poi__dot { fill: #fafaf8; r: 5; }
.map-poi.is-active .map-poi__label {
  background: var(--proj-deep, #163029); color: var(--proj-accent, #e8e5de);
  box-shadow: 0 4px 14px rgba(10, 22, 18, .45);
}
/* a soft pulse ring on the active pin */
.map-poi.is-active .map-poi__pin::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 30px; height: 30px; margin-left: -15px; border-radius: 50%;
  border: 2px solid var(--proj-accent, #e8e5de);
  animation: map-poi-pulse 1.3s ease-out infinite;
  pointer-events: none;
}
.map-poi__pin { position: relative; }
@keyframes map-poi-pulse {
  0%   { transform: scale(.5); opacity: .85; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Project "home" marker — a quiet ringed dot with a label. */
.map-home {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none; font-family: var(--font-project, sans-serif);
}
.map-home__ring {
  position: absolute; top: -2px; left: 50%; width: 26px; height: 26px;
  margin-left: -13px; border-radius: 50%;
  border: 1.5px solid var(--proj-accent, #e8e5de); opacity: .55;
  animation: map-home-breathe 2.6s ease-in-out infinite;
}
.map-home__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--proj-accent, #e8e5de);
  border: 2.5px solid var(--proj-deep, #163029);
  box-shadow: 0 2px 8px rgba(10, 22, 18, .5);
}
.map-home__label {
  font: italic 13px/1 var(--font-project-display, serif);
  color: #fafaf8;
  background: var(--proj-deep, #163029);
  padding: 3px 9px; border-radius: 10px;
  border: 1px solid var(--proj-accent, #e8e5de);
  white-space: nowrap; box-shadow: 0 3px 10px rgba(10, 22, 18, .4);
}
@keyframes map-home-breathe {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.25); opacity: .15; }
}

/* ── MapLibre control re-skin ────────────────────────────────────────────
   Theme the attribution + any controls to the glass language. We KEEP the
   attribution content (legal) — just restyle the chrome. */
.maplibregl-ctrl-attrib,
.mapboxgl-ctrl-attrib {
  background: rgba(22, 48, 41, .55) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 8px 0 0 0;
}
.maplibregl-ctrl-attrib a,
.maplibregl-ctrl-attrib { color: rgba(235, 226, 214, .8) !important; font-family: var(--font-project, sans-serif); }
.maplibregl-ctrl-attrib-button { filter: invert(1) opacity(.6); }
.maplibregl-ctrl-group {
  background: rgba(22, 48, 41, .55) !important;
  border: 1px solid var(--glass-hair, rgba(232, 229, 222, .22)) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.maplibregl-ctrl-group button { filter: invert(1) opacity(.75); }
.maplibregl-ctrl-group button:hover { filter: invert(1) opacity(1); }

/* When the map is the PiP, hide its attribution to keep the small frame
   clean (the full attribution shows again the moment it's primary). */
#map.is-pip .maplibregl-ctrl-bottom-right,
#map.is-pip .maplibregl-ctrl-bottom-left { display: none; }
/* Suppress map marker labels in the tiny PiP so it reads as a clean thumbnail. */
#map.is-pip .map-poi__label,
#map.is-pip .map-home__label { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   BRANDED MAP FALLBACK
   Shown if MapLibre / tiles fail. Uses the static location-map.jpg already
   shipped in assets/location/ behind an emerald wash + a note. The 360 is
   unaffected — it still fully works.
   ═══════════════════════════════════════════════════════════════════════ */
#map.is-failed { background: var(--proj-deep, #163029); }
.map-fallback { position: absolute; inset: 0; overflow: hidden; }
.map-fallback__art {
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg, rgba(22, 48, 41, .42), rgba(13, 26, 22, .82)),
    url('assets/location/location-map.jpg') center/cover no-repeat;
  filter: saturate(.6) brightness(.9) sepia(.12) hue-rotate(70deg);
}
.map-fallback__note {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px 26px;
  background: linear-gradient(0deg, rgba(13, 26, 22, .78), transparent);
}
.map-fallback__eyebrow {
  font: 500 10px/1 var(--font-project, sans-serif);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--proj-accent, #e8e5de); opacity: .85;
}
.map-fallback__title { font: italic 22px/1.2 var(--font-project-display, serif); color: #fafaf8; }
.map-fallback__body { font: 400 12px/1.5 var(--font-project, sans-serif); color: rgba(250, 250, 248, .72); }

/* ── Responsive ──────────────────────────────────────────────────────────
   Shrink the PiP + move the caption above it on narrow screens; keep the
   toggle reachable. */
@media (max-width: 720px) {
  #pip { width: 200px; height: 138px; left: 18px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .location-caption { right: 18px; left: 18px; max-width: none; bottom: calc(232px + env(safe-area-inset-bottom, 0px)); }
  .view-toggle { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .map-poi__label { font-size: 9px; }
}

/* Reduced motion: stop the home breathe + pin pulse + PiP hover lift. */
@media (prefers-reduced-motion: reduce) {
  .map-home__ring,
  .map-poi.is-active .map-poi__pin::after { animation: none; }
  #pip, #pip:hover { transform: none; }
}