/* =========================================================
   AVANSEN — PROJECTS PAGE
========================================================= */

.av-projects-page {
	width: 100%;
	background: #000;
	color: #fff;
	overflow: hidden;
}


/* =========================================================
   HERO
========================================================= */

.av-projects-hero {
	position: relative;

	width: 100%;
	height: 720px;

	background: #000;
	overflow: hidden;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.av-projects-hero__media {
	position: absolute;
	inset: 0;

	z-index: 0;

	width: 100%;
	height: 100%;
}


.av-projects-hero__media img {
	display: block;

	width: 100%;
	height: 100%;

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

}


/* BLACK FADE — TOP + BOTTOM */

.av-projects-hero__media::after {
	content: "";

	position: absolute;
	inset: 0;

	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			#000 0%,
			rgba(0, 0, 0, 0.55) 8%,
			rgba(0, 0, 0, 0) 22%,
			rgba(0, 0, 0, 0) 72%,
			rgba(0, 0, 0, 0.55) 88%,
			#000 100%
		);
}


/* =========================================================
   HERO CONTENT
========================================================= */

.av-projects-hero__container {
	position: relative;
	z-index: 2;

	width: calc(100% - 96px);
	max-width: 1320px;
	height: 100%;

	margin: 0 auto;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;

	direction: rtl;
	text-align: right;
}


/* =========================================================
   HERO TITLE
========================================================= */

.av-projects-hero__title {
	width: 620px;
	max-width: 50%;

	margin: 0;

	font-family: "Gofteh", sans-serif;
	font-size: 64px;
	font-weight: 800;
	line-height: 1.2;

	color: #F3F0ED;
}


.av-projects-hero__title span {
	color: #FF5A00;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.av-projects-hero__description {
	width: 620px;
	max-width: 50%;

	margin: 28px 0 0;

	font-family: "Kalameh", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.8;

	color: rgba(243, 240, 237, 0.62);
}

/* =========================================================
   SHOWCASE
========================================================= */

.av-projects-showcase {
	width: 100%;

	/*
	 * فاصله مارکر تا شروع پروژه‌ها
	 */
	padding:
		90px
		0
		120px;
}


.av-projects-showcase__container {
	width: calc(100% - 96px);
	max-width: 1320px;

	margin: 0 auto;

	display: grid;

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

	column-gap: 64px;

	align-items: start;

	direction: ltr;
}


/* =========================================================
   PREVIEW
========================================================= */

.av-projects-showcase__preview {
	position: sticky;
	top: 150px;

	width: 100%;

	margin: 0;
	padding: 0;

	align-self: start;
}


.av-projects-preview__frame {
	position: relative;

	width: 100%;
	aspect-ratio: 4 / 5;

	overflow: hidden;

	border-radius: 24px;

	background: #111;
}



.av-projects-preview__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 1;
    transform: scale(1);

    transition:
        opacity 160ms ease,
        transform 300ms cubic-bezier(.22, 1, .36, 1);
}


.av-projects-preview__image.is-changing {
	opacity: 0;

	transform: scale(1.025);
}


.av-projects-preview__glow {
	position: absolute;

	left: -18px;
	top: 22%;

	width: 26px;
	height: 26px;

	border-radius: 50%;

	background: #FF6A1A;

	box-shadow:
		0 0 10px rgba(255, 90, 0, 0.95),
		0 0 28px rgba(255, 90, 0, 0.55),
		0 0 56px rgba(255, 90, 0, 0.20);

	pointer-events: none;
}


.av-projects-preview__link {
	margin-top: 22px;

	display: inline-flex;
	align-items: center;

	gap: 12px;

	font-family: "Kalameh", sans-serif;
	font-size: 18px;
	font-weight: 400;

	color: #F3F0ED;

	text-decoration: none;
}


.av-projects-preview__link-icon {
	width: 34px;
	height: 34px;

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

	border:
		1px solid rgba(243, 240, 237, 0.35);

	border-radius: 50%;

	transition:
		border-color 220ms ease,
		color 220ms ease,
		box-shadow 220ms ease;
}


.av-projects-preview__link:hover
.av-projects-preview__link-icon {
	color: #FF5A00;

	border-color: #FF5A00;

	box-shadow:
		0 0 10px rgba(255, 90, 0, 0.22);
}


/* =========================================================
   LIST
========================================================= */

.av-projects-showcase__list {
	width: 100%;

	height: 520px;
	max-height: 520px;

	margin: 0;
	padding: 0 0 0 14px;

	overflow-y: auto;
	overflow-x: hidden;

	align-self: start;

	direction: rtl;

	scrollbar-width: thin;
	scrollbar-color:
		#7F2F10
		rgba(255, 255, 255, 0.06);
}



.av-projects-showcase__list::-webkit-scrollbar {
	width: 5px;
}

.av-projects-showcase__list::-webkit-scrollbar-track {
	background:
		rgba(255, 255, 255, 0.04);

	border-radius: 10px;
}

.av-projects-showcase__list::-webkit-scrollbar-thumb {
	background:
		linear-gradient(
			to bottom,
			#7F2F10,
			#FF5A00
		);

	border-radius: 10px;

	box-shadow:
		0 0 8px rgba(255, 90, 0, 0.25);
}

.av-projects-item:last-child {
	margin-bottom: 8px;
}

/* =========================================================
   ITEM
========================================================= */

.av-projects-item {
	position: relative;

	width: 100%;
	min-height: 100px;

	margin: 0;
	padding: 20px 0;

	display: grid;

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

	column-gap: 18px;

	align-items: end;

	border: 0;
	border-bottom:
		1px solid rgba(243, 240, 237, 0.18);

	background: transparent;

	color: #F3F0ED;

	cursor: pointer;

	text-align: right;

	direction: ltr;
}


/* =========================================================
   ACTIVE / HOVER LINE
========================================================= */

.av-projects-item::after {
	content: "";

	position: absolute;

	left: 0;
	right: 0;
	bottom: -1px;

	width: 100%;
	height: 1px;

	background: #FF5A00;

	opacity: 0;

	transform: scaleX(0.15);
	transform-origin: right center;

	box-shadow:
		0 0 5px rgba(255, 90, 0, 0.75),
		0 0 12px rgba(255, 90, 0, 0.42),
		0 0 26px rgba(255, 70, 0, 0.18);

	transition:
		transform 420ms cubic-bezier(.22, 1, .36, 1),
		opacity 260ms ease;
}


/* Hover */

.av-projects-item:hover::after {
	opacity: 1;

	transform: scaleX(1);
}


/* Active */

.av-projects-item.is-active::after {
	opacity: 1;

	transform: scaleX(1);
}


.av-projects-item:hover::before,
.av-projects-item.is-active::before {
	content: "";

	position: absolute;

	left: 0;
	right: 0;
	bottom: -10px;

	height: 22px;

	background:
		radial-gradient(
			ellipse at center,
			rgba(255, 90, 0, 0.10) 0%,
			rgba(127, 47, 16, 0.06) 38%,
			rgba(0, 0, 0, 0) 74%
		);

	filter: blur(8px);

	pointer-events: none;

	z-index: 0;
}

/* =========================================================
   NUMBER
========================================================= */

.av-projects-item__number {
	font-family: "Michroma", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;

	color: rgba(243, 240, 237, 0.38);

	transition:
		color 260ms ease,
		text-shadow 260ms ease;
}


/* Hover */

.av-projects-item:hover
.av-projects-item__number {
	color: #7F2F10;

	text-shadow:
		0 0 8px rgba(127, 47, 16, 0.28);
}


/* Active */

.av-projects-item.is-active
.av-projects-item__number {
	color: #7F2F10;
}


/* =========================================================
   CONTENT
========================================================= */

.av-projects-item__content {
	display: flex;
	flex-direction: column;

	gap: 8px;

	direction: rtl;
	text-align: right;
}


.av-projects-item__title {
	font-family: "Kalameh", sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;

	color: #F3F0ED;
}


.av-projects-item__services {
	font-family: "Kalameh", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;

	color: rgba(243, 240, 237, 0.48);
}


/* =========================================================
   ARROW
========================================================= */

.av-projects-item__arrow {
	width: 34px;
	height: 34px;

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

	border:
		1px solid rgba(243, 240, 237, 0.34);

	border-radius: 50%;

	font-size: 18px;

	color: #F3F0ED;

	transition:
		color 220ms ease,
		border-color 220ms ease,
		box-shadow 220ms ease;
}


.av-projects-item.is-active
.av-projects-item__arrow {
	color: #FF5A00;

	border-color: #FF5A00;

	box-shadow:
		0 0 10px rgba(255, 90, 0, 0.20);
}



/* =========================================================
   HOVER
========================================================= */

.av-projects-item:hover
.av-projects-item__title {
	color: #FFFFFF;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.av-projects-bottom {
	width: 100%;

	padding:
		120px
		0
		140px;

	background: #000;
}


.av-projects-bottom__inner {
	width: calc(100% - 96px);
	max-width: 1320px;

	margin: 0 auto;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	text-align: center;
	direction: rtl;
}


/* TITLE */

.av-projects-bottom__text {
	margin: 0;

	font-family: "Gofteh", sans-serif;
	font-size: 40px;
	font-weight: 500;
	line-height: 1.7;

	color: #F3F0ED;

	text-align: center;
}


.av-projects-bottom__text span {
	color: #FF5A00;
	font-weight: 700;
}


/* BUTTON */

.av-projects-bottom__button {
	position: relative;

	width: 210px;
	height: 58px;

	margin-top: 42px;

	padding: 0 22px;

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

	gap: 18px;

	border:
		1px solid #FF5A00;

	border-radius: 30px;

	font-family: "Kalameh", sans-serif;
	font-size: 18px;
	font-weight: 500;

	color: #F3F0ED;

	text-decoration: none;

	background:
		rgba(255, 90, 0, 0.04);

	box-shadow:
		0 0 10px rgba(255, 90, 0, 0.18),
		0 0 24px rgba(255, 90, 0, 0.10);

	transition:
		transform 240ms ease,
		background 240ms ease,
		box-shadow 240ms ease;

	animation:
		av-projects-cta-pulse
		3.2s
		ease-in-out
		infinite;
}


/* CINEMATIC GLOW */

.av-projects-bottom__button::before {
	content: "";

	position: absolute;

	inset: -18px;

	z-index: -1;

	border-radius: 40px;

	background:
		radial-gradient(
			ellipse at center,
			rgba(255, 90, 0, 0.22) 0%,
			rgba(127, 47, 16, 0.12) 40%,
			rgba(0, 0, 0, 0) 72%
		);

	filter: blur(14px);

	opacity: 0.7;

	pointer-events: none;

	animation:
		av-projects-cta-glow
		3.2s
		ease-in-out
		infinite;
}


/* HOVER */

.av-projects-bottom__button:hover {
	transform: translateY(-2px) scale(1.02);

	background:
		rgba(255, 90, 0, 0.08);

	box-shadow:
		0 0 12px rgba(255, 90, 0, 0.30),
		0 0 30px rgba(255, 90, 0, 0.16);
}


/* PULSE */

@keyframes av-projects-cta-pulse {

	0%,
	100% {
		box-shadow:
			0 0 8px rgba(255, 90, 0, 0.16),
			0 0 18px rgba(255, 90, 0, 0.08);
	}

	50% {
		box-shadow:
			0 0 16px rgba(255, 90, 0, 0.34),
			0 0 38px rgba(255, 90, 0, 0.18);
	}

}


/* GLOW BREATHING */

@keyframes av-projects-cta-glow {

	0%,
	100% {
		opacity: 0.35;
		transform: scale(0.96);
	}

	50% {
		opacity: 0.9;
		transform: scale(1.08);
	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.av-projects-hero__container,
	.av-projects-showcase__container,
	.av-projects-bottom__inner {
		width: calc(100% - 64px);
	}


	.av-projects-hero__container {
		padding-top: 180px;
	}


	.av-projects-showcase {
		padding-top: 80px;
	}


	.av-projects-showcase__container {
		grid-template-columns:
			360px
			minmax(0, 1fr);

		column-gap: 42px;
	}


	.av-projects-hero__title {
		font-size: 52px;
	}


	.av-projects-item__title {
		font-size: 24px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

	.av-projects-hero__container,
	.av-projects-showcase__container,
	.av-projects-bottom__inner {
		width: calc(100% - 40px);
	}


	.av-projects-hero {
		min-height: auto;

		padding-bottom: 64px;
	}


	.av-projects-hero__container {
		padding-top: 150px;
	}


	.av-projects-hero__title {
		font-size: 40px;
	}


	.av-projects-hero__description {
		font-size: 17px;
	}


	.av-projects-showcase {
		padding:
			64px
			0
			90px;
	}


	.av-projects-showcase__container {
		display: flex;
		flex-direction: column;

		gap: 46px;
	}


	.av-projects-showcase__preview {
		position: relative;
		top: auto;

		order: 1;
	}


	.av-projects-showcase__list {
		order: 2;
	}


	.av-projects-preview__frame {
		aspect-ratio: 4 / 4.8;
	}


	.av-projects-item {
		grid-template-columns:
			42px
			minmax(0, 1fr)
			34px;

		min-height: 88px;

		column-gap: 12px;
	}


	.av-projects-item__year {
		display: none;
	}


	.av-projects-item__number {
		font-size: 12px;
	}


	.av-projects-item__title {
		font-size: 20px;
	}


	.av-projects-item__services {
		font-size: 18px;
	}


	.av-projects-item__arrow {
		width: 30px;
		height: 30px;
	}


	.av-projects-bottom {
		padding-bottom: 90px;
	}


	.av-projects-bottom__text {
		font-size: 22px;
	}

}

.av-projects-item__number {
	align-self: end;
	margin-bottom: 3px;
}



/* PROJECTS HERO — MOBILE */
@media (max-width: 768px) {

    .av-projects-hero {
        height: 620px;
        min-height: 0;
        padding-bottom: 0;
    }

    .av-projects-hero__container {
        width: calc(100% - 40px);
        height: 100%;
        padding-top: 0;
        box-sizing: border-box;

        justify-content: center;
        transform: translateY(-65px);
    }

    .av-projects-hero__title {
        width: 100%;
        max-width: 100%;
        font-size: 36px;
        line-height: 1.25;
    }

    .av-projects-hero__description {
    width: 70%;
    max-width: 320px;
    margin-left: 0;
    margin-right: 0;
    align-self: flex-start;
    text-align: right;
    font-size: 18px;
}

    .av-projects-hero__media img {
        object-position: 15% center;
    }
}

/* =========================================================
   PROJECTS LIST — MOBILE ALIGNMENT
   Number on the left; title and services on the right.
========================================================= */
@media (max-width: 768px) {
    .av-projects-showcase__list {
        height: auto;
        max-height: none;
        overflow-y: visible;
        overflow-x: visible;
        padding: 0;
    }

    .av-projects-item {
        width: 100%;
        min-height: 0;
        padding: 22px 0;
        margin: 0;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: auto;
        column-gap: 16px;
        align-items: start;
        direction: ltr;
        box-sizing: border-box;
    }

    .av-projects-item__number {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        justify-self: start;
        margin: 5px 0 0;
        font-size: 12px;
        line-height: 1.4;
    }

    .av-projects-item__content {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
        direction: rtl;
        text-align: right;
    }

    .av-projects-item__title {
        margin: 0;
        font-size: 24px;
        line-height: 1.45;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .av-projects-item__services {
        margin: 0;
        font-size: 18px;
        line-height: 1.7;
        text-align: right;
        overflow-wrap: break-word;
    }

    .av-projects-item__arrow {
        display: none;
    }
}