/* ╔══════════════════════════════════════════════════════════╗
   ║  ORACLE HUD — JARVIS Holographic Display (Wide)        ║
   ║  Injected into .oracle-hero on dashboard                ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── HUD Container ── */
.oracle-hud {
  position: relative;
  width: 100%;
  height: 350px;
}

.oracle-hud svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.15));
}

/* ── Title Bar (above SVG) ── */
.oracle-hud-title-bar {
  padding: 18px 30px 8px;
  position: relative;
  z-index: 1;
}
.oracle-hud-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #00e5ff;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.4), 0 0 30px rgba(0, 229, 255, 0.15);
  margin: 0;
  line-height: 1.2;
}
.oracle-hud-subtitle {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
}

/* ── Ring Rotations (centered at 150,150) ── */
.hud-ring-1 {
  transform-origin: 150px 150px;
  animation: hud-rotate-cw 20s linear infinite;
}
.hud-ring-2 {
  transform-origin: 150px 150px;
  animation: hud-rotate-ccw 15s linear infinite;
}
.hud-ring-3 {
  transform-origin: 150px 150px;
  animation: hud-rotate-cw 25s linear infinite;
}
.hud-ring-4 {
  transform-origin: 150px 150px;
  animation: hud-rotate-ccw 35s linear infinite;
}
.hud-ring-5 {
  transform-origin: 150px 150px;
  animation: hud-rotate-cw 12s linear infinite;
}

@keyframes hud-rotate-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes hud-rotate-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* ── Scanning Sweep ── */
.hud-sweep {
  transform-origin: 150px 150px;
  animation: hud-rotate-cw 4s linear infinite;
}

/* ── Core Pulse ── */
.hud-core {
  animation: hud-core-pulse 3s ease-in-out infinite;
}
@keyframes hud-core-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.hud-core-glow {
  animation: hud-core-glow-pulse 3s ease-in-out infinite;
}
@keyframes hud-core-glow-pulse {
  0%, 100% { r: 8; opacity: 0.2; }
  50% { r: 14; opacity: 0.5; }
}

/* ── Data Nodes ── */
.hud-node {
  animation: hud-node-blink 2s ease-in-out infinite;
}
@keyframes hud-node-blink {
  0%, 100% { opacity: 0.3; r: 2; }
  50% { opacity: 1; r: 3; }
}

/* ── Segment Markers on rings ── */
.hud-tick {
  opacity: 0.3;
}
.hud-tick-active {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.8));
}

/* ── Ring Text (rotates with parent ring) ── */
.hud-ring-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 6px;
  fill: rgba(0, 229, 255, 0.4);
  letter-spacing: 0.05em;
}

/* ── Data Readout Labels ── */
.hud-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 7px;
  fill: rgba(0, 229, 255, 0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hud-label-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  fill: #00e5ff;
  letter-spacing: 0.05em;
}

/* ── Hexagonal Grid Background ── */
.hud-hex-grid {
  opacity: 0.06;
  animation: hud-hex-fade 8s ease-in-out infinite;
}
@keyframes hud-hex-fade {
  0%, 100% { opacity: 0.04; }
  50% { opacity: 0.08; }
}

/* ── Arc Segments ── */
.hud-arc-segment {
  stroke-dasharray: 20 10;
  animation: hud-arc-dash 3s linear infinite;
}
@keyframes hud-arc-dash {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 30; }
}

/* ── Status Text ── */
.hud-status-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 6px;
  fill: rgba(0, 229, 255, 0.3);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ── Data Flow Lines ── */
.hud-flow-line {
  stroke-dasharray: 8 12;
  animation: hud-flow 2s linear infinite;
}
@keyframes hud-flow {
  from { stroke-dashoffset: 20; }
  to { stroke-dashoffset: 0; }
}

/* ── Activity Bars ── */
.hud-activity-bar {
  animation: hud-bar-pulse 2s ease-in-out infinite;
}
@keyframes hud-bar-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ── Waveform ── */
.hud-waveform {
  animation: hud-wave-shift 1.5s linear infinite;
}
@keyframes hud-wave-shift {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 20; }
}

/* ── Capacity Bar Fill ── */
.hud-capacity-fill {
  animation: hud-capacity-glow 3s ease-in-out infinite;
}
@keyframes hud-capacity-glow {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.6)); }
}

/* ── Uptime Ring Gauge ── */
.hud-uptime-ring {
  animation: hud-ring-glow 4s ease-in-out infinite;
}
@keyframes hud-ring-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ══════════════════════════════════════════════════════
   BREATHING PULSE DOTS
   ══════════════════════════════════════════════════════ */

/* Gold dots (ring 1 cardinal, ring 3) */
.hud-breathe-gold {
  animation: hud-breathe-gold 3s ease-in-out infinite;
}
@keyframes hud-breathe-gold {
  0%, 100% { opacity: 0.2; r: 2; filter: drop-shadow(0 0 0px rgba(212,175,55,0)); }
  50% { opacity: 1; r: 3.5; filter: drop-shadow(0 0 8px rgba(212,175,55,0.8)); }
}

/* Gold dots large (ring 3 — bigger glow) */
.hud-breathe-gold-lg {
  animation: hud-breathe-gold-lg 4s ease-in-out infinite;
}
@keyframes hud-breathe-gold-lg {
  0%, 100% { opacity: 0.15; r: 2.5; filter: drop-shadow(0 0 0px rgba(212,175,55,0)); }
  50% { opacity: 1; r: 4; filter: drop-shadow(0 0 12px rgba(212,175,55,0.9)); }
}

/* Cyan dots (ring 2) */
.hud-breathe-cyan {
  animation: hud-breathe-cyan 2s ease-in-out infinite;
}
@keyframes hud-breathe-cyan {
  0%, 100% { opacity: 0.3; r: 2; filter: drop-shadow(0 0 0px rgba(0,229,255,0)); }
  50% { opacity: 1; r: 3; filter: drop-shadow(0 0 6px rgba(0,229,255,0.6)); }
}

/* Red dots (ring 5 — monitoring) */
.hud-breathe-red {
  animation: hud-breathe-red 5s ease-in-out infinite;
}
@keyframes hud-breathe-red {
  0%, 100% { opacity: 0.15; r: 2; filter: drop-shadow(0 0 0px rgba(255,58,58,0)); }
  50% { opacity: 0.8; r: 3; filter: drop-shadow(0 0 10px rgba(255,58,58,0.6)); }
}

/* ── Hero Layout Override ── */
.oracle-hero {
  display: block !important;
  padding: 0 !important;
  min-height: 350px !important;
  overflow: hidden !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .oracle-hud {
    height: 250px;
  }
  .oracle-hero {
    min-height: 250px !important;
  }
}

/* ══════════════════════════════════════════════════════
   SIDEBAR AMBIENT VISUALIZATION
   ══════════════════════════════════════════════════════ */

.sidebar-ambient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  opacity: 0.3;
  pointer-events: none;
  overflow: hidden;
}
.sidebar-ambient svg {
  width: 100%;
  height: 100%;
}
.sidebar-pulse-ring {
  animation: sidebar-breathe 4s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.sidebar-pulse-ring:nth-child(2) { animation-delay: 0.5s; }
.sidebar-pulse-ring:nth-child(3) { animation-delay: 1s; }

@keyframes sidebar-breathe {
  0%, 100% { opacity: 0.15; transform: scale(0.95); }
  50% { opacity: 0.4; transform: scale(1.05); }
}
.sidebar-ekg-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: sidebar-ekg 3s linear infinite;
}
@keyframes sidebar-ekg {
  to { stroke-dashoffset: 0; }
}
.sidebar-data-stream line {
  animation: sidebar-stream-fall 2s linear infinite;
}
@keyframes sidebar-stream-fall {
  0% { opacity: 0; transform: translateY(-10px); }
  20% { opacity: 0.6; }
  80% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(10px); }
}