/* =========================================================
   THREADS ACROSS THE GREEN SPACE
   The same red / green / blue threads as the radar chart
   (assets/radar-chart/threads), stretched across the sections
   between the two doors, with a layer blur (--thread-blur in
   css/variables.css). Drawn by js/threads/main.js.
   ========================================================= */

.journey-threads {
  /* top + height are set by js/threads/main.js so it covers empathize -> test */
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 2;            /* above the sections (z-index 1): threads pass over the artwork */
  pointer-events: none;  /* never blocks hovering / clicking the artwork underneath */
  overflow: clip;        /* threads run off the edges of the screen */
}

.journey-threads-blur {
  position: absolute;
  inset: 0;
}

/* One wrapper per thread. The blur lives here (not on the scaled image) so it stays a true
   --thread-blur even though the thread image is stretched. js/threads/main.js moves the
   wrapper up / down on scroll (vertical scroll parallax), which is cheap because the
   blurred thread is kept as a ready-made layer. */
.journey-thread-wrap {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  filter: blur(var(--thread-blur));
  will-change: transform;
}

/* The canvas that draws one thread (at rest, or vibrating after a pluck) */
.journey-thread {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  max-width: none;
  user-select: none;
}

/* Not shown until the door's square opening has finished (same moment as the empathize section) */
body:has(.empathize-section.is-waiting) .journey-threads {
  visibility: hidden;
}


/* =========================================================
   THREAD EDITOR  (open the page as  index.html?edit-threads)
   Drag handles to place the threads, then "Copy code".
   Nothing here shows up on the normal page.
   ========================================================= */

.thread-edit-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.thread-edit-guide {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.35);
}

.thread-edit-guide span {
  position: absolute;
  left: 8px;
  top: 4px;
  font: 11px/1 'Work Sans', sans-serif;
  color: rgba(255, 255, 255, 0.7);
}

.thread-edit-handle {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.thread-edit-handle:active { cursor: grabbing; }

.thread-edit-mid {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  display: grid;
  place-items: center;
  font: 600 12px/1 'Work Sans', sans-serif;
  color: #fff;
}

.thread-edit-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  width: 270px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 14px;
  background: #fff;
  color: #222;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  font: 13px/1.4 'Work Sans', sans-serif;
}

.te-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.te-hint { margin: 4px 0 10px; color: #666; font-size: 12px; }
.te-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.te-row label { flex: 1; display: flex; align-items: center; gap: 6px; }
.te-row input { width: 70px; padding: 3px 4px; }

.te-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 600;
}

.te-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.te-actions button, .te-del {
  padding: 5px 10px; border: 1px solid #ccc; border-radius: 6px;
  background: #f4f4f4; cursor: pointer; font: inherit;
}
.te-actions .te-primary { background: #0D7165; border-color: #0D7165; color: #fff; }
.te-del { padding: 2px 8px; }
.te-output { width: 100%; margin-top: 10px; font: 11px/1.4 monospace; }