/* 1. TAILWIND CONFIGURATION */
/* Note: Since you're using the CDN, keep the script tag in your HTML, 
   but move the config object here if using a build tool. 
   Otherwise, this CSS handles the custom classes. */

@layer base {
    :root {
        --brand-primary: #6dec13;
        --brand-accent: #6dec13;
        --brand-dark: #0a0a0a;
        --brand-card: #141414;
        --background-light: #f8f6f6;
        --background-dark: #0a0a0a;
        --card-dark: #161616;
        --border-dark: #262626;
    }

    body {
        background-color: var(--background-dark);
        color: #ffffff;
        overflow-x: hidden;
        font-family: 'Space Grotesk', sans-serif;
    }
}

/* Base Typography Overrides */
h1,
h2,
h3,
h4,
.font-display {
    font-family: 'Public Sans', sans-serif;
}

/* 2. CUSTOM SCROLLBAR */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #222;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6dec13;
}

/* 3. ANIMATIONS */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-reveal {
    animation: fadeIn 0.8s ease-out forwards;
}

.reveal-delay-1 {
    animation-delay: 0.2s;
}

.reveal-delay-2 {
    animation-delay: 0.4s;
}

/* 4. JEK LABS DESIGN SYSTEM CLASSES */
.glass-effect {
    background: rgba(20, 20, 20, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(109, 236, 19, 0.1);
}

.hover-glow:hover {
    box-shadow: 0 0 25px rgba(109, 236, 19, 0.2);
    border-color: #6dec13;
}

.portfolio-card-glow {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.portfolio-card-glow:hover {
    background: radial-gradient(circle at 30% 50%, rgba(109, 236, 19, 0.15) 0%, #0f0f0f 100%);
    box-shadow: 0 0 60px rgba(109, 236, 19, 0.25);
    border-color: rgba(109, 236, 19, 0.6);
    transform: translateY(-6px) scale(1.03);
}

/* Utilities for Tailwind consistency */
.text-primary,
.text-brand,
.text-accent {
    color: #6dec13;
}

.bg-primary,
.bg-brand {
    background-color: #6dec13;
}

.border-brand,
.border-primary {
    border-color: #6dec13;
}

/* Tailwind-style Opacity & Utility Shims */
.border-brand\/30 {
    border-color: rgba(109, 236, 19, 0.3);
}

.border-brand\/20 {
    border-color: rgba(109, 236, 19, 0.2);
}

.border-brand\/10 {
    border-color: rgba(109, 236, 19, 0.1);
}

.hover\:border-brand:hover {
    border-color: #6dec13;
}

.bg-primary\/90:hover {
    background-color: rgba(109, 236, 19, 0.9);
}

.bg-brand\/10 {
    background-color: rgba(109, 236, 19, 0.1);
}

.bg-brand\/5 {
    background-color: rgba(109, 236, 19, 0.05);
}

.shadow-primary\/20,
.shadow-brand\/20 {
    box-shadow: 0 10px 15px -3px rgba(109, 236, 19, 0.2), 0 4px 6px -4px rgba(109, 236, 19, 0.2);
}

.text-transparent {
    color: transparent;
}

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

/* Custom Backgrounds from Config */
.bg-background-dark {
    background-color: var(--background-dark);
}

.bg-background-dark\/80 {
    background-color: rgba(10, 10, 10, 0.8);
}

.border-border-dark {
    border-color: var(--border-dark);
}

/* NAVIGATION GLOW EFFECT */
nav a,
footer a {
    position: relative;
    transition: all 0.3s ease;
}

nav a:hover,
footer a:hover {
    color: #6dec13;
    /* Your Brand Lime */
    text-shadow: 0 0 10px rgba(109, 236, 13, 0.6),
        0 0 20px rgba(109, 236, 13, 0.4);
}

/* Optional: Active Link Indicator */
nav a.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #6dec13;
    box-shadow: 0 0 10px #6dec13;
}

/* Ensure brand buttons always have dark text for legibility */
.bg-brand,
.bg-primary {
    color: #0a0a0a !important;
}

/* Fix for links inside buttons inheriting the wrong color */
a.bg-brand,
a.bg-primary {
    text-decoration: none;
}

/* --- FINAL OVERRIDES --- */

/* Fixes invisible text on brand-colored buttons */
.bg-brand,
.bg-primary,
.btn-primary {
    color: #0a0a0a !important;
}

/* Ensures links inside buttons don't turn blue or white */
a.bg-brand,
a.bg-primary {
    text-decoration: none !important;
    color: #0a0a0a !important;
}

/* Optional: Subtle glow pulse for JEK Labs aesthetic */
.hover-glow:hover {
    box-shadow: 0 0 20px rgba(109, 236, 13, 0.4);
    transition: box-shadow 0.3s ease-in-out;
}