/* Moved from inline <style> in index.html */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--jet-black: #060606;
	--ink-black: #0D1821;
	--vivid-blue: #058ED9;
	--cyan: #00D6FF;
	--off-white: #FDFEFE;
	--light-gray: #E4E7EC;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Plus Jakarta Sans', sans-serif;
	background-color: var(--jet-black);
	color: var(--off-white);
	overflow-x: hidden;
}

/* Header */
header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 80px;
	background-color: var(--jet-black);
	z-index: 50;
	padding: 0 132px;
}

.header-content {
	max-width: 1440px;
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo-section {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: all 0.3s;
	text-decoration: none;
}

.logo-section:hover .logo {
	color: var(--vivid-blue);
}

.logo-section:hover .logo-text {
	background: linear-gradient(90deg, var(--vivid-blue), var(--cyan));
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: gradient-move 2s ease infinite;
}

.logo {
	width: 32px;
	height: 32px;
	color: var(--off-white);
	transition: all 0.3s;
	fill: currentColor;
}

.logo-text {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 24px;
	color: var(--off-white);
	transition: all 0.3s;
}

.nav-section {
	display: flex;
	gap: 32px;
}

.nav-buttons {
	display: flex;
	gap: 32px;
	padding-top: 4px;
}

.nav-btn {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 22px;
	color: var(--off-white);
	background: none;
	border: none;
	cursor: pointer;
	position: relative;
	padding-bottom: 4px;
}

.nav-btn::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(to right, var(--vivid-blue), var(--cyan));
	transition: width 0.3s;
}

.nav-btn:hover::after {
	width: 100%;
}

.lang-toggle {
	border: 2px solid var(--off-white);
	display: flex;
}

.lang-toggle {
	display: flex;
	position: relative;
	gap: 0;
}

.lang-btn {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 16px;
	padding: 4px 16px;
	background: transparent;
	color: var(--off-white);
	border: 2px solid var(--off-white);
	cursor: pointer;
	transition: all 0.3s;
	position: relative;
	z-index: 2;
}

.lang-btn.active {
	background: transparent;
	color: var(--off-white);
}

.lang-slider {
	position: absolute;
	height: 100%;
	width: 50%;
	background: linear-gradient(90deg, var(--vivid-blue), var(--cyan));
	border-radius: 0;
	top: 0;
	left: 0;
	z-index: 1;
	transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Move slider to the right when FR is active (second button) */
#lang-fr.active ~ .lang-slider {
	left: 50%;
}

/* Ensure the border for active button is visible over the slider */
.lang-btn.active {
	border-color: var(--off-white);
}

/* Section Navigation */
.section-nav {
	position: fixed;
	left: 46px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 40;
	display: none;
}

.section-nav.visible {
	display: block;
}

.section-nav-btn {
	border: 2px solid var(--off-white);
	padding: 32px 8px;
	background: var(--jet-black);
	cursor: pointer;
	transition: border-color 0.3s;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: var(--off-white);
	writing-mode: vertical-lr;
	transform: rotate(180deg);
}

.section-nav-btn:hover,
.section-nav-btn.active {
	border-color: var(--vivid-blue);
}



/* Carousel Navigation */
.carousel-nav {
	/* Positioned absolutely inside .hero-media, to the right of carousel image */
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: calc(100% + 56px);
	right: auto;
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Make nav span the same height as hero image for even spacing */
	height: 256px;
	justify-content: space-between;
	padding: 8px 0;
	pointer-events: auto;
}

.carousel-arrow {
	width: 32px;
	height: 32px;
	border: 2px solid var(--off-white);
	border-radius: 50%;
	background: var(--jet-black);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.3s;
}

.carousel-arrow:hover:not(:disabled) {
	border-color: var(--vivid-blue);
}

.carousel-arrow:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.carousel-arrow svg {
	width: 32px;
	height: 32px;
	stroke: var(--off-white);
	fill: none;
	stroke-width: 2;
}

/* Flip arrow visuals: ensure the "up" control shows the backwards/previous glyph
   and the "down" control shows the forward/next glyph. Swap previous rotation. */
.carousel-arrow.up svg {
	transform: rotate(180deg);
}

.carousel-arrow.down svg {
	transform: rotate(0deg);
}

.carousel-dots {
	/* kept for backward compatibility in case any scripts reference it, but
	   the dots are now direct children of .carousel-nav. Keep empty styles. */
	display: none;
}

.carousel-dot {
	width: 32px;
	height: 32px;
	border: 2px solid var(--off-white);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.3s;
}

.carousel-dot:hover {
	border-color: var(--vivid-blue);
}

.carousel-dot.active {
	/* keep background transparent; show a small white center dot instead */
	background: transparent;
}

.carousel-dot.active::after {
	content: '';
	width: 12px;
	height: 12px;
	background: var(--off-white);
	border-radius: 50%;
	display: block;
}

/* Hero Section */
.hero {
	/* keep space for the fixed header and allow content to flow
	   .hero-inner centers content and provides consistent page gutters */
	min-height: 829px;
	/* much larger top offset so the title and media sit well below the fixed header */
	padding-top: 204px;
	position: relative;
	overflow: hidden;
}

/* Centered inner grid so hero content shares the same page gutters as other sections */
.hero-inner {
	margin: 0 132px;
	display: grid;
	grid-template-columns: 1fr auto; /* title on left, media on right */
	align-items: start;
	column-gap: 40px;
}

.hero-pattern {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	pointer-events: none;
	background-image: url('Bckgrnd.png');
	background-size: cover;
	background-position: center;
}

.hero-title {
	/* flow with the page grid; left gutter comes from .hero-inner padding */
	position: relative;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700;
	font-size: 96px;
	color: var(--off-white);
	line-height: 1.1;
	white-space: pre-line;
	z-index: 10;
	transition: opacity 0.5s;
	/* prevent the large title from overflowing into the image/carousel area */
	max-width: 640px;
	word-wrap: break-word;
	margin: 0; /* reset any browser margin */
	align-self: center; /* centered in height compared to media */
}

/* media wrapper that holds the hero image and the carousel nav so the
   nav can be positioned relative to the image on wide screens and
   reflow under the image on small screens */
.hero-media {
	/* sits in the right column of .hero-inner; keep relative positioning
	   so .carousel-nav can be absolute inside it */
	position: relative;
	width: auto;
	height: auto;
	z-index: 10;
}

.hero-image-container {
	/* placed inside .hero-media and sized to match project cards (400x400)
	   so hero slides visually align with grid items below */
	position: relative;
	width: 400px;
	height: 400px;
	border: 2px solid var(--off-white);
	overflow: hidden;
}

.hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease, opacity 0.5s;
	position: relative;
	z-index: 1; /* sits above the animated stroke pseudo-element */
}

/* Class-based fade so we don't rely on inline styles (which block :hover rules)
   .fade-out => invisible, .fade-in => visible (used when switching slides) */
.hero-image.fade-out { opacity: 0; }
.hero-image.fade-in { opacity: 1; }

.hero-banner {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(to bottom, transparent, var(--jet-black));
}

.scroll-down {
	position: absolute;
	left: 49px;
	top: 16px;
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.scroll-down circle {
	stroke: var(--off-white);
	transition: stroke 0.3s;
}

.scroll-down:hover circle {
	stroke: var(--vivid-blue);
}

/* Portfolio Section */
.portfolio {
	position: relative;
	padding: 96px 0;
	min-height: 100vh;
}

.filter-container {
	max-width: 1440px;
	margin: 0 auto 32px;
	padding: 0 132px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.filter-btn {
	border: 2px solid var(--off-white);
	padding: 16px;
	height: 32px;
	background: transparent;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: var(--off-white);
	cursor: pointer;
	white-space: nowrap;
	display: flex;
	align-items: center;
	transition: all 0.3s;
}

.filter-btn:hover {
	border-color: var(--vivid-blue);
}

.filter-btn.active {
	border-color: var(--vivid-blue);
	background: rgba(5, 142, 217, 0.1);
}

.project-grid {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 132px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.project-card {
	aspect-ratio: 1/1;
	border: 2px solid var(--off-white);
	cursor: pointer;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	transition: border-color 0.3s;
	overflow: hidden;
	padding: 32px;
	text-decoration: none;
	color: inherit;
}

.project-card-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease, opacity 0.3s;
	z-index: 0;
}

.project-card:hover .project-card-image {
	transform: scale(0.8);
	opacity: 0.4;
}

.project-card:hover {
	/* native border hidden while the animated stroke replaces it */
	border-color: transparent !important;
}

.project-card-content {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	opacity: 0;
	transform: scale(1);
	transition: opacity 0.3s, transform 0.5s ease;
}

.project-card:hover .project-card-content {
	opacity: 1;
	transform: scale(0.8);
}

.project-year {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: var(--off-white);
	text-align: center;
}

.project-content {
	display: flex;
	justify-content: center;
	align-items: center;
}

.project-title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 500;
	font-size: 32px;
	color: var(--off-white);
	line-height: 1.1;
	text-align: center;
	white-space: pre-line;
}

.project-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.project-badge {
	border: 2px solid var(--off-white);
	padding: 8px 16px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: var(--off-white);
}

/* Contact Section */
.contact {
	height: 600px;
	position: relative;
	overflow: hidden;
}

.contact-pattern {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	pointer-events: none;
	background-image: url('Bckgrnd.png');
	background-size: cover;
	background-position: center;
}

.contact-banner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(to bottom, var(--jet-black), transparent);
}

.contact-content {
	position: relative;
	z-index: 10;
	height: 100%;
	display: flex;
	flex-direction: column;
	max-width: 1024px;
	margin: 132px 132px 0px;
}

/* .contact-heading removed per design: contact section no longer shows a standalone header */

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0px;
}

.contact-section {
	margin-bottom: 32px;
}

.contact-section:last-child {
	margin-bottom: 0;
}

.contact-label {
	font-family: 'Bricolage Grotesque', sans-serif;
	color: var(--off-white);
	margin-bottom: 8px;
}

.contact-link {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 18px;
	color: rgba(253, 254, 254, 0.8);
	text-decoration: none;
	transition: color 0.3s;
}

.contact-link:hover {
	color: var(--vivid-blue);
}

.contact-text {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 18px;
	color: rgba(253, 254, 254, 0.8);
	white-space: pre-line;
}

.social-icons {
	display: flex;
	gap: 16px;
	margin-top: 16px;
}

.social-btn {
	width: 48px;
	height: 48px;
	border: 2px solid var(--off-white);
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
}

.social-btn:hover {
	border-color: var(--vivid-blue);
	background: rgba(5, 142, 217, 0.1);
}

.social-btn.behance:hover {
	border-color: var(--cyan);
	background: rgba(0, 214, 255, 0.1);
}

.social-btn svg {
	width: 20px;
	height: 20px;
	fill: var(--off-white);
}

.cv-btn {
	margin-top: 16px;
	/* base visual: keep border and readable text, interior gradient animates on hover */
	background: linear-gradient(90deg, rgba(5, 142, 217, 0.1), rgba(0, 214, 255, 0.06));
	border: 2px solid var(--off-white);
	padding: 12px 24px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 18px;
	color: var(--off-white);
	cursor: pointer;
	transition: box-shadow 160ms ease, transform 120ms ease;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	position: relative; /* create stacking context for pseudo-elements */
	overflow: visible;
	/* animated interior gradient (paused until hover) */
	background-image: linear-gradient(90deg, var(--vivid-blue), var(--cyan));
	background-size: 200% 200%;
	animation: gradient-move 1s linear infinite;
	animation-play-state: paused;
}

/* On hover we play the interior gradient and let the existing ::before animated stroke
   also become visible (pseudo-element defined elsewhere). We keep the native border hidden
   on hover so the animated stroke replaces it like other controls. */
.cv-btn:hover {
	animation-play-state: running;
	box-shadow: 0 6px 18px rgba(5,142,217,0.06);
	border-color: transparent !important;
}

/* small inline icon inside button */
.cv-btn .cv-icon {
	width: 18px;
	height: 18px;
	display: inline-block;
	flex: 0 0 18px;
	stroke: currentColor;
	fill: none;
}

/* Responsive */
@media (max-width: 1024px) {
	header {
		padding: 0 40px;
	}

	/* Hide the left section nav on medium/small screens */
	.section-nav {
		display: none !important;
	}

	/* Make hero shorter and reduce gaps so portfolio sits closer on mobile */
	.hero {
		height: auto;
		padding: 128px 0 24px; /* top/bottom padding to create breathing room */
	}

	.hero-inner {
		grid-template-columns: 1fr; /* stack title and media */
		padding: 0 40px; /* reduce gutters on smaller screens */
		margin: 0;
	}

	.hero-title {
		position: relative; /* let title flow in document order on small screens */
		left: 0;
		top: 0;
		font-size: 64px;
		margin-bottom: 94px;
	}

	/* Stack media (image + nav) vertically and center on mobile */
	.hero-media {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		margin: 0 auto;
	}

	.hero-image-container {
		left: auto;
		right: auto;
		top: auto; /* keep image below title */
		width: 344px;
		height: 344px;
		margin: 0 auto;
	}

	/* Show carousel controls on smaller screens but layout horizontally below the image */
	.carousel-nav {
		position: static !important;
		transform: none !important;
		left: auto !important;
		top: auto !important;
		height: auto !important;
		display: flex !important;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 12px;
		padding: 12px 0;
		margin-top: 8px;
	}

	/* Rotate the arrow icons so they point left/right when horizontal
	   (match the swapped vertical rotations above) */
	.carousel-nav .carousel-arrow.up svg {
		transform: rotate(90deg);
	}
	.carousel-nav .carousel-arrow.down svg {
		transform: rotate(-90deg);
	}

	/* Keep project grid tighter on medium screens */
	.project-grid {
		padding: 0 40px;
		grid-template-columns: repeat(2, 1fr);
	}

	.filter-container {
		padding: 0 40px;
	}

	.contact-content {
		padding: 0 40px;
		margin: 0;
	}

	/* Remove the scroll-down arrow on mobile to reduce clutter */
	.scroll-down {
		display: none !important;
	}

	.crosshair-line{
		display: none;
	}
}

@media (max-width: 768px) {
	.nav-buttons {
		display: none;
	}

	.hero-image-container {
		width: 100%;
		height: 100%;
	}

	.contact-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.project-grid {
		grid-template-columns: 1fr;
	}

	.hero-title {
		font-size: 48px;
	}

	/* removed .contact-heading font-size override (heading removed) */
}

/* Crosshair overlay: two thin lines (horizontal + vertical) that follow the cursor.
   The overlay sits above the page background but behind the main UI by using a low z-index.
   pointer-events:none ensures it doesn't block interactions. */
#crosshair {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 5; /* low, so header (50), navs (40) and hero elements (10) remain above */
}

.crosshair-line {
	position: absolute;
	background: rgba(255,255,255,0.9);
	pointer-events: none;
	will-change: top, left;
}

.crosshair-line.horizontal {
	left: 0;
	width: 100%;
	height: 2px;
	opacity: 0.1;
	/* visually slim down to ~0.5px using scale for crisper look on high-DPI */
	transform: translateY(-50%) scaleY(0.5);
	transform-origin: left center;
}

.crosshair-line.vertical {
	top: 0;
	height: 100%;
	width: 2px;
	opacity: 0.1;
	transform: translateX(-50%) scaleX(0.5);
	transform-origin: center top;
}

/* Additional animation / pseudo-element styles (moved from second inline style) */
/* Animated gradient stroke on button borders using a masked ::before element.
   The ::before holds the rotating gradient and is masked so only a thin frame
   (the 'stroke') remains visible. This avoids filling the button and keeps
   the text/icons fully readable. */

/* Move the gradient along the border (background-position animation) instead of rotating the whole ring */
@keyframes gradient-move {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Ensure buttons create a stacking context for the pseudo-element */
.nav-btn,
.filter-btn,
.lang-btn,
.cv-btn,
.social-btn,
.carousel-arrow,
.section-nav-btn {
	position: relative;
	z-index: 1; /* content above the stroke pseudo-element */
	overflow: visible; /* allow the rotated gradient to show correctly */
}

/* Masked pseudo-element that becomes the animated border */
.nav-btn::before,
.filter-btn::before,
.lang-btn::before,
.cv-btn::before,
.social-btn::before,
.carousel-arrow::before,
.section-nav-btn::before {
	content: '';
	position: absolute;
	/* extend 1px out so the visible 1px stroke aligns with native 1px borders */
	inset: -2px;
	border-radius: inherit;
	padding: 2px; /* thickness of the visual stroke (1px) */
	background: linear-gradient(90deg, var(--vivid-blue), var(--cyan));
	background-size: 200% 200%;
	pointer-events: none;
	z-index: 0; /* behind the element content */
	opacity: 0;
	transition: opacity 100ms ease;

	/* Create a hollow center so only the outer padding area (stroke) is visible */
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	/* Standard mask + composite for broader compatibility */
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;

	/* Animation will slide the gradient along the stroke on hover */
	animation: gradient-move 1s linear infinite;
	animation-play-state: paused;
}

/* Activate stroke on hover/active */
.nav-btn:hover::before,
.filter-btn:hover::before,
.lang-btn.active::before,
.cv-btn:hover::before,
.social-btn:hover::before,
.carousel-arrow:hover::before,
.section-nav-btn:hover::before {
	opacity: 1;
	animation-play-state: running;
	/* hide the element's normal border so the animated stroke is visible */
}

/* Hide the native border on hover so the animated stroke replaces it */
.nav-btn:hover,
.filter-btn:hover,
.lang-btn.active,
.cv-btn:hover,
.social-btn:hover,
.carousel-arrow:hover,
.section-nav-btn:hover {
	border-color: transparent !important;
}

/* Exceptions: don't show animated stroke for header nav buttons or active language button */
header .nav-btn::before,
.lang-btn.active::before {
	display: none !important;
	opacity: 0 !important;
	animation-play-state: paused !important;
}

/* Ensure header nav keeps its border/underline on hover (override transparent rule) */
header .nav-btn:hover {
	border-color: var(--off-white) !important;
}

/* Animated gradient stroke for project cards (works with overflow:hidden)
   We keep the pseudo-element inside the card (inset:0) so it isn't clipped
   by the card's overflow, and use padding to create the visible 1px stroke. */
.project-card::before {
	content: '';
	position: absolute;
	inset: 0; /* keep inside the element so overflow:hidden doesn't clip it */
	border-radius: inherit;
	padding: 2px; /* thickness that yields a ~1px visible stroke with mask */
	background: linear-gradient(90deg, var(--vivid-blue), var(--cyan));
	background-size: 200% 200%;
	pointer-events: none;
	z-index: 0; /* behind card content */
	opacity: 0;
	transition: opacity 100ms ease;

	/* Hollow center so only the padding area (stroke) is visible */
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;

	animation: gradient-move 1s linear infinite;
	animation-play-state: paused;
}

.project-card:hover::before {
	opacity: 1;
	animation-play-state: running;
}

/* Animated gradient stroke for hero image container + image hover behavior
   Mirror the project-card hover: animated border stroke and image scale/darken */
.hero-image-container::before {
	content: '';
	position: absolute;
	inset: 0; /* keep inside container so overflow:hidden doesn't clip */
	border-radius: inherit;
	padding: 2px; /* thickness that yields a ~1px visible stroke with mask */
	background: linear-gradient(90deg, var(--vivid-blue), var(--cyan));
	background-size: 200% 200%;
	pointer-events: none;
	z-index: 0; /* behind the image (image z-index:1) */
	opacity: 0;
	transition: opacity 100ms ease;

	/* Hollow center so only the padding area (stroke) is visible */
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;

	animation: gradient-move 1s linear infinite;
	animation-play-state: paused;
}

.hero-image-container:hover::before {
	opacity: 1;
	animation-play-state: running;
}

/* Hide native border while animated stroke is visible */
.hero-image-container:hover {
	border-color: transparent !important;
}

/* Scale and darken inner image on hover to match project cards */
.hero-image-container:hover .hero-image {
	transform: scale(0.8);
	opacity: 0.4;
}

/* Ensure the overlay content scales together with the image for a cohesive motion */
.hero-image-container:hover .hero-slide-content {
	transform: scale(0.8);
	opacity: 1;
}

/* Hero slide overlay: mirrors project card content layout (top/middle/bottom) */
.hero-slide-content {
	position: absolute;
	inset: 0;
	z-index: 2; /* above image (image z-index:1) */
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* year top, title middle, category bottom */
	align-items: center;
	pointer-events: none; /* don't block interactions */
	padding: 24px;
	text-align: center;
	color: var(--off-white);
	transform: scale(1);
	transform-origin: center center; /* match image origin */
	transition: transform 0.5s ease, opacity 0.5s ease;
	opacity: 0; /* hidden until hover */
}

.hero-slide-year {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	width: 100%;
	margin-top: 8px;
}

.hero-slide-title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 500;
	font-size: 32px;
	white-space: pre-line; /* preserve newlines like project titles */
	line-height: 1.05;
	max-width: 90%;
}

.hero-slide-category {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 8px;
	width: 100%;
	display: flex;
	justify-content: center;
}

/* make category look like .project-badge */
.hero-slide-category .badge-inner {
	border: 2px solid var(--off-white);
	padding: 8px 16px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: var(--off-white);
	display: inline-block;
}

/* Mobile: when a card or hero is near the center of the viewport
   we add .in-center to trigger the same hover animations */
.project-card.in-center .project-card-image {
	transform: scale(0.8);
	opacity: 0.4;
}

.project-card.in-center .project-card-content {
	opacity: 1;
	transform: scale(0.8);
}

.hero-image-container.in-center .hero-image {
	transform: scale(0.8);
	opacity: 0.4;
}

.hero-image-container.in-center .hero-slide-content {
	opacity: 1;
	transform: scale(0.8);
}

/* Project detail page styling to match homepage visual system */
.project-detail-main {
    max-width: 1440px;
    margin: 0 auto;
}

/* Section content wrapper with same gutters as homepage */
.section-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 132px;
}

/* Hero section on project page */
.project-detail .project-hero {
    padding-top: 204px; /* match homepage hero top padding */
	padding-bottom: 64px;
	min-height: auto;
}

/* More breathing room between project text sections */
.project-detail .section-pad {
	padding-top: 64px;
	padding-bottom: 64px;
}

.project-detail .project-gallery {
	margin-top: 64px;
}

.project-detail .hero-inner {
    column-gap: 64px;
    gap: 64px;
    grid-template-columns: 400px 1fr;
}

/* Remove nav underlines on project detail pages */
a.project-nav-btn,
a.project-nav-btn:link,
a.project-nav-btn:visited,
a.project-nav-btn:hover,
a.project-nav-btn:active {
    text-decoration: none;
}

/* All text content should respect the homepage typography and spacing */
.project-detail h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    color: var(--off-white);
    margin-bottom: 32px;
}

.project-detail p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: rgba(253, 254, 254, 0.8);
    line-height: 1.7;
}



/* Project gallery: Pinterest-like masonry using columns */
.project-detail .project-gallery {
	column-count: 3;
	column-gap: 24px;
}

.project-detail .gallery-item {
	break-inside: avoid;
	margin: 0 0 24px;
	display: block;
	width: 100%;
	border: 2px solid var(--off-white);
	background: transparent;
	padding: 0;
	cursor: zoom-in;
	transition: border-color 0.3s ease;
	position: relative;
	overflow: hidden;
}

/* Animated gradient stroke for gallery items */
.project-detail .gallery-item::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: linear-gradient(90deg, var(--vivid-blue), var(--cyan));
	background-size: 200% 200%;
	pointer-events: none;
	z-index: 0;
	opacity: 0;
	transition: opacity 100ms ease;

	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;

	animation: gradient-move 1s linear infinite;
	animation-play-state: paused;
}

.project-detail .gallery-item:hover::before {
	opacity: 1;
	animation-play-state: running;
}

.project-detail .gallery-item:hover {
	border-color: transparent !important;
}

.project-detail .gallery-item img,
.project-detail .gallery-item video {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.4s ease;
	position: relative;
	z-index: 1;
	object-fit: cover;
}

.project-detail .gallery-item:hover img,
.project-detail .gallery-item:hover video {
	transform: scale(0.98);
}

/* Lightbox */
.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(6, 6, 6, 0.88);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 80;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.lightbox.open {
	opacity: 1;
	pointer-events: auto;
}

.lightbox-content {
	max-width: min(1100px, 90vw);
	max-height: 85vh;
	border: 2px solid var(--off-white);
	background: var(--jet-black);
	padding: 8px;
}

.lightbox-content img,
.lightbox-content video {
	max-width: 100%;
	max-height: 80vh;
	display: block;
}

/* Remove bottom borders from sections */
.project-detail .portfolio {
	border-bottom: none;
	padding: 32px 0;
	min-height: auto;
}
.arrow-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 2px solid var(--off-white);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    padding: 8px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    color: var(--off-white);
}

.arrow-left {
    left: 46px;
}

.arrow-right {
    right: 46px;
}

.arrow-btn:hover {
    border-color: var(--vivid-blue);
}

.arrow-btn svg {
    width: 24px;
    height: 24px;
    stroke: var(--off-white);
    transition: none;
    color: var(--off-white);
    fill: none;
}

.arrow-btn:hover svg,
.arrow-btn:visited svg,
.arrow-btn:active svg,
.arrow-btn:focus svg {
    stroke: var(--off-white);
    color: var(--off-white);
}

/* Back button styling - make it look like the filter buttons from homepage */
.project-detail .filter-btn {
    border: 2px solid var(--off-white);
    padding: 16px 24px;
    height: auto;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: var(--off-white);
    cursor: pointer;
    transition: all 0.3s;
    display: inline-block;
	text-decoration: none;
}

.project-detail .filter-btn:hover {
    border-color: var(--vivid-blue);
}

/* Disable hero image hover effects on project pages */
.project-detail .hero-image-container:hover::before {
	opacity: 0;
	animation-play-state: paused;
}

.project-detail .hero-image-container:hover {
	border-color: var(--off-white) !important;
}

.project-detail .hero-image-container:hover .hero-image {
	transform: none;
	opacity: 1;
}

.project-detail .hero-image-container:hover .hero-slide-content {
	transform: none;
	opacity: 0;
}

/* Responsive project page */
@media (max-width: 1024px) {
    .section-content {
        padding: 0 40px;
    }

    .project-detail .project-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 40px;
    }

    .return-arrow {
        left: 20px;
    }

    .arrow-btn {
        width: 40px;
        height: 40px;
        padding: 4px;
    }

    .arrow-btn svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 768px) {
    .section-content {
        padding: 0 20px;
    }

    .project-detail .project-hero {
        padding-top: 128px;
        min-height: auto;
    }

    .project-detail .hero-inner {
        margin: 0;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .project-detail .hero-title {
        font-size: 48px;
    }

    .project-detail .project-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .return-arrow {
        display: none;
    }

    .arrow-btn {
        display: none;
    }
}