/* ===== Focus mode — hero + floating node thumbnails ===== */
/* Node pics sit between the hero card (left) and the detail panel (right).
   They're sized via CSS clamp() so they shrink on narrow viewports without
   overlapping anything. Click a node to swap its image into the hero. */
.focus-nodes {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  transition: opacity 0.5s ease 0.2s;
}
body.focus-mode .focus-nodes { opacity: 1; }
/* Hide nodes on viewports too narrow to fit them next to the hero */
@media (max-width: 880px) {
  .focus-nodes { display: none; }
}

.focus-node {
  position: absolute;
  width:  var(--focus-node-w, clamp(110px, 13vw, 180px));
  height: calc(var(--focus-node-w, clamp(110px, 13vw, 180px)) * 0.62);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  background: rgba(0, 14, 4, 0.5);
  border: 1px solid rgba(0, 255, 65, 0.35);
  box-shadow:
    0 0 12px rgba(0, 255, 65, 0.22),
    inset 0 0 6px rgba(0, 255, 65, 0.10);
  /* Subtle X-axis wave so the cluster feels alive */
  animation: focus-node-wave var(--focus-node-wave-dur, 6s) ease-in-out infinite;
  animation-delay: var(--focus-node-delay, 0s);
  transition: filter 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.focus-node:hover {
  filter: drop-shadow(0 0 14px rgba(0, 255, 65, 0.7));
  border-color: rgba(108, 255, 138, 0.85);
  box-shadow: 0 0 18px rgba(0, 255, 65, 0.45), inset 0 0 8px rgba(0, 255, 65, 0.18);
}
.focus-node img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: saturate(0.85) brightness(0.92);
}
.focus-node img.loaded { opacity: 1; }
/* Cyberpunk corner brackets — same language as project cards */
.focus-node .corners {
  position: absolute; inset: 0;
  pointer-events: none;
}
.focus-node .corners svg {
  width: 100%; height: 100%;
  overflow: visible;
}
.focus-node .corners path {
  fill: none;
  stroke: rgba(108, 255, 138, 0.85);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 3px rgba(0, 255, 65, 0.7));
}
.focus-node .label {
  position: absolute; top: 6px; left: 6px;
  font-family: 'Courier New', monospace;
  font-size: 9px; letter-spacing: 0.3em;
  color: rgba(180, 255, 200, 0.85);
  background: rgba(0, 14, 4, 0.7);
  padding: 2px 5px;
  border: 1px solid rgba(0, 255, 65, 0.3);
  z-index: 2;
}
/* Per-node wave amplitudes via CSS variables so we can tune them */
@keyframes focus-node-wave {
  0%, 100% {
    transform: translate(-50%, -50%) translateX(0);
  }
  50% {
    transform: translate(-50%, -50%) translateX(var(--focus-node-wave-amp, 8px));
  }
}