@property --scroll-progress {
	inherits: true;
	initial-value: 0;
	syntax: "<number>";
}

@property --layer-index {
	syntax: "<integer>";
	inherits: true;
	initial-value: 1;
}

@property --layer-count {
	syntax: "<integer>";
	inherits: true;
	initial-value: 1;
}

@property --divider-index {
	syntax: "<integer>";
	inherits: true;
	initial-value: 1;
}

@property --divider-count {
	syntax: "<integer>";
	inherits: true;
	initial-value: 1;
}

#v-portfolio .portfolio-comparator {
	--color-light: #fafafa;
	--color-dark: #1f1408;
	--color-light-lighter: color-mix(in oklch, var(--color-light), #fff 10%);
	--color-light-darker: color-mix(in oklch, var(--color-light), #000 10%);
	--color-dark-lighter: color-mix(in oklch, var(--color-dark), #fff 10%);
	--color-dark-darker: color-mix(in oklch, var(--color-dark), #000 10%);
	--color-bg: var(--color-light);
	--color-bg-alt: var(--color-light-darker);
	--color-text: var(--color-dark);
	--color-text-muted: var(--color-dark-lighter);
	--color-accent: color-mix(in oklch, var(--color-dark), #fff 60%);
	--support-message-bg: var(--color-dark-darker);
	--support-message-text: var(--color-light-lighter);
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-xxl: 3rem;
	--line-tight: 1.2;
	--line-base: 1.5;
	--line-loose: 1.75;
	--font-sans: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
	--ts-xxs: clamp(0.75rem, -4cqw + 0.35rem, 0.9rem);
	--ts-xs: clamp(0.81rem, -3cqw + 0.35rem, 1.035rem);
	--ts-sm: clamp(0.9113rem, -1.5cqw + 0.35rem, 1.1644rem);
	--ts-base: clamp(1.0125rem, 0cqw + 0.35rem, 1.2938rem);
	--ts-md: clamp(1.1391rem, 1.5cqw + 0.35rem, 1.4555rem);
	--ts-lg: clamp(1.2656rem, 3cqw + 0.35rem, 1.6172rem);
	--ts-xl: clamp(1.582rem, 6cqw + 0.35rem, 2.0215rem);
	--ts-xxl: clamp(1.9775rem, 9cqw + 0.35rem, 2.5269rem);
	--ts-xxxl: clamp(2.4719rem, 12cqw + 0.35rem, 3.1586rem);
	--comparator-duration: 400vh;
	--comparator-offset: 35vh;
	--comparator-max-width: 56.25rem;
	--comparator-max-height: 100vh;
	--comparator-aspect-ratio: 4/3;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--ts-base);
	line-height: var(--line-base);
	background: linear-gradient(
		to bottom,
		var(--color-bg),
		color-mix(in oklch, var(--color-bg), var(--color-text) 20%)
	);
}

@media (max-width: 48em) {
	#v-portfolio .portfolio-comparator {
		--comparator-aspect-ratio: 3/4;
	}
}

body.portfolio-route #v-portfolio .portfolio-comparator {
	--color-bg: #f6f0e7;
	--color-bg-alt: #eee3d4;
	--color-text: #2b2150;
	--color-text-muted: #756c7b;
	--color-accent: #a27b49;
	background: linear-gradient(180deg, #f7f1e8 0%, #f6f0e7 40%, #eee3d4 100%);
}

body.portfolio-route #v-portfolio .portfolio-comparator .scroll-indicator {
	color: var(--color-text-muted);
}

#v-portfolio .portfolio-comparator *,
#v-portfolio .portfolio-comparator *::after,
#v-portfolio .portfolio-comparator *::before {
	box-sizing: border-box;
}

@supports not ((animation-timeline: scroll()) and (z-index: sibling-count())) {
	#v-portfolio .portfolio-comparator .intro::before {
		background: var(--support-message-bg);
		border-radius: 0.5rem;
		color: var(--support-message-text);
		content: "مرورگر شما از ویژگی‌های CSS این نمایشگر پشتیبانی نمی‌کند. لطفاً آخرین نسخه Chrome یا Edge را استفاده کنید.";
		display: block;
		font-size: var(--ts-base);
		font-weight: 600;
		margin-block: var(--space-xl);
		padding: var(--space-md);
		position: relative;
	}
}

#v-portfolio .portfolio-comparator :where(section, article) > * + * {
	margin-block-start: var(--space-lg);
}

#v-portfolio .portfolio-comparator :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: var(--line-tight);
}

#v-portfolio .portfolio-comparator h1 {
	font-size: var(--ts-xxxl);
	letter-spacing: -0.03em;
	margin-block-end: var(--space-lg);
}

#v-portfolio .portfolio-comparator .intro {
	display: block;
	inline-size: calc(100% - var(--space-xl));
	margin: 0 auto;
	max-inline-size: 56.25rem;
	padding-block: 90px var(--space-xxl);
	position: relative;
	text-align: center;
}

#v-portfolio .portfolio-comparator .intro h1 {
	color: var(--plum, var(--color-text));
	font-weight: 500;
	margin-block-end: var(--space-md);
}

#v-portfolio .portfolio-comparator .scroll-section {
	block-size: calc(var(--comparator-duration) + 100vh);
	position: relative;
}

#v-portfolio .portfolio-comparator .spacer {
	block-size: 50vh;
}

#v-portfolio .portfolio-comparator .scroll-indicator {
	font-size: var(--ts-xl);
	max-inline-size: 100%;
	text-align: center;
}

#v-portfolio .portfolio-comparator .comparator-container {
	align-items: center;
	block-size: 100vh;
	display: flex;
	inset-block-start: 0;
	justify-content: center;
	overflow: hidden;
	position: sticky;
}

#v-portfolio .portfolio-comparator .comparator-wrapper {
	animation: portfolio-comparator-3d-flip linear both;
	animation-range: calc(var(--comparator-offset) - 50vh)
		calc(var(--comparator-offset) + var(--comparator-duration) + 50vh);
	animation-timeline: scroll(root);
	aspect-ratio: var(--comparator-aspect-ratio);
	border-radius: 0.5rem;
	inline-size: 100%;
	margin-inline: var(--space-md);
	max-block-size: var(--comparator-max-height);
	max-inline-size: var(--comparator-max-width);
	overflow: hidden;
	position: relative;
}

#v-portfolio .portfolio-comparator .comparator-wrapper.flip-reverse {
	animation-name: portfolio-comparator-3d-flip-reverse;
}

#v-portfolio .portfolio-comparator .comparator {
	animation: portfolio-progress-calc linear both;
	animation-range: var(--comparator-offset)
		calc(var(--comparator-offset) + var(--comparator-duration));
	animation-timeline: scroll(root);
	block-size: 100%;
	display: grid;
	inline-size: 100%;
	position: relative;
}

#v-portfolio .portfolio-comparator .image-layers,
#v-portfolio .portfolio-comparator .divider-lines {
	grid-area: 1 / -1;
	display: grid;
	position: relative;
}

#v-portfolio .portfolio-comparator .image-layer {
	display: grid;
	grid-area: 1 / -1;
	position: relative;
	z-index: calc(sibling-count() - sibling-index() + 1);
}

#v-portfolio .portfolio-comparator .image-layer:not(:last-child) {
	--layer-index: sibling-index();
	--layer-count: sibling-count();
	--layer-start: calc((var(--layer-index) - 1) / (var(--layer-count) - 1));
	--layer-end: calc(var(--layer-index) / (var(--layer-count) - 1));
	animation: portfolio-clip-reveal linear both;
	animation-timeline: scroll(root);
	animation-range: calc(
			var(--comparator-offset) + (var(--comparator-duration) * var(--layer-start))
		)
		calc(
			var(--comparator-offset) + (var(--comparator-duration) * var(--layer-end))
		);
}

#v-portfolio .portfolio-comparator picture {
	grid-area: 1 / -1;
	max-block-size: var(--comparator-max-height);
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

#v-portfolio .portfolio-comparator .image-layer img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
	object-position: center;
	aspect-ratio: var(--comparator-aspect-ratio);
	background: color-mix(in oklch, var(--color-bg), var(--color-text) 5%);
}

#v-portfolio .portfolio-comparator .divider-line {
	--divider-index: sibling-index();
	--divider-count: sibling-count();
	--layer-start: calc((var(--divider-index) - 1) / var(--divider-count));
	--layer-end: calc(var(--divider-index) / var(--divider-count));
	background: transparent;
	block-size: 100%;
	border-inline-start: thin solid var(--color-bg);
	box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent), transparent 50%);
	grid-area: 1 / -1;
	inline-size: 1px;
	pointer-events: none;
	position: relative;
	z-index: calc(20 - var(--divider-index));
	animation: portfolio-divider-move linear both;
	animation-timeline: scroll(root);
	animation-range: calc(
			var(--comparator-offset) + (var(--comparator-duration) * var(--layer-start))
		)
		calc(
			var(--comparator-offset) + (var(--comparator-duration) * var(--layer-end))
		);
}

#v-portfolio .portfolio-comparator .comparator-overlay {
	block-size: 100%;
	display: flex;
	flex-direction: column;
	grid-area: 1 / -1;
	inline-size: 100%;
	max-block-size: var(--comparator-max-height);
	position: relative;
	transform: translateZ(30px);
}

#v-portfolio .portfolio-comparator .label {
	backdrop-filter: blur(0.375rem);
	background: color-mix(in srgb, var(--color-dark), transparent 20%);
	border-radius: 1rem;
	color: var(--color-light);
	font-size: var(--ts-xxs);
	font-weight: 600;
	inline-size: fit-content;
	letter-spacing: 0.05em;
	margin-block: var(--space-md) auto;
	margin-inline: var(--space-md) auto;
	padding: 0.375rem 0.75rem;
	pointer-events: none;
	position: relative;
	text-transform: uppercase;
	white-space: nowrap;
	z-index: 11;
}

#v-portfolio .portfolio-comparator .image-text {
	animation: portfolio-text-reveal 0.6s ease-out both;
	animation-range: var(--comparator-offset) calc(var(--comparator-offset) + 20vh);
	animation-timeline: scroll(root);
	margin-block: auto var(--space-md);
	margin-inline: var(--space-md) auto;
	pointer-events: none;
	position: relative;
	white-space: nowrap;
	z-index: 10;
}

#v-portfolio .portfolio-comparator .image-text h2 {
	font-size: var(--ts-lg);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.2;
	margin: 0;
	color: var(--color-light-lighter);
}

#v-portfolio .portfolio-comparator .image-text h3 {
	font-size: var(--ts-md);
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
	color: var(--color-light);
}

#v-portfolio .portfolio-comparator .comparison-percentage {
	color: var(--color-light-lighter);
	bottom: var(--space-md);
	font-size: var(--ts-md);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	line-height: 1.4;
	pointer-events: none;
	position: absolute;
	left: var(--space-md);
	z-index: 20;
}

#v-portfolio .portfolio-comparator .stage-nav {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: absolute;
	left: var(--space-md);
	top: 50%;
	transform: translateY(-50%);
	z-index: 25;
	pointer-events: auto;
}

#v-portfolio .portfolio-comparator .stage-indicator {
	appearance: none;
	background: color-mix(in srgb, var(--color-light), transparent 70%);
	border: none;
	border-radius: 0.25rem;
	cursor: pointer;
	height: 0.5rem;
	padding: 0;
	transition: all 0.2s ease;
	width: 0.5rem;
}

#v-portfolio .portfolio-comparator .stage-indicator:hover {
	background: color-mix(in srgb, var(--color-light), transparent 30%);
	transform: scale(1.3);
}

#v-portfolio .portfolio-comparator .stage-indicator.active {
	background: var(--color-light);
	height: 1rem;
}

#v-portfolio .portfolio-comparator .stage-indicator:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

@media (max-width: 48em) {
	#v-portfolio .portfolio-comparator .stage-nav {
		flex-direction: row;
		left: 50%;
		top: auto;
		bottom: calc(var(--space-md) * 3);
		transform: translateX(-50%);
	}

	#v-portfolio .portfolio-comparator .stage-indicator.active {
		height: 0.5rem;
		width: 1rem;
	}
}

#v-portfolio .portfolio-comparator .comparator-attribution-layer {
	inset-block-end: 5rem;
	inset-inline-start: 0;
	pointer-events: none;
	position: fixed;
	z-index: 90;
}

#v-portfolio .portfolio-comparator .comparator-credit-links {
	backdrop-filter: blur(0.375rem);
	background: color-mix(in srgb, var(--color-dark), transparent 20%);
	display: grid;
	font-size: 0.75rem;
	gap: 0;
	grid-auto-flow: column;
	line-height: 1.3;
	padding-block: 0.375rem;
	padding-inline: 0.625rem;
	pointer-events: auto;
}

#v-portfolio .portfolio-comparator .comparator-credit-links a {
	border-inline-start: thin solid color-mix(in srgb, currentColor, transparent 50%);
	color: var(--color-light);
	padding-inline: 0.5rem;
	text-decoration: none;
	transition: color 0.25s ease, opacity 0.25s ease;
}

#v-portfolio .portfolio-comparator .comparator-credit-links a:first-child {
	border: none;
}

#v-portfolio .portfolio-comparator .comparator-credit-links a:hover,
#v-portfolio .portfolio-comparator .comparator-credit-links a:focus-visible {
	color: var(--color-accent);
	opacity: 0.85;
}

#v-portfolio.on ~ .hera-footer {
	position: relative;
	z-index: 1;
}

@keyframes portfolio-comparator-3d-flip {
	0% {
		opacity: 0.75;
		transform: perspective(1200px) rotateX(10deg) rotateY(-10deg) rotateZ(-3deg)
			scale(0.85);
	}
	15%,
	85% {
		opacity: 1;
		transform: perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
	}
	100% {
		opacity: 0.75;
		transform: perspective(1200px) rotateX(-10deg) rotateY(10deg) rotateZ(3deg)
			scale(0.85);
	}
}

@keyframes portfolio-comparator-3d-flip-reverse {
	0% {
		opacity: 0.75;
		transform: perspective(1200px) rotateX(-10deg) rotateY(10deg) rotateZ(3deg)
			scale(0.85);
	}
	15%,
	85% {
		opacity: 1;
		transform: perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
	}
	100% {
		opacity: 0.75;
		transform: perspective(1200px) rotateX(10deg) rotateY(-10deg) rotateZ(-3deg)
			scale(0.85);
	}
}

@keyframes portfolio-progress-calc {
	from {
		--scroll-progress: 0;
	}
	to {
		--scroll-progress: 100;
	}
}

@keyframes portfolio-clip-reveal {
	from {
		clip-path: inset(0 0 0 0);
	}
	to {
		clip-path: inset(0 100% 0 0);
	}
}

@keyframes portfolio-divider-move {
	0% {
		inset-inline-start: 100%;
		opacity: 0;
	}
	2% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	100% {
		inset-inline-start: 0%;
		opacity: 0;
	}
}

@keyframes portfolio-text-reveal {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}