/* plan3d — interactive 3D master plan widget (all selectors scoped to .plan3d) */

/* zero-specificity defaults: the site's own rules always win */
:where(.plan3d) { position: relative; }
:where(.plan3d .plan3d__stage) { position: relative; width: 100%; aspect-ratio: 16 / 10; }
@media (max-width: 700px) {
  :where(.plan3d .plan3d__stage) { aspect-ratio: 4 / 5; }
}

.plan3d.is-3d .plan3d__fallback { display: none; }
/* WebGL unavailable / context lost: only the static fallback remains */
.plan3d:not(.is-3d) .plan3d__canvas,
.plan3d:not(.is-3d) .plan3d__labels,
.plan3d:not(.is-3d) .plan3d__tip { display: none; }

.plan3d .plan3d__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  cursor: grab;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity .9s ease;
}
.plan3d .plan3d__canvas.is-live { opacity: 1; }
.plan3d .plan3d__canvas.is-hover { cursor: pointer; }
.plan3d .plan3d__canvas.is-drag { cursor: grabbing; }

/* ── projected labels ── */
.plan3d .plan3d__labels {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.plan3d.is-labels .plan3d__labels { opacity: 1; }

.plan3d .plan3d__label {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  will-change: transform;
  transition: opacity .45s ease;
}
.plan3d .plan3d__label > .plan3d__label-pill { transform: translate(calc(-50% + var(--dx, 0px)), -50%); }
.plan3d .plan3d__label.is-off,
.plan3d .plan3d__label.is-out { opacity: 0; }

.plan3d .plan3d__label-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #F3F6FA;
  background: rgba(6, 16, 33, .74);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .55);
}

/* pin labels: pill + thin leader that ends exactly at the anchor point */
.plan3d .plan3d__label--pin {
  display: block;
}
.plan3d .plan3d__label--pin .plan3d__label-pill {
  position: absolute;
  left: 0;
  bottom: 26px;
  top: auto;
}
.plan3d .plan3d__label-stem {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 27px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(243, 246, 250, .8), rgba(243, 246, 250, .3));
}
.plan3d .plan3d__label-stem::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2.5px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #F3F6FA;
  box-shadow: 0 0 0 3px rgba(243, 246, 250, .14);
}
.plan3d .plan3d__label--pin .plan3d__label-pill { transform: translate(calc(-50% + var(--dx, 0px)), 0); }

.plan3d .plan3d__label--gate .plan3d__label-pill::before,
.plan3d .plan3d__label--phase .plan3d__label-pill::before,
.plan3d .plan3d__label--admin .plan3d__label-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #3D7BFF;
  box-shadow: 0 0 8px rgba(61, 123, 255, .85);
}
.plan3d .plan3d__label--gate .plan3d__label-stem::after,
.plan3d .plan3d__label--phase .plan3d__label-stem::after {
  background: #3D7BFF;
  box-shadow: 0 0 0 3px rgba(61, 123, 255, .2), 0 0 10px rgba(61, 123, 255, .8);
}
.plan3d .plan3d__label--phase .plan3d__label-pill {
  border-color: rgba(61, 123, 255, .45);
  background: rgba(8, 20, 46, .78);
}
.plan3d .plan3d__label--admin .plan3d__label-pill { border-color: rgba(108, 203, 255, .5); }
.plan3d .plan3d__label--admin .plan3d__label-pill::before {
  background: #6CCBFF;
  box-shadow: 0 0 8px rgba(108, 203, 255, .85);
}
.plan3d .plan3d__label--admin .plan3d__label-stem::after {
  background: #6CCBFF;
  box-shadow: 0 0 0 3px rgba(108, 203, 255, .2), 0 0 10px rgba(108, 203, 255, .8);
}
.plan3d .plan3d__label--river .plan3d__label-pill {
  color: #A6E0FF;
  border-color: rgba(108, 203, 255, .28);
  background: rgba(6, 16, 33, .62);
}

/* ── tooltip ── */
.plan3d .plan3d__tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  max-width: 240px;
  padding: 10px 13px 11px;
  border-radius: 12px;
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: #F3F6FA;
  background: rgba(6, 16, 33, .84);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  pointer-events: none;
  will-change: transform;
}
.plan3d .plan3d__tip[hidden] { display: none; }
.plan3d .plan3d__tip--phase { border-color: rgba(61, 123, 255, .38); }
.plan3d .plan3d__tip--admin { border-color: rgba(108, 203, 255, .4); }
.plan3d .plan3d__tip-title { font-weight: 700; letter-spacing: .005em; }
.plan3d .plan3d__tip-meta { font-weight: 500; color: #C2CEDD; }
.plan3d .plan3d__tip-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: 12px;
  color: #95A4B9;
}
.plan3d .plan3d__tip-sub--phase { color: #9CC2FF; }
.plan3d .plan3d__tip-sub--admin { color: #A6E0FF; }
.plan3d .plan3d__tip-dot {
  display: block;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #3D7BFF;
  box-shadow: 0 0 0 3px rgba(61, 123, 255, .18), 0 0 10px rgba(61, 123, 255, .75);
}
.plan3d .plan3d__tip-sub--admin .plan3d__tip-dot {
  background: #6CCBFF;
  box-shadow: 0 0 0 3px rgba(108, 203, 255, .18), 0 0 10px rgba(108, 203, 255, .75);
}

@media (prefers-reduced-motion: reduce) {
  .plan3d .plan3d__canvas,
  .plan3d .plan3d__labels,
  .plan3d .plan3d__label { transition: none; }
}