html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Prevents sections from hugging the very top of the screen */
}

:root {
    --bg-color: #f8fafc; 
    --text-main: #0f172a;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    --nav-link: #64748b;
    --nav-link-hover: #0f172a;
}

.dark {
    --bg-color: #030303; 
    --text-main: #fafafa;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 25px 50px -12px rgba(249, 115, 22, 0.15);
    --nav-link: #71717a;
    --nav-link-hover: #ffffff;
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    scroll-behavior: smooth; 
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(60px, -120px) scale(1.2); }
    66% { transform: translate(-40px, 60px) scale(0.8); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 8s infinite alternate ease-in-out; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
    .marquee-container:hover .animate-marquee {
        animation-play-state: paused;
    }
}

.glass { 
    background: var(--glass-bg); 
    border: 1px solid var(--glass-border); 
    backdrop-filter: blur(16px); 
    box-shadow: var(--glass-shadow);
    transition: all 0.4s ease;
}

.bento-item { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.bento-item:hover { transform: translateY(-8px); }
.dark .bento-item:hover { border-color: #f97316; box-shadow: 0 20px 40px -15px rgba(249, 115, 22, 0.3); } 
:not(.dark) .bento-item:hover { border-color: #2563eb; box-shadow: 0 20px 40px -15px rgba(37, 99, 235, 0.2); }

.nav-link { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--nav-link); transition: 0.3s; cursor: pointer; display: flex; align-items: center; white-space: nowrap; }
.nav-link:hover { color: var(--nav-link-hover); }

.timeline-line { width: 2px; }
.dark .timeline-line { background: linear-gradient(to bottom, transparent, #f97316, #f97316, transparent); }
:not(.dark) .timeline-line { background: linear-gradient(to bottom, transparent, #2563eb, #2563eb, transparent); }

.timeline-dot { width: 16px; height: 16px; border-radius: 50%; z-index: 10; transition: all 0.4s ease; }
.dark .timeline-dot { background: #030303; border: 4px solid #f97316; box-shadow: 0 0 10px rgba(249, 115, 22, 0.5); }
:not(.dark) .timeline-dot { background: #f8fafc; border: 4px solid #2563eb; box-shadow: 0 0 10px rgba(37, 99, 235, 0.3); }

.skill-icon { filter: grayscale(100%) opacity(0.7); transition: all 0.3s ease; }
.skill-icon:hover { filter: grayscale(0%) opacity(1); transform: scale(1.15); }
.dark .invert-dark { filter: invert(1) grayscale(100%) opacity(0.7); }
.dark .invert-dark:hover { filter: invert(1) grayscale(0%) opacity(1); }

/* Custom utility classes to handle iOS safe areas */
.pb-safe { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
.pt-safe { padding-top: max(0.75rem, env(safe-area-inset-top)); }

/* Customizing Quill Toolbar to match Dark/Light modes */
.dark .ql-toolbar.ql-snow { border-color: rgba(255,255,255,0.05); }
.dark .ql-toolbar.ql-snow .ql-stroke { stroke: #fff; }
.dark .ql-toolbar.ql-snow .ql-fill { fill: #fff; }

/* --- QUILL EDITOR OVERRIDES (GLASSMORPHISM) --- */
.ql-toolbar.ql-snow, .ql-container.ql-snow {
    border: none !important;
    font-family: 'Inter', sans-serif;
}
.ql-toolbar.ql-snow {
    border-bottom: 1px solid var(--glass-border) !important;
    padding: 12px 16px !important;
    background: transparent;
    
    /* NEW: Pushes the toolbar buttons to the right */
    display: flex !important;
    justify-content: flex-end !important;
}
.ql-editor {
    font-family: 'Inter', sans-serif;
    padding: 16px !important; /* Matches Tailwind p-4 */
}
.ql-editor.ql-blank::before {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    color: #94a3b8; /* Tailwind slate-400 */
    left: 16px !important;
}
.dark .ql-editor.ql-blank::before {
    color: #a1a1aa; /* Tailwind zinc-400 */
}
.dark .ql-toolbar.ql-snow .ql-stroke {
    stroke: #a1a1aa;
}
.dark .ql-toolbar.ql-snow .ql-fill {
    fill: #a1a1aa;
}