/* ==========================================================================
   1. SETUP & GLOBAL STYLES
   ========================================================================== */

.ascii-small {
	display: none;
}
/*
 * A simple CSS Reset to ensure a consistent baseline across browsers.
 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*
 * Smooth scrolling experience for anchor links.
 */
html {
	scroll-behavior: smooth;
}

/*
 * CSS Custom Properties (Variables) for a consistent color palette and easy theme management.
 */
:root {
	--bg-color: #211e1c;
	--text-color: #e0e0e0;
	--accent-color: #d4a373;
	--gray-color: #6c757d;
}

/*
 * Default body styles.
 */
body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: 'Inter', sans-serif;
	line-height: 1.6;
	/* Establishes a new stacking context to contain pseudo-elements and prevent z-index issues. */
	isolation: isolate;
}

/*
 * Custom styling for text selection to match the site's accent color.
 */
::selection {
	background-color: var(--accent-color);
	color: var(--bg-color);
}

/* ==========================================================================
   2. BACKGROUND ELEMENTS & ANIMATIONS
   ========================================================================== */

/* --- Decorative Background "Stains" --- */

/* * Common setup for all stain elements.
 * The width and height are dynamically set by JavaScript to bypass a browser rendering bug
 * with 'vw' units on fixed, animated elements.
 */
.stain-left-large,
.stain-left-small,
.background-stain {
	position: fixed;
	z-index: -1; /* Placed behind all other content. */
	animation: pulse-glow 18s infinite ease-in-out;
}

.stain-left-small {
	top: 8vh;
	left: 20px;
	background-color: #d7ccc8; /* "Milk foam" color */
	transform: rotate(-30deg);
	/* The border-radius trick with 8 values creates an organic, non-circular shape. */
	border-radius: 73% 27% 44% 56% / 60% 49% 51% 40%;
	animation-delay: -9s; /* Offsets the animation to desynchronize it from others. */
	transition: background-color 0.5s ease-in-out;
}

.stain-left-large {
	bottom: 5vh;
	left: -100px;
	background-color: #2d2825; /* "Espresso" color */
	transform: rotate(25deg);
	border-radius: 48% 52% 69% 31% / 30% 61% 39% 70%;
}

.stain-right-large,
.stain-right-small {
	position: fixed;
	z-index: -1;
	animation: pulse-glow 15s infinite ease-in-out;
}

.stain-right-large {
	top: 10%;
	right: -5%;
	background-color: #4a3f35;
	transform: rotate(-15deg);
	border-radius: 65% 35% 44% 56% / 58% 53% 47% 42%;
}

.stain-right-small {
	top: 18%;
	right: 5%;
	transform: rotate(10deg);
	background-color: #2d2825;
	border-radius: 36% 64% 52% 48% / 43% 38% 62% 57%;
	animation-delay: -7s;
}

/* --- Keyframe Animations --- */

@keyframes pulse-glow {
	50% {
		/* The scale transform creates the "pulsing" effect. */
		transform: scale(1.05);
		/* The box-shadow provides the "glow" effect. */
		box-shadow: 0 0 45px rgba(212, 163, 115, 0.2);
	}
}

@keyframes typedjsBlink {
	50% {
		opacity: 0;
	}
}

/* ==========================================================================
   3. LAYOUT & TYPOGRAPHY
   ========================================================================== */

/* --- Main Content Wrapper --- */
.wrapper {
	max-width: 850px;
	margin: 0 auto;
	padding: 2rem;
}

/* --- Typography --- */

h1 {
	font-size: 2.5rem;
	font-weight: 600;
}

h2 {
	color: var(--accent-color);
	margin-bottom: 1.5rem;
}

h3 {
	margin-bottom: 1rem;
}

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

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

blockquote {
	margin: 2rem 0;
	border-left: 3px solid var(--gray-color);
	padding-left: 1.5rem;
	color: var(--text-color);
	font-style: italic;
	transition: all 0.3s ease-in-out;
}

blockquote:hover {
	border-left-color: var(--accent-color);
	color: var(--accent-color);
	transform: scale(1.02); /* Subtle zoom effect on hover. */
}

blockquote a {
	color: var(--text-color);
	text-decoration: underline;
}

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

blockquote cite {
	display: block;
	margin-top: 1rem;
	font-style: normal;
}

strong,
b {
	color: var(--text-color);
	font-weight: 600;
}

/* Styles for inline code snippets. */
code {
	background-color: rgba(255, 255, 255, 0.05);
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	font-family: 'Fira Code', monospace;
}

/* A thematic horizontal rule for separating sections. */
hr {
	border: none;
	height: 1px;
	background-color: var(--gray-color);
	opacity: 0.2;
	margin: 3rem 0;
}

/* ==========================================================================
   4. PAGE SECTIONS & COMPONENTS
   ========================================================================== */

/* --- General Section Styling --- */
main section {
	position: relative; /* Establishes a stacking context for child elements. */
	z-index: 1; /* Ensures sections appear on top of background stains. */
	text-align: left;
}

/* --- Header Component --- */
header {
	margin-top: 1rem;
	margin-bottom: 2rem;
	text-align: left;
}

/* ASCII art styling. */
header .ascii-large {
	font-family: 'Fira Code', monospace;
	color: var(--accent-color);
	margin-bottom: 2rem;
	font-size: 0.9rem;
}

.tldr-section {
	text-align: left;
	margin-bottom: 2rem;
}

/* Shared styles for the tagline and contact link lists. */
.tagline-list,
.contact-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	gap: 0.5rem 1rem;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
	color: var(--gray-color);
}

/* Vertical bar separator for list items. */
.tagline-list li::after,
.contact-links li::after {
	content: '|';
	color: var(--gray-color);
	margin-left: 1rem;
	opacity: 0.5;
}

/* Removes the separator from the last item in the list. */
.tagline-list li:last-child::after,
.contact-links li:last-child::after {
	content: '';
}

.contact-links a {
	color: inherit; /* Links inherit the gray color from the parent list. */
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

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

/* --- Navigation Component --- */
nav ul {
	list-style: none;
	display: flex;
	justify-content: left;
	gap: 2rem;
	margin: 0;
	padding: 0;
}

nav a {
	font-family: 'Fira Code', monospace;
	text-transform: lowercase;
	white-space: normal;
}

/* --- About Me Section --- */
#about-me p {
	margin-bottom: 1.5rem;
}

#about-me p:last-of-type {
	margin-bottom: 0;
}

/* --- Projects & Achievements Lists --- */
/* Shared styles for custom bullet points. */
#projects ul,
#achievements ul {
	list-style: none;
	padding-left: 0;
	margin-top: 1.5rem;
}

#projects ul li,
#achievements ul li {
	padding-left: 25px; /* Creates space for the custom bullet. */
	margin-bottom: 1rem;
	position: relative;
}

/* Custom bullet point '»' using a pseudo-element. */
#projects ul li::before,
#achievements ul li::before {
	content: '»';
	color: var(--accent-color);
	position: absolute;
	left: 0;
	top: 2px;
	font-weight: 600;
}

/* --- Project Cards --- */
.projects-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-top: 2rem;
}

.project-card {
	background-color: var(--bg-color);
	border: 1px solid rgba(224, 224, 224, 0.1);
	border-radius: 8px;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Pushes the link to the bottom of the card. */
.project-card a {
	margin-top: auto;
	align-self: flex-start;
}

/* --- Tech Stack Terminal --- */
.terminal-container {
	background-color: #1a1816;
	border: 1px solid var(--accent-color);
	border-radius: 8px;
	padding: 1.5rem;
	margin-top: 1.5rem;
	overflow: hidden;
}

#terminal-output {
	font-family: 'Fira Code', monospace;
	line-height: 2;
	white-space: pre-wrap; /* Allows text to wrap within the terminal. */
}

.terminal-category {
	color: #26a269; /* Green color for category titles. */
}

/* A CSS filter to convert black SVG icons to the theme's text color. */
.icon,
.tech-icon,
.linkedin-icon {
	width: auto;
	vertical-align: middle;
	filter: invert(91%) sepia(3%) saturate(133%) hue-rotate(314deg) brightness(92%) contrast(93%);
}

/* Default size for most icons */
.icon,
.tech-icon {
	height: 1.1rem;
}

.linkedin-icon {
	height: 1.8em; /* Overrides the default icon height. */
}

.typed-cursor--static {
	animation: none;
}

.loading-cursor {
	opacity: 1;
	animation: typedjsBlink 0.7s infinite;
	font-weight: bold;
}

/* --- Career Timeline Component --- */

.timeline-container {
	position: relative;
	margin-top: 3rem;
}

/* Timeline's central axis */
.timeline-container::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 2px;
	height: 100%;
	background-color: var(--gray-color);
	opacity: 0.3;
}

.timeline-list {
	list-style: none;
	padding: 0;
}

.timeline-item {
	padding: 0 40px;
	position: relative;
	margin-bottom: 50px;
	width: 50%;
	/* Initial settings for GSAP animation */
	opacity: 0;
	transform: translateY(50px);
}
/* Left-side items */
.timeline-item:nth-child(odd) {
	float: left;
	clear: right;
	text-align: right;
}

/* Right-side items */
.timeline-item:nth-child(even) {
	float: right;
	clear: left;
	text-align: left;
}

/* Dots on the timeline */
.timeline-item::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--bg-color);
	border: 3px solid var(--accent-color);
	top: 5px;
	z-index: 1;
}

.timeline-item:nth-child(odd)::after {
	right: -10px; /* Position the dot outside the container */
}

.timeline-item:nth-child(even)::after {
	left: -10px; /* Same for the other side */
}

.timeline-content h3 {
	color: var(--text-color);
	font-weight: 600;
}

.timeline-content p {
	color: var(--gray-color);
	font-size: 0.9rem;
}

/* Clear floats */
.timeline-list::after {
	content: '';
	display: table;
	clear: both;
}

.timeline-item:nth-child(odd)::after {
	--translate-dir: 50%;
}

.timeline-item:nth-child(even)::after {
	--translate-dir: -50%;
}

/* Apply animation only to the last item on the list */
.timeline-item:last-child::after {
	--dot-scale: 1;
	--dot-shadow-opacity: 0;
	transform: scale(var(--dot-scale));
	box-shadow: 0 0 12px rgba(212, 163, 115, var(--dot-shadow-opacity));
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ==========================================================================
   5. COLLAPSIBLE CONTENT ("Read More")
 ========================================================================== */

.toggle-button {
	background: none;
	border: none;
	padding: 0;
	color: var(--text-color);
	font-family: inherit;
	font-size: 1rem;
	line-height: inherit;
	cursor: pointer;
	display: inline-block;
	margin-bottom: 1.5rem;
}

.toggle-button .arrow {
	display: inline-block;
	transition: transform 0.3s ease-in-out;
}

.collapsible-content {
	margin-bottom: 1.5rem;
	max-height: 50px;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to bottom, black 10%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 10%, transparent 100%);
	transition: max-height 0.7s ease-in-out, -webkit-mask-image 0.5s ease-in-out, mask-image 0.5s ease-in-out;
}

.collapsible-content.is-open {
	max-height: 1000px; /* A large enough value to fit content */
	-webkit-mask-image: none;
	mask-image: none;
}
.collapsible-content.is-open::after {
	opacity: 0;
}

.toggle-button.is-open .arrow {
	transform: rotate(180deg);
}

/* ==========================================================================
   6. FOOTER
 ========================================================================== */

footer {
	text-align: left;
	padding: 0.2rem 0 2rem;
	margin-top: 0.2rem;
	font-size: 0.9rem;
	color: var(--gray-color);
}

footer p {
	margin: 0;
	line-height: 1.8;
}

footer a {
	color: var(--gray-color);
	text-decoration: none;
}

footer a:hover {
	color: var(--text-color);
}

/* ==========================================================================
   7. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 1200px) {
	.stain-left-small {
		background-color: #2d2825; /* "Espresso" color */
	}
}

@media (max-width: 768px) {
	.wrapper {
		padding: 1.5rem;
	}

	h1 {
		font-size: 1.8rem;
	}

	/* --- Header & Lists on Mobile --- */
	header,
	.tldr-section {
		text-align: left;
	}

	.tagline-list,
	.contact-links {
		justify-content: left;
		gap: 0.5rem 0.8rem;
	}

	.tagline-list {
		font-size: 0.8rem;
	}

	/* --- Navigation on Mobile --- */
	nav ul {
		flex-direction: column;
		align-items: left;
		gap: 1rem;
	}

	/* --- ASCII Art Swap --- */
	.ascii-large {
		display: none;
	}

	.ascii-small {
		display: block;
		font-size: 0.7rem;
		text-align: left;
		font-family: 'Fira Code', monospace;
		color: var(--accent-color);
	}

	/* --- Projects Section on Mobile --- */
	.projects-grid {
		grid-template-columns: 1fr; /* Stacks project cards vertically. */
	}

	/* --- Career Timeline on Mobile --- */
	.timeline-container::before {
		left: 20px;
		transform: translateX(0);
	}

	.timeline-item,
	.timeline-item:nth-child(odd),
	.timeline-item:nth-child(even) {
		width: 100%;
		float: none;
		text-align: left;
		padding-left: 50px;
		padding-right: 15px;
		/* Reset animation starting point for consistency */
		transform: translateY(30px);
	}

	.timeline-item::after,
	.timeline-item:nth-child(odd)::after,
	.timeline-item:nth-child(even)::after {
		left: 20px;
		transform: translateX(-50%);
	}

	/* --- General section alignment on mobile --- */
	#about-me,
	#projects,
	#achievements,
	#tech-stack,
	#career-path,
	footer {
		text-align: left;
	}

	/* Hide timeline dots as they don't align well in the mobile layout */
	.timeline-item::after {
		display: none;
	}
}