/* =========================================================
 * Tech Resolve — Project Observatory
 * Version: 1.0.0
 * ======================================================= */


/* =========================================================
 * Section
 * ======================================================= */

.tr-work {
	position: relative;
	isolation: isolate;

	padding:
		92px
		0
		96px;

	overflow: hidden;

	background:
		#050b10;
}


.tr-work__shell {
	width: min(
		calc(100% - (var(--tr-gutter) * 2)),
		var(--tr-container-wide)
	);

	margin-inline: auto;
}


/* =========================================================
 * Background
 * ======================================================= */

.tr-work__background {
	position: absolute;
	z-index: -2;

	inset: 0;

	overflow: hidden;

	pointer-events: none;
}


.tr-work__grid {
	position: absolute;

	inset: 0;

	background-image:
		linear-gradient(
			rgba(255, 255, 255, 0.024) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.024) 1px,
			transparent 1px
		);

	background-size:
		56px
		56px;

	mask-image:
		linear-gradient(
			to bottom,
			transparent,
			#000 18%,
			#000 82%,
			transparent
		);
}


.tr-work__glow {
	position: absolute;

	border-radius: 50%;
}


.tr-work__glow--green {
	top: -360px;
	left: -230px;

	width: 720px;
	height: 720px;

	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, 0.075),
			transparent 70%
		);
}


.tr-work__glow--cyan {
	right: -300px;
	top: 20%;

	width: 700px;
	height: 700px;

	background:
		radial-gradient(
			circle,
			rgba(20, 215, 232, 0.055),
			transparent 72%
		);
}


.tr-work__glow--violet {
	right: 18%;
	bottom: -430px;

	width: 700px;
	height: 700px;

	background:
		radial-gradient(
			circle,
			rgba(135, 87, 255, 0.045),
			transparent 72%
		);
}


/* =========================================================
 * Header
 * ======================================================= */

.tr-work__header {
	margin-bottom:
		54px;
}


.tr-work__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 11px;

	margin-bottom: 18px;

	color:
		rgba(176, 255, 218, 0.76);

	font-size:
		clamp(10px, 0.72vw, 12px);

	font-weight: 820;

	letter-spacing:
		0.15em;
}


.tr-work__eyebrow-dot {
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background:
		var(--tr-green);

	box-shadow:
		0 0 15px rgba(25, 224, 120, 0.60);
}


.tr-work__heading-grid {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(360px, 0.68fr);

	align-items: end;

	gap:
		clamp(50px, 8vw, 135px);
}


.tr-work__title {
	max-width: 870px;

	margin: 0;

	color:
		#f5faf8;

	font-size:
		clamp(45px, 4.8vw, 76px);

	font-weight: 790;

	line-height: 1;

	letter-spacing:
		-0.052em;

	text-wrap: balance;
}


.tr-work__description {
	max-width: 580px;

	margin:
		0
		0
		5px;

	color:
		rgba(211, 225, 220, 0.61);

	font-size:
		clamp(14px, 1vw, 17px);

	line-height:
		1.72;
}


/* =========================================================
 * Observatory
 * ======================================================= */

.tr-work__observatory {
	position: relative;
}


/* =========================================================
 * Stage
 * ======================================================= */

.tr-work__stage {
	position: relative;

	display: grid;

	grid-template-columns:
		minmax(0, 1.28fr)
		minmax(330px, 0.72fr);

	gap:
		clamp(35px, 5vw, 72px);

	min-height: 610px;

	padding:
		64px
		clamp(28px, 4vw, 58px)
		46px;

	overflow: hidden;

	border:
		1px solid rgba(255, 255, 255, 0.075);

	background:
		linear-gradient(
			125deg,
			#07140f,
			#07151c 52%,
			#090f1b
		);

	box-shadow:
		0 42px 100px rgba(0, 0, 0, 0.30);

	clip-path:
		polygon(
			0 0,
			calc(100% - 28px) 0,
			100% 28px,
			100% 100%,
			28px 100%,
			0 calc(100% - 28px)
		);
}


.tr-work__stage::before {
	content: "";

	position: absolute;

	top: -260px;
	left: 28%;

	width: 650px;
	height: 500px;

	border-radius: 50%;

	background:
		radial-gradient(
			ellipse,
			rgba(25, 224, 120, 0.07),
			transparent 70%
		);

	pointer-events: none;
}


/* =========================================================
 * HUD
 * ======================================================= */

.tr-work__hud {
	position: absolute;

	top: 0;
	right: 0;
	left: 0;

	display: flex;
	align-items: center;
	justify-content: space-between;

	height: 46px;

	padding:
		0
		24px;

	border-bottom:
		1px solid rgba(255, 255, 255, 0.06);

	color:
		rgba(205, 223, 216, 0.30);

	font-size: 8px;
	font-weight: 800;

	letter-spacing:
		0.13em;
}


.tr-work__hud-state {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	color:
		rgba(176, 255, 218, 0.54);
}


.tr-work__hud-state i {
	width: 6px;
	height: 6px;

	border-radius: 50%;

	background:
		var(--tr-green);

	box-shadow:
		0 0 12px rgba(25, 224, 120, 0.65);
}


/* =========================================================
 * Visual
 * ======================================================= */

.tr-work__visual {
	position: relative;

	min-height: 480px;

	perspective: 1500px;
}


.tr-work__visual-orbit {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 460px;
	height: 460px;

	border:
		1px solid rgba(25, 224, 120, 0.09);

	border-radius: 50%;

	transform:
		translate(-50%, -50%);

	pointer-events: none;
}


.tr-work__visual-orbit::before {
	content: "";

	position: absolute;

	inset: 52px;

	border:
		1px dashed rgba(20, 215, 232, 0.08);

	border-radius: 50%;
}


.tr-work__visual-orbit span {
	position: absolute;

	top: 14%;
	right: 12%;

	width: 7px;
	height: 7px;

	border-radius: 50%;

	background:
		var(--tr-green);

	box-shadow:
		0 0 14px rgba(25, 224, 120, 0.65);
}


/* =========================================================
 * Screens
 * ======================================================= */

.tr-work__screen {
	position: absolute;

	inset: 0;

	opacity: 0;
	visibility: hidden;

	transform:
		translate3d(24px, 18px, 0)
		rotateY(-6deg)
		scale(0.975);

	transition:
		opacity 420ms ease,
		visibility 420ms ease,
		transform 700ms var(--tr-ease);
}


.tr-work__screen.is-active {
	opacity: 1;
	visibility: visible;

	transform:
		translate3d(0, 0, 0)
		rotateY(-4deg)
		scale(1);
}


.tr-work__screen-frame {
	position: absolute;

	top: 50%;
	left: 50%;

	width:
		min(92%, 760px);

	height: 430px;

	overflow: hidden;

	border:
		1px solid rgba(255, 255, 255, 0.11);

	background:
		#09151b;

	box-shadow:
		0 48px 100px rgba(0, 0, 0, 0.38),
		0 0 60px rgba(25, 224, 120, 0.035);

	transform:
		translate(-50%, -50%)
		rotate(-1.5deg);

	clip-path:
		polygon(
			0 0,
			calc(100% - 18px) 0,
			100% 18px,
			100% 100%,
			18px 100%,
			0 calc(100% - 18px)
		);
}


/* =========================================================
 * Browser
 * ======================================================= */

.tr-work__browser-bar {
	display: grid;

	grid-template-columns:
		70px
		1fr
		35px;

	align-items: center;

	gap: 15px;

	height: 47px;

	padding:
		0
		15px;

	border-bottom:
		1px solid rgba(255, 255, 255, 0.06);

	background:
		#0d1c23;
}


.tr-work__browser-dots {
	display: flex;
	gap: 6px;
}


.tr-work__browser-dots span {
	width: 6px;
	height: 6px;

	border-radius: 50%;

	background:
		rgba(255, 255, 255, 0.15);
}


.tr-work__browser-dots span:first-child {
	background:
		var(--tr-green);
}


.tr-work__browser-address {
	height: 21px;

	border:
		1px solid rgba(255, 255, 255, 0.055);

	border-radius: 20px;

	background:
		rgba(255, 255, 255, 0.025);
}


.tr-work__browser-address span {
	display: block;

	width: 34%;
	height: 5px;

	margin:
		7px
		0
		0
		12px;

	border-radius: 20px;

	background:
		rgba(255, 255, 255, 0.10);
}


.tr-work__browser-live {
	display: grid;
	place-items: center;
}


.tr-work__browser-live i {
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background:
		var(--tr-green);

	box-shadow:
		0 0 12px rgba(25, 224, 120, 0.55);
}


/* =========================================================
 * Screenshot
 * ======================================================= */

.tr-work__image-wrap {
	position: relative;

	height:
		calc(100% - 47px);

	overflow: hidden;
}


.tr-work__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: top center;

	transform:
		scale(1.02);

	transition:
		transform 1.1s var(--tr-ease);
}


.tr-work__screen.is-active
.tr-work__image {
	transform:
		scale(1);
}


.tr-work__image-overlay {
	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			180deg,
			transparent 58%,
			rgba(3, 15, 12, 0.24)
		),
		linear-gradient(
			115deg,
			rgba(25, 224, 120, 0.035),
			transparent 42%
		);

	pointer-events: none;
}


/* =========================================================
 * Floating Labels
 * ======================================================= */

.tr-work__floating-label {
	position: absolute;

	z-index: 8;

	border:
		1px solid rgba(255, 255, 255, 0.08);

	background:
		#0b1b20;

	box-shadow:
		0 18px 40px rgba(0, 0, 0, 0.25);

	font-weight: 820;

	letter-spacing:
		0.10em;
}


.tr-work__floating-label--number {
	top: 9%;
	left: 0;

	display: grid;
	place-items: center;

	width: 70px;
	height: 70px;

	color:
		var(--tr-green);

	font-size: 26px;

	transform:
		rotate(-6deg);
}


.tr-work__floating-label--type {
	right: 0;
	bottom: 7%;

	max-width: 190px;

	padding:
		11px
		13px;

	color:
		var(--tr-spectrum-cyan);

	font-size: 8px;

	transform:
		rotate(4deg);
}


/* =========================================================
 * Details
 * ======================================================= */

.tr-work__details {
	position: relative;

	min-height: 480px;
}


.tr-work__project {
	position: absolute;

	top: 50%;
	right: 0;
	left: 0;

	opacity: 0;
	visibility: hidden;

	transform:
		translateY(-46%)
		translateX(18px);

	transition:
		opacity 350ms ease,
		visibility 350ms ease,
		transform 600ms var(--tr-ease);
}


.tr-work__project.is-active {
	opacity: 1;
	visibility: visible;

	transform:
		translateY(-50%)
		translateX(0);
}


/* =========================================================
 * Meta
 * ======================================================= */

.tr-work__project-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	margin-bottom: 27px;

	color:
		rgba(207, 225, 218, 0.34);

	font-size: 8px;
	font-weight: 800;

	letter-spacing:
		0.13em;
}


.tr-work__project-meta span:first-child {
	color:
		rgba(176, 255, 218, 0.62);
}


/* =========================================================
 * Project Typography
 * ======================================================= */

.tr-work__project h3 {
	max-width: 480px;

	margin:
		0
		0
		13px;

	color:
		#ffffff;

	font-size:
		clamp(35px, 3.5vw, 56px);

	font-weight: 780;

	line-height:
		1.02;

	letter-spacing:
		-0.05em;
}


.tr-work__category {
	display: block;

	margin-bottom: 21px;

	color:
		var(--tr-green);

	font-size: 10px;
	font-weight: 800;

	letter-spacing:
		0.11em;

	text-transform: uppercase;
}


.tr-work__project-description {
	max-width: 480px;

	margin:
		0
		0
		25px;

	color:
		rgba(212, 226, 221, 0.61);

	font-size: 14px;

	line-height:
		1.7;
}


/* =========================================================
 * Focus
 * ======================================================= */

.tr-work__focus {
	display: grid;
	gap: 10px;

	margin:
		0
		0
		30px;

	padding: 0;

	list-style: none;
}


.tr-work__focus li {
	display: flex;
	align-items: center;
	gap: 10px;

	color:
		rgba(229, 239, 235, 0.73);

	font-size: 12px;
}


.tr-work__focus li > span {
	display: grid;
	place-items: center;

	width: 24px;
	height: 24px;

	flex:
		0
		0
		24px;

	border:
		1px solid rgba(25, 224, 120, 0.16);

	border-radius: 50%;

	background:
		rgba(25, 224, 120, 0.07);

	color:
		var(--tr-green);
}


.tr-work__focus svg {
	width: 13px;
	height: 13px;
}


/* =========================================================
 * Button
 * ======================================================= */

.tr-work__button {
	display: inline-flex;
	align-items: center;
	gap: 15px;

	color:
		#03170d;

	font-size: 13px;
	font-weight: 780;

	text-decoration: none;

	padding:
		8px
		9px
		8px
		20px;

	border:
		1px solid rgba(61, 247, 152, 0.40);

	border-radius: 16px;

	background:
		linear-gradient(
			135deg,
			#22ea83,
			#0bc96a
		);

	box-shadow:
		0 16px 38px rgba(15, 211, 106, 0.15);

	transition:
		transform 380ms var(--tr-ease),
		box-shadow 300ms ease;
}


.tr-work__button:hover {
	color:
		#021209;

	transform:
		translateY(-4px);

	box-shadow:
		0 23px 50px rgba(15, 211, 106, 0.24);
}


.tr-work__button-icon {
	display: grid;
	place-items: center;

	width: 38px;
	height: 38px;

	border-radius: 12px;

	background:
		rgba(1, 35, 17, 0.13);

	transition:
		transform 350ms var(--tr-ease);
}


.tr-work__button:hover
.tr-work__button-icon {
	transform:
		rotate(8deg)
		translate(2px, -2px);
}


.tr-work__button-icon svg {
	width: 18px;
	height: 18px;
}


/* =========================================================
 * Rail
 * ======================================================= */

.tr-work__rail {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	margin-top: 12px;

	border-top:
		1px solid rgba(255, 255, 255, 0.07);

	border-bottom:
		1px solid rgba(255, 255, 255, 0.07);
}


.tr-work__rail-item,
.tr-work__rail-item:hover,
.tr-work__rail-item:focus,
.tr-work__rail-item:active {
	position: relative;

	display: grid;

	grid-template-columns:
		48px
		1fr
		20px;

	align-items: center;

	gap: 12px;

	min-height: 100px;

	padding:
		15px
		18px;

	border: 0 !important;
	border-right:
		1px solid rgba(255, 255, 255, 0.06) !important;

	background:
		transparent !important;

	box-shadow:
		none !important;

	color:
		rgba(220, 234, 228, 0.47);

	text-align: left;

	cursor: pointer;

	transition:
		color 300ms ease,
		background 350ms ease;
}


.tr-work__rail-item:last-child {
	border-right: 0 !important;
}


.tr-work__rail-item::before {
	content: "";

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			110deg,
			rgba(25, 224, 120, 0.075),
			rgba(20, 215, 232, 0.025),
			transparent
		);

	opacity: 0;

	transition:
		opacity 320ms ease;
}


.tr-work__rail-item:hover,
.tr-work__rail-item.is-active {
	color:
		#ffffff;
}


.tr-work__rail-item:hover::before,
.tr-work__rail-item.is-active::before {
	opacity: 1;
}


.tr-work__rail-number,
.tr-work__rail-copy,
.tr-work__rail-indicator {
	position: relative;
	z-index: 2;
}


.tr-work__rail-number {
	color:
		transparent;

	font-size: 28px;
	font-weight: 850;

	letter-spacing:
		-0.06em;

	-webkit-text-stroke:
		1px
		rgba(255, 255, 255, 0.20);
}


.tr-work__rail-item.is-active
.tr-work__rail-number {
	-webkit-text-stroke:
		1px
		rgba(25, 224, 120, 0.68);
}


.tr-work__rail-copy {
	display: grid;
	gap: 4px;
}


.tr-work__rail-copy strong {
	font-size: 12px;
	font-weight: 720;

	line-height:
		1.25;
}


.tr-work__rail-copy small {
	color:
		rgba(205, 222, 216, 0.32);

	font-size: 8px;

	line-height:
		1.35;
}


.tr-work__rail-indicator {
	display: grid;
	place-items: center;

	width: 18px;
	height: 18px;

	border:
		1px solid rgba(255, 255, 255, 0.09);

	border-radius: 50%;
}


.tr-work__rail-indicator span {
	width: 5px;
	height: 5px;

	border-radius: 50%;

	background:
		rgba(255, 255, 255, 0.16);

	transition:
		background 300ms ease,
		box-shadow 300ms ease;
}


.tr-work__rail-item.is-active
.tr-work__rail-indicator span {
	background:
		var(--tr-green);

	box-shadow:
		0 0 11px rgba(25, 224, 120, 0.65);
}


/* =========================================================
 * Progress
 * ======================================================= */

.tr-work__progress {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	margin-top: 17px;

	color:
		rgba(204, 222, 215, 0.27);

	font-size: 8px;
	font-weight: 800;

	letter-spacing:
		0.12em;
}


.tr-work__progress-track {
	flex: 1;

	height: 2px;

	background:
		rgba(255, 255, 255, 0.06);
}


.tr-work__progress-bar {
	display: block;

	width: 25%;
	height: 100%;

	background:
		linear-gradient(
			90deg,
			var(--tr-green),
			var(--tr-spectrum-cyan)
		);

	box-shadow:
		0 0 12px rgba(25, 224, 120, 0.22);

	transition:
		width 650ms var(--tr-ease);
}


/* =========================================================
 * Entrance
 * ======================================================= */

.tr-has-work-js
.tr-work__header,
.tr-has-work-js
.tr-work__observatory {
	opacity: 0;

	transform:
		translateY(26px);
}


.tr-has-work-js
.tr-work.is-inview
.tr-work__header,
.tr-has-work-js
.tr-work.is-inview
.tr-work__observatory {
	opacity: 1;

	transform:
		translateY(0);

	transition:
		opacity 850ms ease,
		transform 950ms var(--tr-ease);
}


.tr-has-work-js
.tr-work.is-inview
.tr-work__observatory {
	transition-delay:
		140ms;
}


/* =========================================================
 * Tablet
 * ======================================================= */

@media (max-width: 1100px) {

	.tr-work__heading-grid {
		grid-template-columns: 1fr;

		gap: 20px;
	}


	.tr-work__description {
		max-width: 760px;
	}


	.tr-work__stage {
		grid-template-columns: 1fr;

		min-height: 980px;
	}


	.tr-work__visual {
		min-height: 500px;
	}


	.tr-work__details {
		min-height: 360px;
	}


	.tr-work__project {
		top: 0;

		transform:
			translateY(15px);
	}


	.tr-work__project.is-active {
		transform:
			translateY(0);
	}


	.tr-work__rail {
		grid-template-columns:
			repeat(2, 1fr);
	}


	.tr-work__rail-item:nth-child(2) {
		border-right: 0 !important;
	}

}


/* =========================================================
 * Mobile
 * ======================================================= */

@media (max-width: 720px) {

	.tr-work {
		padding:
			58px
			0
			62px;
	}


	.tr-work__shell {
		width:
			calc(100% - 24px);
	}


	.tr-work__header {
		margin-bottom: 34px;
	}


	.tr-work__title {
		font-size:
			clamp(38px, 10.5vw, 51px);
	}


	.tr-work__description {
		font-size: 15px;
	}


	.tr-work__stage {
		display: block;

		min-height: 870px;

		padding:
			58px
			15px
			25px;
	}


	.tr-work__hud {
		padding-inline: 14px;
	}


	.tr-work__hud > span:first-child {
		display: none;
	}


	.tr-work__visual {
		min-height: 390px;
	}


	.tr-work__visual-orbit {
		width: 310px;
		height: 310px;
	}


	.tr-work__screen-frame {
		width: 96%;
		height: 305px;
	}


	.tr-work__browser-bar {
		grid-template-columns:
			50px
			1fr
			25px;

		height: 39px;
	}


	.tr-work__image-wrap {
		height:
			calc(100% - 39px);
	}


	.tr-work__floating-label--number {
		width: 52px;
		height: 52px;

		font-size: 19px;
	}


	.tr-work__floating-label--type {
		display: none;
	}


	.tr-work__details {
		min-height: 390px;
	}


	.tr-work__project h3 {
		font-size:
			clamp(34px, 10vw, 45px);
	}


	.tr-work__project-description {
		font-size: 13px;
	}


	.tr-work__rail {
		display: flex;

		overflow-x: auto;

		scrollbar-width: none;
	}


	.tr-work__rail::-webkit-scrollbar {
		display: none;
	}


	.tr-work__rail-item,
	.tr-work__rail-item:hover,
	.tr-work__rail-item:focus {
		flex:
			0
			0
			245px;

		border-right:
			1px solid rgba(255, 255, 255, 0.06) !important;
	}


	.tr-work__rail-item:nth-child(2) {
		border-right:
			1px solid rgba(255, 255, 255, 0.06) !important;
	}

}


/* =========================================================
 * Reduced Motion
 * ======================================================= */

@media (prefers-reduced-motion: reduce) {

	.tr-work__screen,
	.tr-work__project,
	.tr-work__rail-item,
	.tr-work__progress-bar {
		transition: none;
	}


	.tr-has-work-js
	.tr-work__header,
	.tr-has-work-js
	.tr-work__observatory {
		opacity: 1;

		transform: none;

		transition: none;
	}

}