/* Tailwind CSS base styles and custom cybersecurity theme */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;700;900&display=swap');

/* Custom CSS Variables for Cybersecurity Theme */
:root {
  --cyber-blue: #00d4ff;
  --cyber-green: #00ff88;
  --cyber-purple: #b347d9;
  --dark-bg: #0a0a0a;
  --dark-card: #1a1a1a;
  --dark-border: #333333;
}

/* Base Styles */
* {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--dark-bg);
  color: #ffffff;
  overflow-x: hidden;
}

/* Circuit Board Background Pattern */
.circuit-bg {
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(0, 212, 255, 0.1) 0%, transparent 25%),
    radial-gradient(circle at 75% 75%, rgba(0, 255, 136, 0.1) 0%, transparent 25%),
    linear-gradient(90deg, rgba(51, 51, 51, 0.1) 1px, transparent 1px),
    linear-gradient(180deg, rgba(51, 51, 51, 0.1) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: 0 0, 0 0, 0 0, 0 0;
}

/* Cybersecurity Glow Effects */
.cyber-glow {
  box-shadow: 0 0 10px var(--cyber-blue), 0 0 20px var(--cyber-blue), 0 0 30px var(--cyber-blue);
}

.cyber-glow-green {
  box-shadow: 0 0 10px var(--cyber-green), 0 0 20px var(--cyber-green), 0 0 30px var(--cyber-green);
}

.cyber-text-glow {
  text-shadow: 0 0 10px var(--cyber-blue), 0 0 20px var(--cyber-blue);
}

/* Custom Button Styles */
.cyber-button {
  background: linear-gradient(45deg, var(--cyber-blue), var(--cyber-purple));
  border: 2px solid transparent;
  position: relative;
  transition: all 0.3s ease;
}

.cyber-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px var(--cyber-blue);
}

/* Project Card Hover Effects */
.project-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  transition: all 0.3s ease;
  position: relative;
}

.project-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: var(--cyber-blue);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

/* Skill Progress Bars */
.skill-bar {
  background: var(--dark-border);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.skill-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--cyber-blue), var(--cyber-green));
  border-radius: 4px;
  position: relative;
  animation: skill-load 2s ease-out;
}

.skill-progress::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: skill-shine 2s ease-out infinite;
}

@keyframes skill-load {
  0% { width: 0%; }
  100% { width: var(--skill-width); }
}

@keyframes skill-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Navigation Styles */
.nav-link {
  position: relative;
  transition: all 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--cyber-blue);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Form Styles */
.cyber-input {
  background: rgba(26, 26, 26, 0.8);
  border: 1px solid var(--dark-border);
  color: #ffffff;
  transition: all 0.3s ease;
}

.cyber-input:focus {
  outline: none;
  border-color: var(--cyber-blue);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

/* Filter Button Styles */
.filter-btn {
  background: transparent;
  border: 1px solid var(--dark-border);
  color: #cccccc;
  transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--cyber-blue);
  border-color: var(--cyber-blue);
  color: #000000;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
}

/* Certification Card Styles */
.cert-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  transition: all 0.3s ease;
}

.cert-card:hover {
  border-color: var(--cyber-green);
  box-shadow: 0 5px 20px rgba(0, 255, 136, 0.2);
  transform: translateY(-3px);
}

/* Blog Card Styles */
.blog-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  transition: all 0.3s ease;
}

.blog-card:hover {
  border-color: var(--cyber-purple);
  box-shadow: 0 5px 20px rgba(179, 71, 217, 0.2);
  transform: translateY(-3px);
}

/* Loading Animation */
.loading-spinner {
  border: 3px solid var(--dark-border);
  border-top: 3px solid var(--cyber-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Enhanced Cyber Theme Animations */
@keyframes matrix-glow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

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

@keyframes data-flow {
  0% { transform: translateX(-100%) translateY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(100vw) translateY(-10px); opacity: 0; }
}

@keyframes hexagon-rotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Enhanced Cyber Background Animations */
@keyframes slow-drift {
  0% { 
    background-position: 0% 0%, 100% 100%, 50% 50%, 25% 25%, 75% 75%;
    transform: scale(1);
  }
  50% { 
    background-position: 100% 50%, 0% 50%, 25% 75%, 75% 50%, 25% 25%;
    transform: scale(1.05);
  }
  100% { 
    background-position: 50% 100%, 50% 0%, 75% 25%, 50% 75%, 50% 50%;
    transform: scale(1);
  }
}

@keyframes matrix-scroll {
  0% { 
    background-position: 0 0, 0 0, 0 0;
    opacity: 0.3;
  }
  50% { 
    background-position: 50px 50px, -50px 50px, 40px 40px;
    opacity: 0.6;
  }
  100% { 
    background-position: 100px 100px, -100px 100px, 80px 80px;
    opacity: 0.3;
  }
}

@keyframes tech-pulse {
  0%, 100% { 
    background-position: 0% 0%, 100% 100%, 50% 10%, 10% 90%;
    opacity: 0.2;
    transform: scale(1);
  }
  25% { 
    background-position: 25% 25%, 75% 75%, 75% 35%, 35% 65%;
    opacity: 0.4;
    transform: scale(1.02);
  }
  50% { 
    background-position: 50% 50%, 50% 50%, 25% 60%, 60% 40%;
    opacity: 0.6;
    transform: scale(1.05);
  }
  75% { 
    background-position: 75% 75%, 25% 25%, 50% 85%, 85% 15%;
    opacity: 0.4;
    transform: scale(1.02);
  }
}

@keyframes scan-horizontal {
  0% { 
    left: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% { 
    left: 100%;
    opacity: 0;
  }
}

@keyframes scan-vertical {
  0% { 
    top: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% { 
    top: 100%;
    opacity: 0;
  }
}

@keyframes glow {
  0%, 100% { 
    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
    opacity: 0.8;
  }
  50% { 
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
    opacity: 1;
  }
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  25% { 
    transform: translateY(-10px) translateX(5px) rotate(90deg);
  }
  50% { 
    transform: translateY(-20px) translateX(0px) rotate(180deg);
  }
  75% { 
    transform: translateY(-10px) translateX(-5px) rotate(270deg);
  }
}

/* Matrix Grid Animation */
.matrix-grid {
  animation: matrix-glow 3s ease-in-out infinite;
}

/* Circuit Line Animation */
.circuit-line {
  background: linear-gradient(90deg, transparent, var(--cyber-blue), transparent);
  animation: circuit-pulse 4s ease-in-out infinite;
}

/* Data Flow Effect */
.data-flow {
  animation: data-flow 8s linear infinite;
}

/* Hexagon Tech Element */
.hex-tech {
  animation: hexagon-rotate 6s ease-in-out infinite;
}

/* Enhanced Hover Effects for Cyber Elements */
.cyber-element:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px var(--cyber-blue));
  transition: all 0.3s ease;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .project-card:hover {
    transform: none;
    scale: 1;
  }
  
  .cyber-glow {
    box-shadow: 0 0 5px var(--cyber-blue);
  }
  
  .circuit-bg {
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  }
  
  .cyber-glow,
  .cyber-glow-green {
    box-shadow: 0 0 5px var(--cyber-blue), 0 0 10px var(--cyber-blue);
  }
  
  @keyframes slow-drift {
    0% { 
      background-position: 0% 0%;
      transform: scale(1);
    }
    100% { 
      background-position: 50% 50%;
      transform: scale(1.02);
    }
  }
  
  @keyframes matrix-scroll {
    0% { background-position: 0 0; }
    100% { background-position: 25px 25px; }
  }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--dark-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--cyber-blue);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cyber-green);
}

/* Print Styles */
@media print {
  .cyber-glow,
  .cyber-glow-green {
    box-shadow: none;
  }
  
  .circuit-bg {
    background: none;
  }
}