/* CoreWave — Premium Cybersecurity Theme */
:root {
  --bg: #030712;
  --neon-blue: #00D4FF;
  --neon-purple: #7C3AED;
  --neon-green: #10B981;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Selection */
::selection {
  background: rgba(0, 212, 255, 0.2);
  color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #030712; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* Fullscreen Three.js canvas */
#three-bg {
  width: 100vw;
  height: 100vh;
  display: block;
}

/* Cyber ring animations */
.cyber-ring {
  animation: cyber-spin 20s linear infinite;
}
.cyber-ring:nth-child(2) {
  animation-duration: 30s;
  animation-direction: reverse;
}
.cyber-ring:nth-child(3) {
  animation-duration: 40s;
}

@keyframes cyber-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Threat label float */
.threat-label {
  animation: float-label 4s ease-in-out infinite;
}
.threat-label:nth-child(2) { animation-delay: 1s; }
.threat-label:nth-child(3) { animation-delay: 2s; }
.threat-label:nth-child(4) { animation-delay: 3s; }

@keyframes float-label {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Timeline line glow pulse */
.timeline-line {
  background: linear-gradient(to bottom,
    rgba(0, 212, 255, 0.3),
    rgba(124, 58, 237, 0.3),
    rgba(0, 212, 255, 0.3)
  );
  animation: line-pulse 3s ease-in-out infinite;
}

@keyframes line-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Page transition fade */
main {
  animation: page-fade 0.4s ease-out;
}

@keyframes page-fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive grid utilities */
.responsive-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Ensure images don't overflow */
img { max-width: 100%; height: auto; }

/* Mobile-optimized touch targets */
@media (max-width: 767px) {
  .nav-link, button, a[href] { min-height: 44px; }
  .cyber-ring { display: none; }
  .threat-label { font-size: 9px; padding: 4px 8px; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}