@tailwind base;
@tailwind components;
@tailwind utilities;

/* Ghost requirements */
.kg-width-wide { position: relative; width: 85vw; left: 50%; transform: translateX(-50%); }
.kg-width-full { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); }
.kg-width-full img { border-radius: 0; width: 100%; }


/* custom */
.brutal-card {
    @apply border-2 border-white/10 transition-all duration-300;
}

body { font-family: 'Space Grotesk', sans-serif; background-color: #030303; color: #fafafa; }
.mono { font-family: 'JetBrains Mono', monospace; }
.text-gradient { background: linear-gradient(to right, #fff 10%, #6366f1 50%, #a855f7 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.glass-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); }
.experience-line::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--accent-color), transparent); }
.project-grid-bg { background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0); background-size: 24px 24px; }
.nav-link { position: relative; transition: all 0.3s; }
.nav-link:hover { color: var(--accent-color); }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--accent-color); transition: width 0.3s;}
.nav-link:hover::after { width: 100%; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.animate-float { animation: float 6s ease-in-out infinite; }