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

body, html {
    margin: 0; padding: 0; font-family: 'Inter', sans-serif;
    background-color: #000;
}

.h-screen { height: 100dvh; }

/* --- TERMINAL STYLES --- */
.font-mono {
    font-family: 'Fira Code', monospace;
    text-shadow: 0 0 8px rgba(51, 255, 51, 0.6);
}

@keyframes crt-flicker {
    0% { opacity: 0.97; }
    50% { opacity: 1; }
    100% { opacity: 0.98; }
}

#terminal-overlay {
    box-shadow: -20px 0 50px rgba(0, 20, 0, 0.5);
    animation: crt-flicker 0.15s infinite;
    will-change: transform;
}

/* Interaction blockers for hidden terminal */
.translate-y-full, .translate-x-full { pointer-events: none; }
#terminal-overlay:not(.translate-y-full):not(.translate-x-full) { pointer-events: auto; }


/* --- NAVIGATION TABS --- */
.nav-tab {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem; text-decoration: none; cursor: pointer;
}

/* Slideshow Logic */
.tab-bg-img, .slideshow-img {
    position: absolute; inset: 0; background-size: cover; background-position: center; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); transform: scale(1.1); filter: brightness(0.6) grayscale(20%); z-index: 0;
}

/* The missing opacity rules for crossfade */
.slideshow-img {
    opacity: 0;
    transition: opacity 1.5s ease-in-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.slideshow-img.active { 
    opacity: 1; 
}

.nav-tab:hover .tab-bg-img, .nav-tab:hover .slideshow-img {
    transform: scale(1); filter: brightness(0.9) grayscale(0%);
}

.overlay {
    position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%); z-index: 1; transition: opacity 0.5s ease;
}

.nav-tab:hover .overlay { opacity: 0.3; }

.tab-content {
    position: relative; z-index: 2; color: white; transition: transform 0.5s ease; transform: translateY(10px);
}
.nav-tab:hover .tab-content { transform: translateY(0); }

.tab-content .num { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.3em; opacity: 0.6; margin-bottom: 0.5rem; }
.tab-content h3 { font-size: 1.5rem; font-weight: 200; letter-spacing: -0.02em; margin: 0; }
.tab-content p { font-size: 12px; font-weight: 200; opacity: 0; transition: opacity 0.5s ease; margin-top: 0.25rem; }
.nav-tab:hover p { opacity: 0.8; }


/* --- EXPERIENCE SIDEBAR --- */
.stack-row-minimal {
    @apply py-2 px-0 border-l border-transparent transition-all duration-300;
}
.stack-row-minimal span {
    @apply text-[11px] text-white/20 font-light tracking-wider;
    font-family: 'JetBrains Mono', monospace;
}
.stack-row-minimal:hover { @apply border-blue-500/40 pl-4; }
.stack-row-minimal:hover span { @apply text-white; }

.exp-item { @apply border-l border-white/5 pl-0 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]; }
.exp-item:hover { @apply border-blue-500/50 pl-12; }


/* --- PROJECTS BENTO --- */
.project-bento-box { @apply relative overflow-hidden rounded-xl border border-white/5 bg-[#0f0f0f] transition-all duration-700; }
.project-bento-box:hover { @apply border-blue-500/40 shadow-2xl shadow-blue-500/10; }
.device-frame-mobile { @apply h-full w-full flex items-center justify-center p-6 bg-gradient-to-br from-[#111] to-black; }
.device-frame-mobile img { @apply h-full w-auto rounded-[2rem] border-[4px] border-[#1a1a1a] shadow-2xl object-cover; }
.device-frame-web { @apply h-full w-full flex items-center justify-center p-6 bg-gradient-to-tr from-[#111] to-black; }
.device-frame-web img { @apply w-full h-auto rounded-lg border-[2px] border-[#1a1a1a] shadow-xl object-cover; }

.bento-img { @apply transition-transform duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] scale-110; }
.project-bento-box:hover .bento-img { @apply scale-100; }

.project-overlay {
    @apply absolute inset-0 z-20 p-8 flex flex-col justify-end bg-gradient-to-t from-black/90 via-black/20 to-transparent transition-opacity duration-500;
}
.project-bento-box:hover .project-overlay { @apply opacity-30; }
.project-overlay .num { @apply text-[9px] font-mono tracking-[0.4em] text-blue-500 mb-2; }
.project-overlay h4 { @apply text-lg font-light tracking-tight text-white; }


/* --- SCROLLBARS --- */
.custom-scrollbar::-webkit-scrollbar, section::-webkit-scrollbar { width: 2px; }
.custom-scrollbar::-webkit-scrollbar-track, section::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb, section::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }


/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    main { overflow-y: auto !important; height: auto !important; flex-direction: column !important; }
    section { height: auto !important; width: 100% !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .nav-tab { min-height: 220px; }
}


/* --- CALENDAR TAB --- */
.calendar-tab-dark { background: #0d0d0d !important; }
.calendar-bg-dark { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; background: #0d0d0d; }
.calendar-accent-bar-vibrant { position: absolute; top: 0; width: 100%; height: 3px; background: #4285f4; box-shadow: 0 0 15px rgba(66, 133, 244, 0.5); transition: height 0.3s ease; }
.calendar-tab-dark:hover .calendar-accent-bar-vibrant { height: 6px; }
#date-glow-large { font-size: 9rem; font-weight: 600; color: rgba(255, 255, 255, 0.03); letter-spacing: -8px; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.calendar-tab-dark:hover #date-glow-large { color: rgba(66, 133, 244, 0.1); transform: scale(1.1); filter: blur(2px); }
.month-sub { position: absolute; top: 60%; font-size: 12px; font-weight: 800; letter-spacing: 0.6em; color: rgba(255, 255, 255, 0.05); }