html {
    scroll-behavior: smooth;
}

body {
    transition:
        background .3s ease,
        color .3s ease;
}

button {
    transition: all .25s ease;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-none {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Tab content slide up and fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Update Profile Forms and Dropzone Styles */
.form-input, .form-textarea {
    width: 100%;
    background-color: #09090b; /* bg-zinc-950 */
    border: 1px solid #27272a; /* border-zinc-800 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 0.625rem 1rem;
    color: #d4d4d8; /* text-zinc-300 */
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus, .form-textarea:focus {
    border-color: #52525b; /* border-zinc-600 */
    box-shadow: 0 0 0 2px rgba(82, 82, 91, 0.15);
}

.dropzone {
    border: 2px dashed #27272a; /* border-zinc-800 */
    border-radius: 1rem;
    background-color: rgba(24, 24, 27, 0.4); /* bg-zinc-900/40 */
    transition: all 0.3s ease;
    cursor: pointer;
}

.dropzone.dragover {
    border-color: #ffffff; /* border-white */
    background-color: rgba(24, 24, 27, 0.8);
}

.console-terminal {
    background-color: #000000;
    border: 1px solid #27272a;
    border-radius: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
    color: #4ade80; /* text-green-400 */
    padding: 1rem;
    overflow-y: auto;
    max-height: 16rem;
    min-height: 8rem;
    line-height: 1.5;
}

.console-line {
    margin-bottom: 0.25rem;
    opacity: 0;
    animation: consolePrint 0.2s forwards ease-out;
}

@keyframes consolePrint {
    to { opacity: 1; }
}

.terminal-caret {
    display: inline-block;
    width: 8px;
    height: 15px;
    background-color: #4ade80;
    margin-left: 4px;
    animation: blinkCaret 1s step-end infinite;
    vertical-align: middle;
}

@keyframes blinkCaret {
    from, to { background-color: transparent }
    50% { background-color: #4ade80 }
}

/* Search highlight pulse effect */
.search-highlight {
    animation: highlightGlow 2.5s ease-out infinite alternate;
    border-color: rgba(255, 255, 255, 0.8) !important;
}
@keyframes highlightGlow {
    from {
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.1), inset 0 0 4px rgba(255, 255, 255, 0.1);
    }
    to {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.3);
    }
}

/* Light Theme Overrides */
html.light body {
    background-color: #f4f4f5 !important; /* zinc-100 */
    color: #18181b !important; /* zinc-900 */
}

html.light .bg-zinc-950 {
    background-color: #f4f4f5 !important;
}

html.light .bg-zinc-950\/90 {
    background-color: rgba(244, 244, 245, 0.9) !important;
}

html.light .bg-zinc-900\/20, 
html.light .bg-zinc-900\/30, 
html.light .bg-zinc-900\/40, 
html.light .bg-zinc-900\/60 {
    background-color: rgba(228, 228, 231, 0.5) !important;
}

html.light .bg-zinc-900 {
    background-color: #e4e4e7 !important;
}

html.light .border-zinc-800,
html.light .border-zinc-800\/60,
html.light .border-zinc-800\/80 {
    border-color: #d4d4d8 !important;
}

html.light .text-white {
    color: #09090b !important;
}

html.light .text-zinc-200 {
    color: #18181b !important;
}

html.light .text-zinc-300 {
    color: #27272a !important;
}

html.light .text-zinc-400 {
    color: #52525b !important;
}

html.light .text-zinc-500 {
    color: #71717a !important;
}

html.light .tab-button.active {
    color: #09090b !important;
}

html.light #tab-indicator {
    background-color: #09090b !important;
}

html.light .form-input, 
html.light .form-textarea,
html.light input,
html.light textarea {
    background-color: #ffffff !important;
    border-color: #d4d4d8 !important;
    color: #18181b !important;
}

html.light .form-input:focus, 
html.light .form-textarea:focus,
html.light input:focus,
html.light textarea:focus {
    border-color: #a1a1aa !important;
}

html.light .dropzone {
    border-color: #d4d4d8 !important;
    background-color: rgba(228, 228, 231, 0.4) !important;
}

html.light .console-terminal {
    background-color: #ffffff !important;
    border-color: #d4d4d8 !important;
    color: #166534 !important;
}

html.light .terminal-caret {
    background-color: #166534 !important;
}

html.light .search-highlight {
    animation: highlightGlowLight 2.5s ease-out infinite alternate;
    border-color: rgba(9, 9, 11, 0.8) !important;
}

@keyframes highlightGlowLight {
    from {
        box-shadow: 0 0 4px rgba(9, 9, 11, 0.1), inset 0 0 4px rgba(9, 9, 11, 0.1);
    }
    to {
        box-shadow: 0 0 20px rgba(9, 9, 11, 0.4), inset 0 0 8px rgba(9, 9, 11, 0.2);
    }
}

/* Premium Enhancements & Interactive Components */
.border-zinc-850 {
    border-color: #202023;
}

.project-card, .writing-card {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.project-card:hover, .writing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.6);
}

html.light .project-card:hover, html.light .writing-card:hover {
    box-shadow: 0 16px 32px -12px rgba(24, 24, 27, 0.15);
}

/* Theme Toggle Rotate Effect */
#theme-toggle svg {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#theme-toggle:hover svg {
    transform: rotate(30deg) scale(1.1);
}

/* Timeline Slide Up */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.journey-item {
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}
.journey-item:nth-child(1) { animation-delay: 0.1s; }
.journey-item:nth-child(2) { animation-delay: 0.2s; }
.journey-item:nth-child(3) { animation-delay: 0.3s; }
.journey-item:nth-child(4) { animation-delay: 0.4s; }
.journey-item:nth-child(5) { animation-delay: 0.5s; }

/* Modal and Lightbox Animations */
#project-modal, #lightbox-modal {
    transition: opacity 0.3s ease;
    opacity: 0;
}
#project-modal:not(.hidden), #lightbox-modal:not(.hidden) {
    opacity: 1;
    display: flex !important;
}

#project-modal > div {
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#project-modal:not(.hidden) > div {
    transform: translateY(0);
}

/* Scrollbar styles for modal */
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #27272a; /* zinc-800 */
    border-radius: 9999px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #3f3f46; /* zinc-700 */
}

/* Light Mode Overrides for Modal */
html.light #project-modal, html.light #lightbox-modal {
    background-color: rgba(255, 255, 255, 0.85) !important;
}
html.light #project-modal > div {
    background-color: #ffffff !important;
    border-color: #e4e4e7 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}
html.light #modal-project-name, html.light #lightbox-caption {
    color: #18181b !important;
}
html.light #modal-project-desc, html.light #modal-project-problem, html.light #modal-project-solution, html.light #modal-markdown-container {
    color: #3f3f46 !important;
}

/* Book Card styling */
.book-card {
    perspective: 1000px;
}
.book-cover-container {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.book-card:hover .book-cover-container {
    transform: rotateY(-8deg) translateY(-4px);
    box-shadow: 12px 16px 28px -8px rgba(0,0,0,0.5);
}
html.light .book-card:hover .book-cover-container {
    box-shadow: 12px 16px 28px -8px rgba(24, 24, 27, 0.15);
}

/* Gallery image zoom overlay */
.gallery-zoom {
    cursor: zoom-in;
}

/* Markdown parsing typography */
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: #ffffff;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.prose h2 { font-size: 1.25rem; border-bottom: 1px solid #27272a; padding-bottom: 0.25rem; }
.prose h3 { font-size: 1.1rem; }
.prose p { margin-bottom: 1rem; color: #a1a1aa; line-height: 1.6; }
.prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; color: #a1a1aa; }
.prose li { margin-bottom: 0.25rem; }
.prose blockquote { border-left: 4px solid #52525b; padding-left: 1rem; font-style: italic; color: #d4d4d8; margin: 1rem 0; }
.prose code { background: #18181b; padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-family: monospace; font-size: 0.875rem; color: #f4f4f5; }
.prose pre { background: #09090b; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1rem 0; border: 1px solid #27272a; }
.prose pre code { background: transparent; padding: 0; }

html.light .prose h1, html.light .prose h2, html.light .prose h3, html.light .prose h4 { color: #18181b !important; }
html.light .prose h2 { border-color: #e4e4e7 !important; }
html.light .prose p, html.light .prose ul, html.light .prose li { color: #3f3f46 !important; }
html.light .prose blockquote { border-color: #d4d4d8 !important; color: #52525b !important; }
html.light .prose code { background: #f4f4f5 !important; color: #18181b !important; }
html.light .prose pre { background: #fafafa !important; border-color: #e4e4e7 !important; }