/* ── CSS Variables ──────────────────────────────────── */
:root {
  --cyber-cyan: #00d4ff;
  --cyber-purple: #7c3aed;
  --cyber-blue: #0ea5e9;
  --dark-base: #0a0f1e;
  --dark-card: #0f1629;
  --dark-border: #1e2d4a;
  --text-primary: #f1f5f9;
  --text-muted: #94a3b8;
  --nav-bg: rgba(10, 15, 30, 0.85);
}

/* ── Light Mode Overrides ───────────────────────────── */
html.light {
  --dark-base: #f0f4f8;
  --dark-card: #ffffff;
  --dark-border: #d1dce8;
  --text-primary: #0f172a;
  --text-muted: #475569;
  --nav-bg: rgba(240, 244, 248, 0.92);
}

/* ── Base ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--dark-base);
  color: var(--text-primary);
  font-family: "Inter", system-ui, sans-serif;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* ── Force light bg on ALL elements that use dark colors ── */
html.light body,
html.light main,
html.light section,
html.light footer {
  background-color: var(--dark-base);
  color: var(--text-primary);
}

/* Cards */
html.light .bg-dark-card\/40,
html.light .bg-dark-card\/60,
html.light .bg-dark-card\/80,
html.light .bg-dark-card {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Dark base backgrounds */
html.light .bg-dark-base,
html.light .bg-dark-base\/95 {
  background-color: var(--dark-base) !important;
}

/* Borders */
html.light .border-dark-border {
  border-color: var(--dark-border) !important;
}

/* Text colors */
html.light .text-white {
  color: #0f172a !important;
}
html.light .text-gray-100 {
  color: #1e293b !important;
}
html.light .text-gray-200 {
  color: #334155 !important;
}
html.light .text-gray-300 {
  color: #475569 !important;
}
html.light .text-gray-400 {
  color: #64748b !important;
}
html.light .text-gray-500 {
  color: #94a3b8 !important;
}
html.light .text-gray-600 {
  color: #94a3b8 !important;
}

/* Navigation */
html.light .nav-glass {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--dark-border) !important;
}
html.light .nav-link {
  color: #475569 !important;
}
html.light .nav-link:hover,
html.light .nav-link-active {
  color: var(--cyber-cyan) !important;
}

/* Mobile menu */
html.light #mobile-menu {
  background-color: rgba(240, 244, 248, 0.97) !important;
}

/* Section backgrounds */
html.light .bg-dark-card\/20 {
  background-color: rgba(226, 232, 240, 0.4) !important;
}
html.light .border-y {
  border-color: var(--dark-border) !important;
}
html.light .border-t {
  border-color: var(--dark-border) !important;
}
html.light .border-b {
  border-color: var(--dark-border) !important;
}

/* Cards hover border */
html.light article,
html.light blockquote,
html.light .node-card {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Footer */
html.light footer {
  background-color: var(--dark-base) !important;
  border-color: var(--dark-border) !important;
}

/* Stat card */
html.light .stat-card {
  background: rgba(255, 255, 255, 0.9) !important;
}

/* Global fixed background (canvas orbs grid in base.html) */
html.light #neural-canvas {
  opacity: 0.05 !important;
}

/* Forms */
html.light input,
html.light textarea,
html.light select {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: var(--dark-border) !important;
}
html.light input::placeholder,
html.light textarea::placeholder {
  color: #94a3b8 !important;
}

/* Terminal */
html.light .terminal-window {
  border-color: var(--dark-border) !important;
}
html.light .terminal-bar {
  background-color: #e2e8f0 !important;
}
html.light .terminal-body {
  background-color: #f1f5f9 !important;
}
html.light .terminal-body p {
  color: #475569 !important;
}

/* Skill badge images — keep as-is (they're colored images) */
html.light .skill-badge-img {
  opacity: 0.9;
}

/* Code float boxes */
html.light .code-float {
  background: rgba(248, 250, 252, 0.9) !important;
  border-color: var(--dark-border) !important;
}
html.light .code-float pre {
  color: #334155 !important;
}

/* Scrollbar */
html.light ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
html.light ::-webkit-scrollbar-thumb {
  background: var(--dark-border);
}

/* Gradient text stays same in light mode */
html.light .gradient-text {
  background: linear-gradient(135deg, var(--cyber-cyan), var(--cyber-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--dark-base);
}
::-webkit-scrollbar-thumb {
  background: var(--dark-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cyber-cyan);
}

/* ── Focus ──────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--cyber-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Typography ─────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--cyber-cyan), var(--cyber-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glow ───────────────────────────────────────────── */
.shadow-glow {
  box-shadow:
    0 0 20px rgba(0, 212, 255, 0.15),
    0 0 40px rgba(0, 212, 255, 0.05);
}
.shadow-glow-purple {
  box-shadow:
    0 0 20px rgba(124, 58, 237, 0.15),
    0 0 40px rgba(124, 58, 237, 0.05);
}

/* ── Navigation ─────────────────────────────────────── */
.nav-glass {
  background: rgba(10, 15, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(30, 45, 74, 0.5);
}
html.light .nav-glass {
  background: rgba(248, 250, 252, 0.9);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.nav-link {
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 500;
  transition:
    color 0.2s,
    background-color 0.2s;
}
.nav-link:hover,
.nav-link-active {
  color: #00d4ff;
  background-color: rgba(0, 212, 255, 0.08);
}

/* ── Grid Background ────────────────────────────────── */
.grid-bg {
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* ── Cards ──────────────────────────────────────────── */
.stat-card {
  background: rgba(15, 22, 41, 0.6);
  backdrop-filter: blur(8px);
}
html.light .stat-card {
  background: rgba(255, 255, 255, 0.8);
}

/* ── Slide Up Animation ─────────────────────────────── */
.slide-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.slide-up:nth-child(1) {
  transition-delay: 0s;
}
.slide-up:nth-child(2) {
  transition-delay: 0.1s;
}
.slide-up:nth-child(3) {
  transition-delay: 0.2s;
}
.slide-up:nth-child(4) {
  transition-delay: 0.3s;
}
.slide-up:nth-child(5) {
  transition-delay: 0.4s;
}
.slide-up:nth-child(6) {
  transition-delay: 0.5s;
}

/* ── Fade In ────────────────────────────────────────── */
.fade-in {
  animation: fadeIn 0.8s ease forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Typed Cursor ───────────────────────────────────── */
.typed-cursor {
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ── Line Clamp ─────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Tooltip ────────────────────────────────────────── */
.tooltip {
  position: relative;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 22, 41, 0.95);
  color: #94a3b8;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  white-space: nowrap;
  border: 1px solid var(--dark-border);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 100;
}
.tooltip:hover::after {
  opacity: 1;
}

/* ── Prose ──────────────────────────────────────────── */
.prose-custom h1,
.prose-custom h2,
.prose-custom h3 {
  color: white;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.prose-custom p {
  color: #94a3b8;
  line-height: 1.75;
  margin-bottom: 1rem;
}
.prose-custom code {
  font-family: "JetBrains Mono", monospace;
  background: rgba(0, 212, 255, 0.1);
  color: var(--cyber-cyan);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ── Form (Light Mode) ──────────────────────────────── */
html.light input,
html.light textarea {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
html.light input::placeholder,
html.light textarea::placeholder {
  color: #94a3b8 !important;
}

/* ── Skill Bar ──────────────────────────────────────── */
.skill-bar {
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reduced Motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════
   HERO SECTION ANIMATIONS
══════════════════════════════════════════════════════ */

/* ── Hero Grid ── */
.hero-grid {
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── Hero Orbs ── */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: heroOrbDrift 12s ease-in-out infinite;
}
.hero-orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.13), transparent 70%);
  top: -100px;
  left: -100px;
  animation-delay: 0s;
}
.hero-orb-2 {
  width: 450px;
  height: 450px;
  background: radial-gradient(
    circle,
    rgba(124, 58, 237, 0.13),
    transparent 70%
  );
  bottom: -80px;
  right: -80px;
  animation-delay: 4s;
}
.hero-orb-3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(14, 165, 233, 0.09),
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 2s;
}
@keyframes heroOrbDrift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(25px, -20px) scale(1.06);
  }
  66% {
    transform: translate(-20px, 18px) scale(0.94);
  }
}

/* ── Scanline ── */
.hero-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.06) 3px,
    rgba(0, 0, 0, 0.06) 4px
  );
}

/* ── Agent Nodes ── */
.agent-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: agentFloat 6s ease-in-out infinite;
  z-index: 5;
}
.agent-node:nth-child(2) {
  animation-duration: 7s;
  animation-delay: 1.2s;
}
.agent-node:nth-child(3) {
  animation-duration: 8s;
  animation-delay: 2.1s;
}
.agent-node:nth-child(4) {
  animation-duration: 6.5s;
  animation-delay: 0.8s;
}
.agent-node:nth-child(5) {
  animation-duration: 9s;
  animation-delay: 3s;
}
.agent-node:nth-child(6) {
  animation-duration: 7.5s;
  animation-delay: 1.7s;
}
.agent-node:nth-child(7) {
  animation-duration: 8.5s;
  animation-delay: 2.5s;
}
.agent-node:nth-child(8) {
  animation-duration: 6s;
  animation-delay: 0.4s;
}

@keyframes agentFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.agent-node-ring {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, 0.3);
  animation: nodeRingPulse 2.5s ease-in-out infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes nodeRingPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }
}

.agent-node-core {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(10, 15, 30, 0.85);
  border: 1px solid rgba(0, 212, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 2;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.agent-node:hover .agent-node-core {
  border-color: rgba(0, 212, 255, 0.6);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
}
.agent-node-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  color: rgba(148, 163, 184, 0.7);
  white-space: nowrap;
  position: relative;
  z-index: 2;
  letter-spacing: 0.05em;
}
.agent-node:hover .agent-node-label {
  color: rgba(0, 212, 255, 0.9);
}

/* ── SVG Connection Lines ── */
.svg-connection {
  opacity: 0;
  animation: lineAppear 1s ease forwards;
}
@keyframes lineAppear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Floating Code Snippets ── */
.code-float {
  position: absolute;
  background: rgba(10, 15, 30, 0.75);
  border: 1px solid rgba(30, 45, 74, 0.8);
  border-radius: 10px;
  padding: 10px 14px;
  backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: 5;
  animation: codeFloat 9s ease-in-out infinite;
}
.code-float-1 {
  top: 18%;
  left: 2%;
  animation-delay: 0s;
}
.code-float-2 {
  bottom: 22%;
  right: 2%;
  animation-delay: 3s;
}
.code-float-3 {
  top: 55%;
  left: 1%;
  animation-delay: 5s;
}
@keyframes codeFloat {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  50% {
    transform: translateY(-12px);
    opacity: 0.85;
  }
}

/* ── Status Bar ── */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ── Hide agent nodes on mobile ── */
@media (max-width: 768px) {
  .agent-node {
    display: none !important;
  }
  .code-float {
    display: none !important;
  }
  .hero-orb-1 {
    width: 250px;
    height: 250px;
  }
  .hero-orb-2 {
    width: 220px;
    height: 220px;
  }
}

/* ══════════════════════════════════════════════════════
   MINI TAGS
══════════════════════════════════════════════════════ */
.mini-tag {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 212, 255, 0.08);
  color: var(--cyber-cyan);
  border: 1px solid rgba(0, 212, 255, 0.2);
  font-family: "JetBrains Mono", monospace;
}
.mini-tag-purple {
  background: rgba(124, 58, 237, 0.08);
  color: #a78bfa;
  border-color: rgba(124, 58, 237, 0.2);
}
.mini-tag-blue {
  background: rgba(96, 165, 250, 0.08);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.2);
}
.mini-tag-green {
  background: rgba(52, 211, 153, 0.08);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.2);
}

/* ── Global Orbs (all pages) ── */
.global-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: heroOrbDrift 12s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
.global-orb-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.08), transparent 70%);
  top: -100px;
  left: -100px;
  animation-delay: 0s;
}
.global-orb-2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(
    circle,
    rgba(124, 58, 237, 0.08),
    transparent 70%
  );
  bottom: -80px;
  right: -80px;
  animation-delay: 4s;
}
html.light .global-orb-1 {
  opacity: 0.4;
}
html.light .global-orb-2 {
  opacity: 0.4;
}
html.dark .global-orb-1 {
  opacity: 1;
}
html.dark .global-orb-2 {
  opacity: 1;
}

/* ── Project Modal ─────────────────────────────────── */
#project-modal {
  animation: modalFadeIn 0.2s ease forwards;
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal scrollbar */
#modal-window::-webkit-scrollbar {
  width: 4px;
}
#modal-window::-webkit-scrollbar-track {
  background: transparent;
}
#modal-window::-webkit-scrollbar-thumb {
  background: var(--dark-border);
  border-radius: 2px;
}

/* Long desc formatting */
.project-long-desc strong {
  font-weight: 700;
}

/* Light mode modal */
html.light #modal-window {
  background-color: #ffffff !important;
  border-color: var(--dark-border) !important;
}
html.light #modal-backdrop {
  background-color: rgba(240, 244, 248, 0.85) !important;
}

/* ── Blog Post Modal ───────────────────────────────── */
#post-window::-webkit-scrollbar {
  width: 4px;
}
#post-window::-webkit-scrollbar-track {
  background: transparent;
}
#post-window::-webkit-scrollbar-thumb {
  background: var(--dark-border);
  border-radius: 2px;
}

/* Post body typography */
.post-body h1,
.post-body h2,
.post-body h3 {
  margin-top: 1.5rem;
}

.post-body p {
  margin-bottom: 0.75rem;
}

.post-body code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
}

/* Light mode */
html.light #post-window {
  background-color: #ffffff !important;
  border-color: var(--dark-border) !important;
}
html.light .post-body p,
html.light .post-body h1,
html.light .post-body h2,
html.light .post-body h3 {
  color: #0f172a !important;
}

/* Organization Logo */
/* light mode  → no background  */
html.light .org-logo {
  background: transparent;
}

/* dark mode   → white background */
html.dark .org-logo {
  background: #ffffff;
}