/* css/digital-twin.css */
.hud-section {
  position: relative;
  background-color: #020408;
  padding: 100px 0;
  border-top: 1px solid rgba(13, 148, 136, 0.2);
  border-bottom: 1px solid rgba(13, 148, 136, 0.2);
  overflow: hidden;
}

.hud-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 700px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 50px rgba(13, 148, 136, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hud-bg {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 12px;
  position: absolute;
  top: 0; left: 0;
  transition: opacity 1.5s ease-in-out;
}
.layer-base {
  position: relative;
  z-index: 1;
}
.layer-connects {
  z-index: 2;
  opacity: 0;
}
.layer-pumping {
  z-index: 3;
  opacity: 0;
}
.layer-sync {
  z-index: 4;
  opacity: 0;
}

.hud-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at center, transparent 30%, rgba(2, 4, 8, 0.9) 100%);
  z-index: 1;
}

.hud-start-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(2, 4, 8, 0.5);
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity 0.5s ease;
}
.hud-start-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Glassmorphism Nodes */
.hud-node {
  position: absolute;
  z-index: 10;
  background: rgba(10, 15, 24, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(13, 148, 136, 0.3);
  border-radius: var(--radius-md);
  padding: 15px 20px;
  color: white;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
}
.hud-node.active {
  border-color: rgba(13, 148, 136, 0.9);
  box-shadow: 0 0 25px rgba(13, 148, 136, 0.4);
}

.node-ring {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(13, 148, 136, 0.2);
  border: 2px solid var(--color-primary);
  position: relative;
}
.hud-node.active .node-ring {
  background: var(--color-primary);
  box-shadow: 0 0 15px var(--color-primary);
}
.hud-node.active .node-ring::after {
  content: '';
  position: absolute;
  top: -6px; left: -6px; right: -6px; bottom: -6px;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

.node-content h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.data-value {
  font-size: 1.5rem;
  font-family: monospace;
  color: var(--color-primary);
  font-weight: bold;
}

/* Specific Node Placements */
#node-pump { top: 40%; left: 10%; }
#node-tank { bottom: 15%; left: 40%; }
#node-cloud { top: 15%; right: 10%; }

/* Status Badges & Mini Bars */
.status-badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 12px;
  margin-top: 5px;
  background: rgba(255,255,255,0.1);
  transition: all 0.3s;
}
.status-badge.active { background: rgba(13, 148, 136, 0.2); color: var(--color-primary); }

.mini-bar {
  width: 100%; height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}
.mini-bar-fill {
  height: 100%;
  background: var(--color-accent);
  width: 90%;
  transition: width 0.3s;
}

.hud-canvas {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  transform-origin: center center;
  transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.hud-blueprint {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2;
  opacity: 0.9;
}

.liquid-flow {
  animation: liquidMove 1s linear infinite;
  transition: opacity 0.3s;
}
.liquid-flow.paused {
  animation-play-state: paused;
  opacity: 0.2;
}

.data-flow {
  animation: dataMove 0.5s linear infinite;
  transition: opacity 0.3s;
  filter: drop-shadow(0 0 5px currentColor);
}
.data-flow.paused {
  animation-play-state: paused;
  opacity: 0.1;
  filter: none;
}

@keyframes liquidMove {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

@keyframes dataMove {
  from { stroke-dashoffset: 16; }
  to { stroke-dashoffset: 0; }
}

/* Live Console */
.hud-console {
  position: absolute;
  bottom: 20px; right: 20px;
  width: 400px; height: 250px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid #333;
  border-radius: var(--radius-md);
  z-index: 15;
  display: flex;
  flex-direction: column;
  font-family: 'Courier New', Courier, monospace;
}
.console-header {
  background: #111;
  padding: 10px 15px;
  font-size: 0.8rem;
  color: #888;
  border-bottom: 1px solid #333;
}
.console-body {
  padding: 15px;
  overflow-y: auto;
  flex: 1;
  font-size: 0.85rem;
  line-height: 1.6;
}

.log-time { color: #888; }
.log-info { color: #0ea5e9; }
.log-success { color: #22c55e; }
.log-warning { color: #f59e0b; }

@media (max-width: 900px) {
  .hud-container { height: 800px; }
  #node-pump { top: 10%; left: 5%; }
  #node-tank { bottom: 40%; left: 5%; }
  #node-cloud { top: 10%; right: 5%; }
  .hud-console { width: 90%; bottom: 10px; right: 5%; left: 5%; }
}