/* ─────────────────────────────────────────────────────────────────────────────
   e19-citygrid.css — 3D perspective city grid + floating location nodes
   Depends on: e19-citygrid.js (injects canvas / DOM nodes)
───────────────────────────────────────────────────────────────────────────── */

/* ── City grid canvas overlay in hero ── */
#city-grid-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

#city-grid-canvas.grid-visible {
  opacity: 0.18;
}

/* ── Floating location node markers ── */
.city-node {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
}

.city-node-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: oklch(93% 0.27 122);
  box-shadow: 0 0 8px 2px oklch(93% 0.27 122 / 0.4);
  animation: node-pulse 3s ease-in-out infinite;
}

.city-node-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid oklch(93% 0.27 122 / 0.35);
  animation: node-ring-expand 3s ease-out infinite;
}

.city-node-ring-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid oklch(93% 0.27 122 / 0.15);
  animation: node-ring-expand 3s ease-out 0.8s infinite;
}

@keyframes node-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.3); opacity: 0.7; }
}

@keyframes node-ring-expand {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* ── Connection lines (SVG injected by JS) ── */
#city-connections {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}

#city-connections.connections-visible {
  opacity: 0.25;
}

#city-connections line {
  stroke: oklch(93% 0.27 122);
  stroke-width: 0.5;
  stroke-dasharray: 4 8;
  animation: line-dash-flow 4s linear infinite;
}

#city-connections line:nth-child(even) {
  stroke: oklch(74% 0.20 246);
  animation-duration: 5s;
  animation-delay: -2s;
}

@keyframes line-dash-flow {
  to { stroke-dashoffset: -24; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  #city-grid-canvas,
  #city-connections,
  .city-node {
    animation: none;
    transition: none;
  }
  .city-node-ring,
  .city-node-ring-2 {
    display: none;
  }
}