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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
}

.code-font {
    font-family: 'JetBrains Mono', monospace;
}

.gradient-bg {
    background: radial-gradient(circle at top right, rgba(241, 245, 249, 1), rgba(255, 255, 255, 1));
}

html.dark .gradient-bg {
    background: radial-gradient(circle at top right, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 1));
}

/* True Dark Mode Overrides */
html.truedark body {
    background-color: #000000 !important;
    background-image: none !important;
}

html.truedark .bg-white,
html.truedark .bg-slate-100\/80,
html.truedark .dark\:bg-slate-900\/40,
html.truedark .dark\:bg-slate-900\/30,
html.truedark .dark\:bg-slate-900\/50,
html.truedark .dark\:bg-slate-900\/60 {
    background-color: #09090b !important;
}

html.truedark #mobile-menu {
    background-color: #000000 !important;
}

html.truedark .border-slate-200,
html.truedark .border-slate-200\/60,
html.truedark .dark\:border-slate-800,
html.truedark .dark\:border-slate-800\/50,
html.truedark .dark\:border-slate-800\/60,
html.truedark .dark\:border-slate-900 {
    border-color: #18181b !important;
}

html.truedark .hover\:bg-slate-100,
html.truedark .dark\:hover\:bg-slate-800,
html.truedark .hover\:border-slate-300,
html.truedark .dark\:hover\:border-slate-700 {
    background-color: #18181b !important;
    border-color: #27272a !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

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

.animate-fade-in-up {
    animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.group.relative {
    /* Tells the browser engine to skip rendering layout structures outside the viewport */
    content-visibility: auto;
    contain-intrinsic-size: 200px 300px;
    /* Provides baseline proxy sizing for structural scaffolding */
}