/* 
  Theme Engine for Naman Sain Portfolio 
  15 Ultra-Premium Robotics & Tech-Oriented Themes
  Fully cohesive styling across all components (Nav, Cards, Textures)
*/

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Teko:wght@400;600&family=Rajdhani:wght@400;600;700&family=Syncopate:wght@400;700&family=Share+Tech+Mono&display=swap');

/* Global Animation for Moving Gradients */
@keyframes bgShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 10px var(--accent); }
  50% { box-shadow: 0 0 30px var(--accent-hover); }
  100% { box-shadow: 0 0 10px var(--accent); }
}

/* Default Theme - Apple Robotics (Clean & Minimal) */
/* (Untouched per user request) */
body.theme-default {
  background: radial-gradient(var(--glass-border) 1px, var(--bg-primary) 1px);
  background-size: 40px 40px;
}

/* ==========================================================================
   2. CYBER-MECH (Cyberpunk)
   ========================================================================== */
body.theme-cybermech {
  --bg-primary: #050505; 
  --bg-secondary: #0a0a0c; 
  --bg-card: rgba(10, 10, 12, 0.5);
  --text-primary: #ffffff; 
  --text-secondary: #00e5ff; 
  --text-tertiary: #ff003c;
  --accent: #00ffff; 
  --accent-hover: #ff0055;
  --accent-gradient: linear-gradient(135deg, #00ffff, #ff0055, #b800ff);
  --font-primary: 'Space Mono', monospace; 
  --font-display: 'Orbitron', sans-serif;
  --radius-sm: 0px; 
  --radius-md: 0px; 
  --radius-lg: 0px;
  
  --glass-bg: rgba(5, 5, 5, 0.85);
  --glass-border: rgba(0, 255, 255, 0.3);
  --glass-shadow: 0 0 25px rgba(0, 255, 255, 0.15);
  
  background: linear-gradient(135deg, #000000 0%, #0a0a0c 50%, #1a0014 100%);
  background-size: 200% 200%;
  animation: bgShift 20s ease infinite;
}
body.theme-cybermech .timeline-content, body.theme-cybermech .edu-card, body.theme-cybermech .cert-card, body.theme-cybermech .project-card {
  border: 1px solid var(--accent);
  box-shadow: inset 0 0 15px rgba(0, 255, 255, 0.1);
  backdrop-filter: blur(25px);
}

/* ==========================================================================
   3. INDUSTRIAL AUTOMATION
   ========================================================================== */
body.theme-industrial {
  --bg-primary: #121212; 
  --bg-secondary: #1a1a1a; 
  --bg-card: rgba(26, 26, 26, 0.7);
  --text-primary: #f5f5f5; 
  --text-secondary: #b3b3b3; 
  --text-tertiary: #ff5500;
  --accent: #ff5500; 
  --accent-hover: #ffaa00;
  --accent-gradient: linear-gradient(90deg, #ff5500, #ffaa00);
  --font-primary: 'Inter', sans-serif; 
  --font-display: 'Teko', sans-serif; 
  text-transform: uppercase;
  --radius-sm: 2px; 
  --radius-md: 2px; 
  --radius-lg: 2px;
  
  --glass-bg: rgba(18, 18, 18, 0.95);
  --glass-border: rgba(255, 85, 0, 0.4);
  --glass-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);

  background: repeating-linear-gradient(-45deg, #121212, #121212 15px, #151515 15px, #151515 30px);
}
body.theme-industrial h1, body.theme-industrial h2 {
  letter-spacing: 2px;
}

/* ==========================================================================
   4. ASTRO-ROVER
   ========================================================================== */
body.theme-astrorover {
  --bg-primary: #020617; 
  --bg-secondary: #0f172a; 
  --bg-card: rgba(15, 23, 42, 0.6);
  --text-primary: #f8fafc; 
  --text-secondary: #94a3b8; 
  --text-tertiary: #f59e0b;
  --accent: #f59e0b; 
  --accent-hover: #fbbf24;
  --accent-gradient: linear-gradient(90deg, #f59e0b, #fcd34d, #f59e0b);
  --font-primary: 'Inter', sans-serif; 
  --font-display: 'Space Mono', monospace;
  
  --glass-bg: rgba(2, 6, 23, 0.85);
  --glass-border: rgba(245, 158, 11, 0.2);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.6);
  
  background: radial-gradient(ellipse at bottom, #0f172a 0%, #020617 100%);
  background-attachment: fixed;
}

/* ==========================================================================
   5. NANO-TECH
   ========================================================================== */
body.theme-nanotech {
  --bg-primary: #000c14; 
  --bg-secondary: #002b36; 
  --bg-card: rgba(0, 43, 54, 0.5);
  --text-primary: #e0f2f1; 
  --text-secondary: #80cbc4; 
  --text-tertiary: #4db6ac;
  --accent: #00e676; 
  --accent-hover: #69f0ae;
  --accent-gradient: linear-gradient(135deg, #00e676, #00b0ff);
  --font-primary: 'Rajdhani', sans-serif; 
  --font-display: 'Rajdhani', sans-serif;
  
  --glass-bg: rgba(0, 12, 20, 0.85);
  --glass-border: rgba(0, 230, 118, 0.3);
  --glass-shadow: 0 0 30px rgba(0, 230, 118, 0.1);
  
  background: conic-gradient(from 90deg at 50% 50%, #000c14, #002b36, #001524, #000c14);
  background-size: 200% 200%;
  animation: bgShift 15s ease infinite alternate;
}

/* ==========================================================================
   6. STEAMPUNK
   ========================================================================== */
body.theme-steampunk {
  --bg-primary: #1c110a; 
  --bg-secondary: #3b2313; 
  --bg-card: rgba(59, 35, 19, 0.75);
  --text-primary: #e8d5a5; 
  --text-secondary: #c9a66b; 
  --text-tertiary: #a66d3a;
  --accent: #c9a66b; 
  --accent-hover: #e8d5a5;
  --accent-gradient: linear-gradient(45deg, #a66d3a, #e8d5a5, #c9a66b);
  --font-primary: 'Inter', serif; 
  --font-display: 'Syncopate', sans-serif;
  --radius-sm: 8px; 
  --radius-md: 12px; 
  --radius-lg: 16px;
  
  --glass-bg: rgba(28, 17, 10, 0.9);
  --glass-border: rgba(201, 166, 107, 0.3);
  --glass-shadow: 0 15px 40px rgba(0,0,0,0.8);
  
  background: radial-gradient(circle at center, #2e1c11 0%, #1c110a 100%);
}

/* ==========================================================================
   7. NEON SYNTHWAVE
   ========================================================================== */
body.theme-synthwave {
  --bg-primary: #09021a; 
  --bg-secondary: #1a083a; 
  --bg-card: rgba(26, 8, 58, 0.6);
  --text-primary: #ff00ff; 
  --text-secondary: #00e5ff; 
  --text-tertiary: #ffffff;
  --accent: #ff00ff; 
  --accent-hover: #00ffff;
  --accent-gradient: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff);
  --font-primary: 'Inter', sans-serif; 
  --font-display: 'Orbitron', sans-serif;
  
  --glass-bg: rgba(9, 2, 26, 0.85);
  --glass-border: rgba(255, 0, 255, 0.4);
  --glass-shadow: 0 0 30px rgba(255, 0, 255, 0.3);
  
  background: linear-gradient(to bottom, #09021a, #1a083a, #0d001a);
}
body.theme-synthwave .project-card:hover {
  animation: pulseGlow 2s infinite;
}

/* ==========================================================================
   8. BIO-MECH
   ========================================================================== */
body.theme-biomech {
  --bg-primary: #020a06; 
  --bg-secondary: #051a0f; 
  --bg-card: rgba(5, 26, 15, 0.6);
  --text-primary: #39ff14; 
  --text-secondary: #a3ff99; 
  --accent: #39ff14; 
  --accent-gradient: linear-gradient(135deg, #39ff14, #00aa00);
  --font-primary: 'Share Tech Mono', monospace; 
  --font-display: 'Share Tech Mono', monospace;
  
  --glass-bg: rgba(2, 10, 6, 0.85);
  --glass-border: rgba(57, 255, 20, 0.3);
  --glass-shadow: 0 0 25px rgba(57, 255, 20, 0.1);
  
  background: radial-gradient(circle at 30% 30%, #051a0f 0%, #020a06 100%);
}

/* ==========================================================================
   9. QUANTUM AI
   ========================================================================== */
body.theme-quantum {
  --bg-primary: #000014; 
  --bg-secondary: #0a0029; 
  --bg-card: rgba(10, 0, 41, 0.5);
  --text-primary: #dcb3ff; 
  --text-secondary: #f0e6ff;
  --accent: #aa00ff; 
  --accent-gradient: linear-gradient(45deg, #aa00ff, #00d4ff, #aa00ff);
  --font-display: 'Orbitron', sans-serif;
  
  --glass-bg: rgba(0, 0, 20, 0.85);
  --glass-border: rgba(170, 0, 255, 0.4);
  --glass-shadow: 0 0 35px rgba(0, 212, 255, 0.2);
  
  background: linear-gradient(120deg, #000014, #0a0029, #001020);
  background-size: 200% 200%;
  animation: bgShift 25s ease infinite;
}

/* ==========================================================================
   10. MINIMALIST DARK
   ========================================================================== */
body.theme-minimaldark {
  --bg-primary: #000000; 
  --bg-secondary: #0f0f0f; 
  --bg-card: rgba(15, 15, 15, 0.8);
  --text-primary: #ffffff; 
  --text-secondary: #999999;
  --accent: #ffffff; 
  --accent-gradient: linear-gradient(90deg, #ffffff, #aaaaaa);
  
  --glass-bg: rgba(0,0,0, 0.9);
  --glass-border: rgba(255,255,255,0.08);
  --glass-shadow: 0 20px 40px rgba(0,0,0,1);
  
  background: #000000;
}

/* ==========================================================================
   11. HOLOGRAPHIC
   ========================================================================== */
body.theme-holographic {
  --bg-primary: #e0f2f1; 
  --bg-secondary: #b2dfdb; 
  --bg-card: rgba(255, 255, 255, 0.6);
  --text-primary: #004d40; 
  --text-secondary: #00796b;
  --accent: #00bfa5; 
  --accent-gradient: linear-gradient(135deg, #00bfa5, #1de9b6);
  --font-display: 'Space Mono', monospace;
  
  --glass-bg: rgba(224, 242, 241, 0.7);
  --glass-border: rgba(0, 191, 165, 0.4);
  --glass-shadow: 0 10px 40px rgba(0, 191, 165, 0.15);
  
  background: linear-gradient(45deg, #e0f2f1, #e8eaf6, #e0f2f1);
  background-size: 200% 200%;
  animation: bgShift 15s ease infinite;
}

/* ==========================================================================
   12. MARS COLONY
   ========================================================================== */
body.theme-marscolony {
  --bg-primary: #2d1308; 
  --bg-secondary: #4a2110; 
  --bg-card: rgba(74, 33, 16, 0.6);
  --text-primary: #ffccbc; 
  --text-secondary: #e64a19;
  --accent: #ff5722; 
  --accent-gradient: linear-gradient(90deg, #ff5722, #dd2c00);
  --font-display: 'Teko', sans-serif;
  
  --glass-bg: rgba(45, 19, 8, 0.85);
  --glass-border: rgba(255, 87, 34, 0.3);
  --glass-shadow: 0 15px 35px rgba(0,0,0,0.6);
  
  background: radial-gradient(ellipse at center, #4a2110, #2d1308);
}

/* ==========================================================================
   13. DEEP OCEAN EXPLORER
   ========================================================================== */
body.theme-deepocean {
  --bg-primary: #000d1a; 
  --bg-secondary: #002240; 
  --bg-card: rgba(0, 34, 64, 0.5);
  --text-primary: #48cae4; 
  --text-secondary: #90e0ef;
  --accent: #00b4d8; 
  --accent-gradient: linear-gradient(135deg, #0077b6, #00b4d8, #48cae4);
  
  --glass-bg: rgba(0, 13, 26, 0.85);
  --glass-border: rgba(0, 180, 216, 0.3);
  --glass-shadow: 0 10px 40px rgba(0,0,0,0.5);
  
  background: linear-gradient(180deg, #000d1a, #001a33, #000d1a);
  background-size: 200% 200%;
  animation: bgShift 30s ease infinite;
}

/* ==========================================================================
   14. MECHA ANIME
   ========================================================================== */
body.theme-mecha {
  --bg-primary: #ffffff; 
  --bg-secondary: #f4f4f4; 
  --bg-card: rgba(255, 255, 255, 0.95);
  --text-primary: #111111; 
  --text-secondary: #444444;
  --accent: #d32f2f; 
  --accent-gradient: linear-gradient(90deg, #d32f2f, #1976d2, #fbc02d);
  --font-display: 'Teko', sans-serif;
  
  --glass-bg: rgba(255,255,255, 0.9);
  --glass-border: rgba(211, 47, 47, 0.3);
  --glass-shadow: 0 10px 30px rgba(0,0,0,0.1);
  
  background: repeating-linear-gradient(45deg, #ffffff, #ffffff 20px, #f9f9f9 20px, #f9f9f9 40px);
}
body.theme-mecha .gradient-text {
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   15. MATRIX
   ========================================================================== */
body.theme-matrix {
  --bg-primary: #000000; 
  --bg-secondary: #050505; 
  --bg-card: rgba(0, 15, 0, 0.7);
  --text-primary: #00ff00; 
  --text-secondary: #00cc00;
  --accent: #00ff00; 
  --accent-gradient: linear-gradient(180deg, #00ff00, #003300);
  --font-primary: 'Share Tech Mono', monospace; 
  --font-display: 'Share Tech Mono', monospace;
  
  --glass-bg: rgba(0,0,0, 0.85);
  --glass-border: rgba(0, 255, 0, 0.4);
  --glass-shadow: 0 0 25px rgba(0, 255, 0, 0.15);
  
  background: linear-gradient(180deg, #000000 0%, #001100 50%, #000000 100%);
  background-size: 200% 200%;
  animation: bgShift 10s linear infinite;
}