/* ==========================================================================
   NEXORA — Futuristic Visual Effects & Cybernetic Details
   Precision styling for high-end AI engineering aesthetics.
   ========================================================================== */

/* 3D Perspective Digital Grid */
.perspective-grid-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 450px;
  overflow: hidden;
  perspective: 600px;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to top, black 20%, transparent 95%);
  -webkit-mask-image: linear-gradient(to top, black 20%, transparent 95%);
}

.perspective-grid-plane {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: 
    linear-gradient(to right, rgba(77, 124, 254, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(77, 124, 254, 0.12) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: rotateX(65deg);
  transform-origin: 50% 0%;
  animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
  0% { transform: rotateX(65deg) translateY(0); }
  100% { transform: rotateX(65deg) translateY(60px); }
}

/* Cybernetic HUD Corner Brackets */
.hud-box {
  position: relative;
}

.hud-box::before,
.hud-box::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
}

.hud-box::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--cyber-cyan);
  border-left: 2px solid var(--cyber-cyan);
}

.hud-box::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--cyber-cyan);
  border-right: 2px solid var(--cyber-cyan);
}

.hud-box:hover::before,
.hud-box:hover::after {
  width: 18px;
  height: 18px;
  border-color: #ffffff;
}

/* Coordinate Chips & System Chips */
.sys-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.sys-chip.cyan {
  color: var(--cyber-cyan);
  border-color: rgba(0, 217, 255, 0.3);
  background: rgba(0, 217, 255, 0.05);
}

.sys-chip.emerald {
  color: var(--neon-emerald);
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.05);
}

.sys-chip .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon-emerald);
  box-shadow: 0 0 6px var(--neon-emerald);
  animation: pulseDot 2s infinite ease-in-out;
}

/* Glowing Circuit Line Accents */
.circuit-line-h {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 124, 254, 0.3), var(--cyber-cyan), rgba(77, 124, 254, 0.3), transparent);
  margin: 32px 0;
  position: relative;
}

.circuit-line-h::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 20%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyber-cyan);
  box-shadow: 0 0 8px var(--cyber-cyan);
  animation: circuitPulse 6s ease-in-out infinite;
}

@keyframes circuitPulse {
  0%, 100% { left: 10%; opacity: 0; }
  50% { left: 90%; opacity: 1; }
}

/* Glass Card Gradient Reflections */
.card-specular {
  position: relative;
  overflow: hidden;
}

.card-specular::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* Dynamic Radial Glow Orbs behind key sections */
.ambient-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  opacity: 0.15;
  z-index: -1;
}

.ambient-blue {
  background: var(--electric-blue);
}

.ambient-cyan {
  background: var(--cyber-cyan);
}

.ambient-violet {
  background: var(--electric-violet);
}