/* Import Google Fonts directly into stylesheet for reliability */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Base Reset & Fonts mapping */
body {
  margin: 0;
  background-color: #060913;
  color: #e2e8f0; /* slate-200 */
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.07) 0%, transparent 45%),
    repeating-linear-gradient(90deg, rgba(99, 102, 241, 0.015) 0px, rgba(99, 102, 241, 0.015) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(0deg, rgba(99, 102, 241, 0.015) 0px, rgba(99, 102, 241, 0.015) 1px, transparent 1px, transparent 40px);
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 50%, rgba(99, 102, 241, 0.01) 50%);
  background-size: 100% 4px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.3;
}

/* Typography styles */
h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
}

/* Monospace overrides for developer elements */
.monospace, 
code, 
pre,
.font-mono,
.typewriter, 
.social-buttons a,
.terminal-header,
.terminal-content,
.dot-container + div,
[class*="font-mono"],
.text-xs,
.text-sm {
  font-family: 'JetBrains Mono', 'Space Mono', monospace !important;
}

/* Base override for white background panels -> transparent glass panels */
.bg-white {
  background-color: transparent !important;
}

/* Navigation bar */
nav.fixed {
  background: rgba(8, 12, 24, 0.7) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(99, 102, 241, 0.15) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* Sections */
section {
  position: relative;
  transition: background-color 0.3s;
  padding: 5rem 1rem;
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
  background-color: transparent !important;
}

/* Terminal Window styling */
.terminal-window {
  background: rgba(13, 20, 38, 0.5) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden;
}

.terminal-header {
  background: rgba(20, 29, 53, 0.8) !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
  padding: 0.75rem 1rem !important;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}

.terminal-header .dot-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.terminal-header .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: transform 0.2s;
}

.terminal-header .dot:hover {
  transform: scale(1.2);
}

.terminal-header .solarized-red { background-color: #ef4444 !important; }
.terminal-header .solarized-yellow { background-color: #f59e0b !important; }
.terminal-header .solarized-green { background-color: #10b981 !important; }

.terminal-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1.5rem !important;
}

/* CLI Input prompts style */
.typewriter {
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden;
  border-right: 0.15em solid #fb923c;
  white-space: nowrap;
  letter-spacing: 0.05em;
  margin: 0 0 1rem 0;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

/* Glassmorphism Cards */
.card-hover {
  background: rgba(13, 20, 38, 0.4) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(99, 102, 241, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card-hover:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  background: rgba(13, 20, 38, 0.65) !important;
  box-shadow: 
    0 15px 40px 0 rgba(0, 0, 0, 0.4),
    0 0 20px rgba(99, 102, 241, 0.15) !important;
}

/* Glow effects & hover states for active items */
.card-hover:hover::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 12px;
  border: 1px solid rgba(244, 114, 182, 0.3);
  z-index: -1;
  pointer-events: none;
  animation: border-pulse 4s infinite;
}

/* Project Cards details */
.project-image {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  background-color: #070a13;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  height: 220px !important;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover .project-image img {
  transform: scale(1.05);
}

/* Tech tag styling */
.flex.flex-wrap.gap-3 span,
#skills span {
  background: rgba(17, 24, 39, 0.6) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
  border-radius: 8px !important;
  color: #94a3b8 !important;
  padding: 0.35rem 0.75rem !important;
  transition: all 0.20s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

.flex.flex-wrap.gap-3 span:hover,
#skills span:hover {
  background: rgba(99, 102, 241, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: #e2e8f0 !important;
  transform: translateY(-1px);
}

/* Contact layout container & items list */
.space-y-4 > div {
  background: rgba(17, 24, 39, 0.4) !important;
  border: 1px solid rgba(99, 102, 241, 0.12) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  transition: all 0.25s ease;
}

.space-y-4 > div:hover {
  background: rgba(17, 24, 39, 0.6) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

/* Mobile responsive menu navigation */
.mobile-menu {
  background: rgba(8, 12, 24, 0.97) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 99;
}

/* Footer styling */
footer {
  background: rgba(8, 12, 24, 0.8) !important;
  border-top: 1px solid rgba(99, 102, 241, 0.15) !important;
}

/* Action Links and Buttons */
.link-glow-blue:hover {
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
  filter: brightness(1.2);
}

.link-glow-green:hover {
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
  filter: brightness(1.2);
}

.link-glow-red:hover {
  text-shadow: 0 0 8px rgba(248, 113, 113, 0.6);
  filter: brightness(1.2);
}

.hover\:text-solarized-blue:hover { color: #38bdf8 !important; }
.hover\:text-solarized-green:hover { color: #34d399 !important; }
.hover\:text-solarized-red:hover { color: #f87171 !important; }

/* Section Title indicator glow */
.mt-2.w-16.h-1.bg-black {
  background: linear-gradient(90deg, #f472b6, #c084fc) !important;
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.5);
  border-radius: 4px;
}

/* Grid & dot structures */
.dot-perspective {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: 
    linear-gradient(90deg, rgba(99, 102, 241, 0.12) 1px, transparent 1px) 0 0 / 25px 25px,
    linear-gradient(0deg, rgba(99, 102, 241, 0.12) 1px, transparent 1px) 0 0 / 25px 25px;
  transform: perspective(300px) rotateX(60deg);
  transform-origin: bottom;
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  opacity: 0.6;
}

/* Modern accent colors mapped from retro solarized rules */
.solarized-blue { color: #38bdf8 !important; text-shadow: 0 0 4px rgba(56, 189, 248, 0.2); } 
.solarized-cyan { color: #22d3ee !important; text-shadow: 0 0 4px rgba(34, 211, 238, 0.2); }
.solarized-green { color: #34d399 !important; text-shadow: 0 0 4px rgba(52, 211, 153, 0.2); }
.solarized-magenta { color: #f472b6 !important; text-shadow: 0 0 4px rgba(244, 114, 182, 0.2); }
.solarized-orange { color: #fb923c !important; text-shadow: 0 0 4px rgba(251, 146, 60, 0.2); }
.solarized-red { color: #f87171 !important; text-shadow: 0 0 4px rgba(248, 113, 113, 0.2); }
.solarized-violet { color: #c084fc !important; text-shadow: 0 0 4px rgba(192, 132, 252, 0.2); }
.solarized-yellow { color: #fbbf24 !important; text-shadow: 0 0 4px rgba(251, 191, 36, 0.2); }

/* Text standard mappings */
.text-black { color: #f1f5f9 !important; }
.text-gray-600, .text-gray-700, .text-gray-800 { color: #94a3b8 !important; }

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #060913;
}
::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
}

/* Animations */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #fb923c }
}

@keyframes border-pulse {
  0% { opacity: 0.3; }
  50% { opacity: 0.8; }
  100% { opacity: 0.3; }
}

@keyframes grid-pulse {
  0% { opacity: 0.4; }
  50% { opacity: 0.8; }
  100% { opacity: 0.4; }
}

@media (max-width: 768px) {
  .dot-perspective { height: 80px; }
  .terminal-content { padding: 1rem !important; }
  h1 { font-size: 1.75rem; }
  .typewriter {
    font-size: 0.9rem;
    white-space: normal;
    animation: none;
    border-right: none;
  }
}