@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap');

/* -------------------------------------------------------------------------- */
/*                                 CORE RESET                                 */
/* -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
}

/* -------------------------------------------------------------------------- */
/*                           VIBRANT VOID SYSTEM                              */
/* -------------------------------------------------------------------------- */

:root {
  /* BASE: Pure Void (Neutral & Clean) */
  --bg-void: #050505; 
  --bg-dark-matter: #0a0a0f;

  /* ACCENTS: High Vibrancy (Cyberpunk Tones) */
  /* Cyan / Blue Electric */
  --hue-cyan: 190;
  --accent-cyan: hsl(var(--hue-cyan), 95%, 55%);
  --accent-cyan-rgb: 0, 220, 255;
  
  /* Violet / Magenta Neon */
  --hue-violet: 270;
  --accent-violet: hsl(var(--hue-violet), 90%, 60%);
  --accent-violet-rgb: 139, 92, 246;

  /* SEMANTIC TECH COLORS (for bio text highlighting) */
  --color-tech-primary: #38bdf8;    /* sky-400 - for tools like JUnit, Mockito */
  --color-tech-creative: #e879f9;   /* fuchsia-400 - for music production */
  --color-status-available: #10b981; /* emerald-500 - for availability badge */

  /* TEXT */
  --text-main: #f0f0f0;
  --text-dim: rgba(255, 255, 255, 0.6);

  /* COMPATIBILITY for existing classes */
  --accent-rgb: var(--accent-cyan-rgb);
  --secondary-rgb: var(--accent-violet-rgb);
  --c-bg-0: var(--bg-void);
}

body {
  background-color: var(--bg-void);
  color: var(--text-main);
  font-family: "Space Grotesk", sans-serif;
  overflow-x: hidden;
  
  /* Clean Slate: No Global Gradients */
  background-image: none;
  background-attachment: fixed;
}

/* -------------------------------------------------------------------------- */
/*                             NOISE DITHERING                                */
/* -------------------------------------------------------------------------- */
/* Essential for preventing banding in the glows above */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
  opacity: 0.04; /* Optimized for visible dither without "static" feel */
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)"/%3E%3C/svg%3E');
}

/* -------------------------------------------------------------------------- */
/*                            ANIMATIONS & FX                                 */
/* -------------------------------------------------------------------------- */

/* Reveal (Enhanced) */
.reveal-hidden { 
  opacity: 0; 
  transform: translateY(30px); 
  filter: blur(10px); 
  transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1); 
}
.reveal-visible { 
  opacity: 1; 
  transform: translateY(0); 
  filter: blur(0); 
}

/* Hero & Entrance Animations (Handled by Tailwind) */





/* Floating Effects */



/* Glint Effect */
.hover-glint { position: relative; overflow: hidden; }
.hover-glint::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: rotate(30deg);
  transition: 0s;
}
.hover-glint:hover::after {
  left: 120%;
  transition: all 0.7s ease-in-out;
}

/* Magnetic-like Hover for Buttons */
.btn-magnetic {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-magnetic:hover {
  transform: translateY(-5px) scale(1.02);
}







.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.writing-vertical-rl { writing-mode: vertical-rl; text-orientation: mixed; }
.hover\:paused:hover { animation-play-state: paused; }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Section Colors (Hardened for Banding Safety) */
.bg-hero { background: transparent; } /* Let body gradient shine through */
.bg-about { background-color: rgba(5, 5, 7, 0.8); backdrop-filter: blur(10px); }
.bg-work { background-color: rgba(5, 5, 7, 0.9); } 
.bg-services { background-color: rgba(6, 6, 10, 0.95); }
.bg-contact { background-color: var(--bg-void); }

/* Glow Utilities */


/* Reveal Animation Utilities (Cleaned up duplicates) */

/* -------------------------------------------------------------------------- */
/*                           ARSENAL TABS (About Page)                        */
/* -------------------------------------------------------------------------- */

.arsenal-pane {
    display: none;
}

.arsenal-pane.arsenal-pane-active {
    display: block;
    animation: arsenalFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes arsenalFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.arsenal-tab-active {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}