/* ========================================
   Beacon — Orientation compass
   A context-switching dot, not a nav menu
   ======================================== */
.beacon {
  position: fixed;
  top: var(--space-md);
  left: max(var(--space-md), calc(50vw - 420px));
  z-index: 200;
  font-family: var(--font-body);
}

/* The pulse: resting state
   A small colored dot showing current context */
.beacon-pulse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  padding: 0;
  transition: box-shadow 0.3s, transform 0.15s;
  box-shadow: 0 2px 8px var(--color-shadow);
}

.beacon-pulse:hover {
  transform: scale(1.08);
  box-shadow: 0 3px 12px var(--color-shadow);
}

.beacon-pulse[aria-expanded="true"] {
  background: var(--color-bg-alt);
  border-color: var(--color-text-light);
}

/* The dot inside the pulse — context-colored */
.beacon-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dot-color, var(--color-text-muted));
  transition: background 0.3s;
}

/* All-context dots: 4 small dots in a 2x2 grid for context-neutral pages */
.beacon-dot-all {
  width: 8px;
  height: 8px;
  background: var(--dot-color, var(--color-text-muted));
}

/* Multiple dots: tight 2-per-row stacking in center of pulse */
.beacon-pulse:has(.beacon-dot + .beacon-dot) {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px;
  place-content: center;
  padding: 0;
}

/* The map: expanded state
   Contains only context capsules */
.beacon-map {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 160px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 6px 24px var(--color-shadow);
  padding: 8px;
  animation: beacon-appear 0.15s ease-out;
}

@keyframes beacon-appear {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Constellation — context capsules only */
.beacon-constellation {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Base capsule style */
.beacon-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.12s, opacity 0.2s, padding 0.2s;
  opacity: 0.55;
}

.beacon-node:hover {
  background: var(--color-bg-alt);
  opacity: 0.85;
}

.beacon-node-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--node-color, var(--color-text-light));
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.2s, width 0.2s, height 0.2s;
}

.beacon-node:hover .beacon-node-dot {
  transform: scale(1.3);
  box-shadow: 0 0 6px var(--node-color);
}

.beacon-node-label {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  font-weight: 500;
  transition: font-size 0.2s, color 0.2s, font-weight 0.2s;
}

.beacon-node:hover .beacon-node-label {
  color: var(--color-text);
}

/* No active context — all capsules equally weighted */
.beacon-constellation:not(:has(.beacon-node-active)) .beacon-node {
  opacity: 0.8;
}

/* Active context — visually dominant, at the top */
.beacon-node-active {
  opacity: 1;
  padding: 8px 10px;
  order: -1;
}

.beacon-node-active .beacon-node-dot {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 8px var(--node-color);
}

.beacon-node-active .beacon-node-label {
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.82rem;
}

/* ========================================
   Streetlight — dark warm theme
   ======================================== */
body[data-section="streetlight"] {
  --color-bg:          #1a1714;
  --color-bg-alt:      #242019;
  --color-text:        #e8e4de;
  --color-text-muted:  #a09888;
  --color-text-light:  #6b6058;
  --color-border:      #332e27;
  --color-link:        #e8e4de;
  --color-link-hover:  #E8A825;
  --color-shadow:      rgba(0, 0, 0, 0.18);
  background-color: var(--color-bg);
  background-image: linear-gradient(
    180deg,
    rgba(232, 168, 37, 0.10) 0%,
    transparent 35%
  );
}

body[data-section="streetlight"] .name-anchor:hover {
  color: rgba(232, 168, 37, 0.7);
}

body[data-section="streetlight"] .context-field-label {
  opacity: 0.06;
}

body[data-section="streetlight"] .page-hero-shadow {
  opacity: 0.05;
}

/* Streetlight neighbor glow — brighter on dark */
body[data-section="streetlight"][style*="--neighbor-1"]::after {
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--neighbor-1) 8%, transparent) 0%,
    transparent 100%
  );
}

/* ========================================
   Page context glow — other sections
   Subtle background tint from the current context color
   ======================================== */
body[data-section="real-estate"] {
  background: linear-gradient(
    180deg,
    rgba(43, 108, 176, 0.07) 0%,
    var(--color-bg) 40%
  );
}

body[data-section="third-places"] {
  background: linear-gradient(
    180deg,
    rgba(74, 139, 110, 0.07) 0%,
    var(--color-bg) 40%
  );
}

body[data-section="building"] {
  background: linear-gradient(
    180deg,
    rgba(123, 143, 161, 0.07) 0%,
    var(--color-bg) 40%
  );
}

/* Beacon pulse picks up section color glow */
body[data-section="streetlight"] .beacon-pulse {
  box-shadow: 0 2px 12px rgba(232, 168, 37, 0.30), 0 0 24px rgba(232, 168, 37, 0.10);
}
body[data-section="real-estate"] .beacon-pulse {
  box-shadow: 0 2px 10px rgba(43, 108, 176, 0.18);
}
body[data-section="third-places"] .beacon-pulse {
  box-shadow: 0 2px 10px rgba(74, 139, 110, 0.18);
}
body[data-section="building"] .beacon-pulse {
  box-shadow: 0 2px 10px rgba(123, 143, 161, 0.18);
}

/* ========================================
   Context header field
   Large, calm context name behind the page header
   Environmental only — not interactive
   ======================================== */
.context-field {
  position: fixed;
  top: -0.25em;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.context-field-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18vw;
  line-height: 0.85;
  color: var(--context-color, var(--color-text));
  opacity: 0.04;
  white-space: nowrap;
  letter-spacing: -0.03em;
  user-select: none;
  text-transform: uppercase;
}

/* Section index: shadow label sits behind the H1 */
.page-hero-index {
  position: relative;
}

.page-hero-shadow {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--context-color, var(--color-text));
  opacity: 0.03;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.page-hero-index h1 {
  position: relative;
  transform: translateY(-4px);
}

/* Secondary context edge influence */
.context-field-secondary {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  height: 60%;
  background: radial-gradient(
    ellipse at bottom right,
    var(--secondary-color, transparent) 0%,
    transparent 70%
  );
  opacity: 0.02;
}

/* ========================================
   Neighbor glow — bottom of page
   Hints at where bridges lead, using
   --neighbor-1 / --neighbor-2 set on <body>
   ======================================== */
body[style*="--neighbor-1"]::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30vh;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--neighbor-1) 4%, transparent) 0%,
    transparent 100%
  );
}

/* ========================================
   Beacon idle spin — subtle cue for interactivity
   ======================================== */
@keyframes beacon-idle-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.beacon-pulse.beacon-spin {
  animation: beacon-idle-spin 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .beacon-pulse.beacon-spin {
    animation: none;
  }
}

/* ========================================
   Mobile
   ======================================== */
@media (max-width: 640px) {
  .beacon {
    top: var(--space-xs);
    left: var(--space-xs);
  }

  .beacon-pulse {
    width: 42px;
    height: 42px;
  }

  .beacon-dot {
    width: 12px;
    height: 12px;
  }

  .beacon-dot-all {
    width: 7px;
    height: 7px;
  }

  .beacon-map {
    min-width: 140px;
  }

  .context-field-label {
    font-size: 16vw;
  }

}