/* Custom overrides — keep minimal, prefer Tailwind classes */

html {
  scroll-behavior: smooth;
}

pre, code {
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Glow utilities ── */
.glow-cyan {
  box-shadow: 0 0 18px rgba(6, 182, 212, 0.25);
}
.glow-cyan-hover {
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.glow-cyan-hover:hover {
  box-shadow: 0 0 28px rgba(6, 182, 212, 0.4);
  border-color: rgba(6, 182, 212, 0.6);
}

.glow-purple-hover {
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.glow-purple-hover:hover {
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.35);
  border-color: rgba(168, 85, 247, 0.55);
}

/* ── Neon text pulse (use sparingly) ── */
@keyframes neon-pulse {
  0%, 100% { text-shadow: 0 0 6px rgba(6, 182, 212, 0.8); }
  50%       { text-shadow: 0 0 14px rgba(6, 182, 212, 1), 0 0 28px rgba(6, 182, 212, 0.4); }
}
.neon-text {
  animation: neon-pulse 3s ease-in-out infinite;
}

/* ── XP bar fill animation ── */
@keyframes xp-fill {
  from { width: 0; }
}
.xp-bar-fill {
  animation: xp-fill 1s ease-out forwards;
}

/* ── Ad slot placeholder ── */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #111827;
  border: 1px dashed #374151;
  border-radius: 0.5rem;
  color: #4b5563;
  font-size: 0.75rem;
  min-height: 90px;
}

/* ── Light theme overrides ── */
html.light body           { background-color: #f8fafc; color: #0f172a; }
html.light .bg-gray-950   { background-color: #f1f5f9 !important; }
html.light .bg-gray-900   { background-color: #ffffff !important; }
html.light .bg-gray-800   { background-color: #e2e8f0 !important; }
html.light .bg-gray-950\/60 { background-color: rgba(226,232,240,0.8) !important; }
html.light .bg-gray-900\/80 { background-color: rgba(255,255,255,0.9) !important; }
html.light .text-gray-100  { color: #0f172a !important; }
html.light .text-gray-200  { color: #1e293b !important; }
html.light .text-gray-300  { color: #334155 !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; }
html.light .border-gray-800 { border-color: #cbd5e1 !important; }
html.light .border-gray-700 { border-color: #e2e8f0 !important; }
html.light .border-cyan-900\/40 { border-color: rgba(8,145,178,0.2) !important; }
html.light .border-cyan-900\/30 { border-color: rgba(8,145,178,0.15) !important; }
html.light pre, html.light code { background-color: #f1f5f9 !important; color: #1e293b !important; }
html.light .ad-slot { background-color: #e2e8f0; border-color: #cbd5e1; color: #94a3b8; }
/* text-white → near-black on light bg */
html.light .text-white          { color: #0f172a !important; }
/* Cyan text — darken for contrast on light bg */
html.light .text-cyan-300       { color: #0891b2 !important; }
html.light .text-cyan-400       { color: #0e7490 !important; }
html.light .text-cyan-500       { color: #0e7490 !important; }
/* Purple text — darken for contrast */
html.light .text-purple-300     { color: #6d28d9 !important; }
html.light .text-purple-400     { color: #6d28d9 !important; }
/* Semi-transparent gray backgrounds (Did You Know? bar) */
html.light .bg-gray-900\/40     { background-color: rgba(226,232,240,0.7) !important; }
html.light .border-gray-800\/30 { border-color: rgba(148,163,184,0.35) !important; }
/* Cyan badge backgrounds + borders (Python on About) */
html.light .bg-cyan-900\/30     { background-color: rgba(207,250,254,0.6) !important; }
html.light .border-cyan-800\/40 { border-color: rgba(8,145,178,0.3) !important; }
/* Purple badge backgrounds + borders (TypeScript on About) */
html.light .bg-purple-900\/30   { background-color: rgba(237,233,254,0.6) !important; }
html.light .border-purple-800\/40 { border-color: rgba(109,40,217,0.3) !important; }
/* Disable neon glow on light bg — jarring on white */
html.light .neon-text           { animation: none; text-shadow: none; }
/* Disable glow box-shadows on light bg */
html.light .glow-cyan           { box-shadow: none; }
html.light .glow-cyan-hover:hover   { box-shadow: 0 0 12px rgba(8,145,178,0.2); border-color: rgba(8,145,178,0.4); }
html.light .glow-purple-hover:hover { box-shadow: 0 0 12px rgba(109,40,217,0.2); border-color: rgba(109,40,217,0.35); }
/* Smooth theme transition */
html { transition: background-color 0.2s ease, color 0.2s ease; }

/* ── Nav highlight pulse (attention cue when user clicks "change in header") ── */
@keyframes nav-highlight-pulse {
  0%   { box-shadow: none; outline: none; }
  20%  { box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.7); outline: 2px solid rgba(6,182,212,0.4); }
  70%  { box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.2); outline: 2px solid rgba(6,182,212,0.1); }
  100% { box-shadow: none; outline: none; }
}
.nav-highlight {
  animation: nav-highlight-pulse 1.8s ease-out forwards;
  border-radius: 9999px;
}

/* ── Scanline overlay for hero (subtle retro-cyber feel) ── */
.scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 0;
}