/* --- CSS Variables and General Setup --- */
:root {
/* Dark Theme: "Slate & Persimmon" (Default) */
--bg-color: #161B22;
--primary-text: #C9D1D9;
--primary-text-rgb: 201, 209, 217;
--secondary-text: #8B949E;
--card-bg: #21262D;
--card-bg-rgb: 33, 38, 45; /* RGB version for transparency */
--border-color: #30363D;
--accent-color: #FF6B4A;
--accent-hover: #f5785c;
--logo-bg: #C9D1D9;
--logo-text: #161B22;
/* Custom property for h2 animation */
--before-width: 0px;
}

body.light-theme {
/* Light Theme: "Slate & Persimmon" */
--bg-color: #F6F8FA;
--primary-text: #24292F;
--primary-text-rgb: 36, 41, 47;
--secondary-text: #57606A;
--card-bg: #FFFFFF;
--card-bg-rgb: 255, 255, 255; /* RGB version for transparency */
--border-color: #D0D7DE;
--accent-color: #F78166;
--accent-hover: #e76143;
--logo-bg: #24292F;
--logo-text: #F6F8FA;
}

html, body {
height: 100%;
overflow: hidden; /* Prevent body from scrolling */
cursor: none;
}

body {
background-color: var(--bg-color);
color: var(--primary-text);
font-family: 'Space Grotesk', sans-serif;
margin: 0;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Generative Background Canvas --- */
#generative-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}

a, button {
cursor: none;
}

.portfolio-wrapper {
display: flex;
height: 100vh;
}

.left-sidebar {
width: 100px;
background-color: transparent; /* Make sidebar background transparent */
border-right: 1px solid var(--border-color);
flex-shrink: 0;
display: flex;
justify-content: center;
padding: 2rem 0;
box-sizing: border-box;
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 100;
transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sidebar-content {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
}

.logo-icon .logo-bg {
fill: var(--logo-bg);
transition: fill 0.3s ease;
}
.logo-icon .logo-text {
fill: var(--logo-text);
transition: fill 0.3s ease;
}

.logo-icon {
margin-bottom: 3rem;
}

.sidebar-nav {
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
}

.sidebar-nav ul {
list-style: none;
padding: 0;
margin: 0;
}

.sidebar-nav li {
margin-bottom: 2rem;
}

.sidebar-nav a {
color: var(--secondary-text);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 500;
padding: 0.5rem;
border-radius: 8px;
transition: color 0.3s ease, background-color 0.3s ease;
}

.sidebar-nav a:hover {
color: var(--primary-text);
background-color: var(--card-bg);
}

.sidebar-nav a.active {
color: var(--primary-text);
background-color: var(--card-bg);
}

.sidebar-nav a.active svg {
stroke: var(--accent-color);
}

.sidebar-nav svg {
width: 28px;
height: 28px;
flex-shrink: 0;
transition: stroke 0.3s ease;
}

.sidebar-footer {
margin-top: auto;
}

.right-sidebar {
width: 100px;
background-color: transparent; /* Make sidebar background transparent */
border-left: 1px solid var(--border-color);
display: flex;
justify-content: center;
align-items: center;
position: fixed;
right: 0;
top: 0;
height: 100%;
z-index: 100;
transition: background-color 0.3s ease, border-color 0.3s ease;
}

.right-sidebar .social-links {
display: flex;
flex-direction: column;
gap: 2rem;
}

.social-links a {
color: var(--secondary-text);
display: inline-block;
animation: float 6s ease-in-out infinite; /* Add floating animation */
}

.social-links a:nth-child(2) {
animation-delay: 1.5s; /* Delay the second icon's animation */
}

@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}

.social-links a:hover {
color: var(--primary-text);
}

.social-links svg {
width: 24px;
height: 24px;
fill: currentColor;
}

.main-content {
margin-left: 100px;
margin-right: 100px;
width: calc(100% - 200px);
overflow-y: auto;
height: 100vh;
-ms-overflow-style: none;
scrollbar-width: none;
}
.main-content::-webkit-scrollbar {
display: none;
}


.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
}

section {
padding: 6rem 0;
border-bottom: 1px solid var(--border-color);
transition: border-color 0.3s ease;
}

h1, h2, h3, h4 {
margin-top: 0;
font-weight: 700;
}

h2 {
font-size: 3.5rem;
margin-bottom: 4rem;
text-align: center;
position: relative;
overflow: hidden;
}

h2::before {
content: '';
position: absolute;
top: -1.5rem;
left: 50%;
transform: translateX(-50%);
width: var(--before-width, 0px);
height: 4px;
background-color: var(--accent-color);
border-radius: 2px;
}

.title-text {
display: block;
}

a {
color: var(--accent-color);
text-decoration: none;
transition: color 0.3s ease;
}

a:hover {
color: var(--accent-hover);
}

.btn {
position: relative;
overflow: hidden;
display: inline-block;
background-color: var(--accent-color);
color: #fff;
padding: 0.8rem 1.8rem;
border-radius: 8px;
font-weight: 500;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}

.btn:hover {
background-color: var(--accent-hover);
color: #fff;
box-shadow: 0 5px 15px rgba(255, 107, 74, 0.2);
}

.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-25deg);
transition: left 0.7s ease-in-out;
}

.btn:hover::before {
left: 150%;
}


.progress-bar-container {
position: fixed;
top: 0;
left: 100px;
width: calc(100% - 200px);
height: 4px;
z-index: 2000;
}
.progress-bar {
height: 100%;
background-color: var(--accent-color);
width: 0%;
}

/* --- HERO SECTION --- */
#hero {
position: sticky;
top: 0;
height: 100vh;
z-index: 1;
padding: 0;
border-bottom: none;
overflow: hidden;
perspective: 1000px;
display: flex; /* Changed for new layout */
justify-content: center;
align-items: center;
}

.hero-content-wrapper {
position: relative;
width: 100%;
max-width: 1200px; /* Max width for content */
padding: 0 2rem;
z-index: 10;
transform-style: preserve-3d;
display: flex; /* Flex to position children */
flex-direction: column;
align-items: center;
}

.hero-main-heading {
text-align: center;
}

.hero-main-heading .heading-line {
font-size: clamp(3rem, 10vw, 7rem); /* Adjusted size */
font-weight: 700;
line-height: 1.1;
margin: 0;
text-transform: uppercase;
display: block; /* Each on a new line */
}

.hero-main-heading .accent-text {
color: var(--accent-color);
}

.hero-tagline {
font-size: 1.2rem;
color: var(--secondary-text);
max-width: 450px;
text-align: center;
margin-top: 1.5rem;
}

/* --- Marquee Styles --- */
.marquee-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 2rem 0;
background: linear-gradient(to top, var(--bg-color) 30%, transparent);
z-index: 5;
pointer-events: none;
user-select: none;
}
.marquee-content {
display: flex;
white-space: nowrap;
animation: marquee-scroll 45s linear infinite;
}
.marquee-content span {
font-size: 1.5rem;
font-weight: 500;
text-transform: uppercase;
color: var(--secondary-text);
}
.marquee-content .separator {
color: var(--accent-color);
margin: 0 2rem;
}
.marquee-content .highlight-text {
color: var(--accent-color);
font-style: italic;
}

@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

/* --- OTHER SECTIONS --- */

#about p {
font-size: 1.2rem;
line-height: 1.8;
}

#work {
padding: 6rem 0 0 0;
transition: background-color 0.5s ease;
position: relative;
z-index: 2;
background-color: var(--bg-color);
}
.sticky-container {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.horizontal-track {
height: 100%;
display: flex;
align-items: center;
will-change: transform;
}
.project-card-large {
width: calc(100vw - 200px);
height: 100vh;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.project-card-overlay h3 {
font-size: 3.5rem;
}
.project-card-overlay p {
font-size: 1.4rem;
}

.experience-details h3 {
font-size: 1.6rem;
}
.experience-details .description {
font-size: 1.1rem;
}

.blog-content h3 {
font-size: 1.5rem;
}
.blog-content p {
font-size: 1.1rem;
}

/* --- Get in Touch Section --- */
#contact {
text-align: center;
padding: 8rem 0;
}
#contact .container {
max-width: 100%;
}
.contact-prompt {
font-size: 1.4rem;
color: var(--secondary-text);
margin-bottom: 1rem;
}
.contact-heading {
font-size: clamp(3rem, 10vw, 8rem);
text-transform: uppercase;
line-height: 1;
margin-bottom: 3rem;
}
.contact-heading .accent-text {
color: var(--accent-color);
}


/* --- All other original styles from this point are preserved --- */
#experience {
max-width: 800px;
margin: 0 auto;
}
.experience-list .experience-item {
display: flex;
justify-content: space-between;
gap: 2rem;
padding: 2rem 0;
border-bottom: 1px solid var(--border-color);
transition: border-color 0.3s ease;
}
.experience-list .experience-item:last-child {
border-bottom: none;
}

.experience-details .company-date {
color: var(--secondary-text);
margin-bottom: 1rem;
}

.company-logo {
flex-shrink: 0;
}
.company-logo img {
width: 100px;
height: auto;
filter: var(--logo-filter, none);
}
body.light-theme .company-logo img {
--logo-filter: invert(1);
}

.project-visual-bg {
position: absolute;
top: 0;
left: -10%;
width: 120%;
height: 100%;
background-size: cover;
background-position: center;
will-change: transform;
z-index: 1;
}
.project-card-large::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
z-index: 2;
}
.project-card-overlay {
position: relative;
z-index: 3;
text-align: center;
color: white;
}
.project-progress-container {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 4;
}
.progress-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--border-color);
transition: background-color 0.3s ease;
}
.progress-dot.active {
background-color: var(--accent-color);
}

.neural-network-container {
width: 100%;
height: 70vh;
min-height: 600px;
margin-top: 2rem;
}
#neural-network-canvas {
width: 100%;
height: 100%;
display: block;
}

.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.blog-card-small {
background-color: var(--card-bg);
border-radius: 12px;
border: 1px solid var(--border-color);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.blog-card-small:hover {
transform: translateY(-5px);
box-shadow: 0 0 25px 0px rgba(255, 107, 74, 0.15);
}
.blog-thumbnail {
width: 100%;
aspect-ratio: 16 / 9;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
color: var(--secondary-text);
border-bottom: 1px solid var(--border-color);
transition: border-color 0.3s ease;
}
.blog-content {
padding: 1.5rem;
}

footer {
text-align: center;
padding: 2rem 0;
color: var(--secondary-text);
font-size: 0.9rem;
border-top: 1px solid var(--border-color);
transition: border-color 0.3s ease;
}

.theme-toggle {
background: none;
border: 1px solid var(--border-color);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: var(--secondary-text);
transition: color 0.3s ease, border-color 0.3s ease;
}
.theme-toggle:hover {
color: var(--primary-text);
}
.theme-toggle .sun-icon { display: none; }
.theme-toggle .moon-icon { display: block; }
body.light-theme .theme-toggle .sun-icon { display: block; }
body.light-theme .theme-toggle .moon-icon { display: none; }

.cursor-dot {
width: 8px;
height: 8px;
background-color: var(--accent-color);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 9999;
pointer-events: none;
transition: transform 0.2s ease-out;
}
.cursor-outline {
width: 40px;
height: 40px;
border: 2px solid var(--accent-color);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 9998;
pointer-events: none;
transition: all 0.3s ease-out;
}
.cursor-outline.grow {
transform: translate(-50%, -50%) scale(1.5);
background-color: rgba(255, 107, 74, 0.1);
}

/* --- Responsive Design --- */
@media (max-width: 1200px) {
.left-sidebar, .right-sidebar { display: none; }
.portfolio-wrapper { display: block; }
.main-content { margin: 0; width: 100%; }
.progress-bar-container { width: 100%; left: 0; }
.project-card-large { width: 100vw; }
}

@media (max-width: 768px) {
h2 { font-size: 2.5rem; }
.hero-background-text { font-size: 25vw; }
.marquee-content span { font-size: 1.2rem; }
.hero-side-text { left: -3vw; bottom: 15vw; }
.hero-main-heading { right: 2rem; }
.contact-heading { font-size: clamp(2.5rem, 12vw, 6rem); }
}