/* Sandbox Lab - Node Health Check - Hover & Parallax enhancements */

/* ========== Hover: Navigation ========== */
[data-purpose="main-navigation"] .w-8.h-8 {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
[data-purpose="main-navigation"] .w-8.h-8:hover {
  transform: scale(1.1);
  box-shadow: 0 0 16px rgba(0, 242, 255, 0.5);
}
[data-purpose="main-navigation"] .font-mono.font-bold.text-xl:hover {
  color: #00f2ff;
  text-shadow: 0 0 20px rgba(0, 242, 255, 0.3);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* ========== Hover: Hero badge ========== */
[data-purpose="hero-section"] .inline-block.px-3.py-1.border {
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
[data-purpose="hero-section"] .inline-block.px-3.py-1.border:hover {
  background: rgba(0, 242, 255, 0.15);
  border-color: rgba(0, 242, 255, 0.6);
  transform: scale(1.05);
}

/* ========== Hover: Glass cards (dashboard + feature cards) ========== */
.glass-card {
  transition: all 0.35s ease;
}
.glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 242, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 12px 40px rgba(0, 242, 255, 0.12), 0 0 0 1px rgba(0, 242, 255, 0.2);
}

/* ========== Hover: Node health cards (NODE_001, etc.) ========== */
.node-health-card {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.node-health-card:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.15) !important;
  border-left-color: rgba(0, 242, 255, 0.5) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ========== Hover: Technical specs list ========== */
[data-purpose="technical-specs"] li {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
[data-purpose="technical-specs"] li:hover {
  opacity: 1;
  transform: translateX(6px);
}
[data-purpose="technical-specs"] li:hover .text-neonCyan {
  text-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
}

/* ========== Hover: Footer ========== */
[data-purpose="main-footer"] .cursor-default {
  cursor: pointer;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
[data-purpose="main-footer"] .cursor-default:hover {
  color: #00f2ff;
  text-shadow: 0 0 12px rgba(0, 242, 255, 0.3);
}
[data-purpose="main-footer"] .flex.gap-4:hover .w-2.h-2 {
  box-shadow: 0 0 12px #00f2ff;
  transform: scale(1.2);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* ========== Parallax: sections get data-speed for JS ========== */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}