/* VANGUARD-D CSS Stylesheet - Legacy Digital 2030 */

/* Custom Variables & Colors */
:root {
  --peru-red: #A61C26;
  --peru-red-glow: rgba(166, 28, 38, 0.4);
  --tech-blue: #00E5FF;
  --tech-blue-glow: rgba(0, 229, 255, 0.4);
  --tech-gold: #D4AF37;
  --tech-gold-glow: rgba(212, 175, 55, 0.3);
  --space-darkest: #040508;
  --space-dark: #0A0D14;
  --space-card: rgba(13, 17, 28, 0.7);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-glow-blue: rgba(0, 229, 255, 0.2);
  --border-glow-red: rgba(166, 28, 38, 0.3);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--space-darkest);
}
::-webkit-scrollbar-thumb {
  background: rgba(166, 28, 38, 0.5);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--peru-red);
}

/* Global resets & smoothness */
html {
  scroll-behavior: smooth;
  font-family: 'Inter', sans-serif;
  background-color: var(--space-darkest);
  color: #f1f5f9;
  overflow-x: hidden;
}

/* Cybernetic Dot Matrix Grid Background */
.cyber-grid {
  background-size: 40px 40px;
  background-image: 
    radial-gradient(circle, rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.005) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.005) 1px, transparent 1px);
}

/* Glassmorphism Panel */
.glass-panel {
  background: var(--space-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-light);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

.glass-panel-glow-blue {
  background: var(--space-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow-blue);
  box-shadow: 0 0 20px 0 rgba(0, 229, 255, 0.05);
}

.glass-panel-glow-red {
  background: var(--space-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow-red);
  box-shadow: 0 0 25px 0 rgba(166, 28, 38, 0.05);
}

/* Glowing text & icons */
.glow-text-red {
  text-shadow: 0 0 15px var(--peru-red-glow);
}
.glow-text-blue {
  text-shadow: 0 0 15px var(--tech-blue-glow);
}
.glow-text-gold {
  text-shadow: 0 0 12px var(--tech-gold-glow);
}

/* Cybernetic corners for widgets */
.cyber-corner-box {
  position: relative;
}
.cyber-corner-box::before, .cyber-corner-box::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid transparent;
  pointer-events: none;
  z-index: 10;
}
.cyber-corner-box::before {
  top: -1px;
  left: -1px;
  border-top-color: var(--tech-blue);
  border-left-color: var(--tech-blue);
}
.cyber-corner-box::after {
  bottom: -1px;
  right: -1px;
  border-bottom-color: var(--tech-blue);
  border-right-color: var(--tech-blue);
}

/* Cybernetic corners - Red accent */
.cyber-corner-box-red::before {
  top: -1px;
  left: -1px;
  border-top-color: var(--peru-red);
  border-left-color: var(--peru-red);
}
.cyber-corner-box-red::after {
  bottom: -1px;
  right: -1px;
  border-bottom-color: var(--peru-red);
  border-right-color: var(--peru-red);
}

/* Hologram Scanning Line Effect */
.hologram-scanner {
  position: relative;
  overflow: hidden;
}
.hologram-scanner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--tech-blue), transparent);
  box-shadow: 0 0 10px var(--tech-blue);
  animation: scan 4s linear infinite;
  pointer-events: none;
}

@keyframes scan {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}

/* Scanline visual styling */
.scanlines {
  position: relative;
}
.scanlines::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 2;
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
}

/* Tech Shimmer / Glitch Hover */
.btn-cyber {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255,255,255,0.1);
}
.btn-cyber::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: all 0.5s;
  pointer-events: none;
}
.btn-cyber:hover::before {
  left: 100%;
}

/* Hexagon background pattern */
.bg-hex {
  background-color: var(--space-darkest);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%23ffffff' fill-opacity='0.006' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5M14 8L0 16.08v16.17L14 40.33l14-8.08V16.08L14 8z'/%3E%3C/svg%3E");
}

/* Glowing Orbit Animation */
@keyframes orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-orbit {
  animation: orbit 120s linear infinite;
}
.animate-orbit-reverse {
  animation: orbit 90s linear infinite reverse;
}

/* Status light pulse */
.pulse-light {
  box-shadow: 0 0 8px currentColor;
  animation: pulse-glow 2s infinite ease-in-out;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Card glass glow transitions */
.glow-card-transition {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.glow-card-transition:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px 0 rgba(0, 229, 255, 0.1);
  border-color: rgba(0, 229, 255, 0.4);
}

.glow-card-transition-red:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px 0 rgba(166, 28, 38, 0.18);
  border-color: rgba(166, 28, 38, 0.5);
}

/* Text clipping metallic gradient */
.text-gradient-metallic {
  background: linear-gradient(135deg, #ffffff 30%, #a1a1aa 70%, #d4d4d8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-peru {
  background: linear-gradient(135deg, #ffffff 20%, #A61C26 60%, #5d0f14 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Futuristic Loader */
.loader-wrapper {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: var(--space-darkest);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease;
}
.loader-circle {
  border: 2px solid transparent;
  border-top-color: var(--peru-red);
  border-bottom-color: var(--tech-blue);
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Node animation dot link styling */
.connection-node {
  animation: node-float 6s ease-in-out infinite alternate;
}
@keyframes node-float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}