/**
 * هیرو صفحه اصلی هانل — تمام‌قد، تصویر بدون برش، دکمه‌های تخت
 */

.hanel-hero {
	--hanel-hero-gold: #c5a059;
	--hanel-hero-gold-soft: #e8c979;
	--hanel-hero-ink: #151923;
	--hanel-hero-text: #ffffff;
	--hanel-hero-offset: 4.5rem;

	position: relative;
	isolation: isolate;
	display: block;
	width: 100%;
	height: 100vh;
	height: 100svh;
	max-height: 100vh;
	max-height: 100svh;
	/* هدر sticky در جریان جا می‌گیرد؛ هیرو زیر آن کشیده می‌شود */
	margin-block-start: calc(-1 * var(--hanel-hero-offset));
	overflow: hidden;
	color: var(--hanel-hero-text);
	background: #0d1015;
}

/* —— لایه تصویر —— */
.hanel-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.hanel-hero__picture {
	position: absolute;
	inset: 0;
	display: block;
}

/* تصویر خام و بدون هیچ لایه افکتی
   لنگر پایین: موج طلایی انتهای تصویر هرگز بریده نمی‌شود */
.hanel-hero__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	filter: none;
}

/* —— محتوا —— */
.hanel-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding-block-start: calc(var(--hanel-hero-offset) + 1.25rem + env(safe-area-inset-top, 0px));
	padding-block-end: calc(clamp(5.25rem, 12vh, 7.5rem) + env(safe-area-inset-bottom, 0px));
	padding-inline: clamp(1rem, 4vw, 2rem);
	margin: 0;
	pointer-events: none;
}

.hanel-hero__main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(0.7rem, 1.8vw, 1.35rem);
	width: min(100%, 48rem);
	text-align: center;
	pointer-events: auto;
}

.hanel-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.55rem, 1.8vw, 0.95rem);
	margin: 0;
	color: var(--hanel-hero-gold-soft);
	font-size: clamp(0.68rem, 1.2vw, 0.88rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.2;
}

.hanel-hero__eyebrow-text {
	line-height: 1;
}

.hanel-hero__eyebrow-line {
	display: block;
	width: clamp(1.6rem, 5vw, 3.6rem);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--hanel-hero-gold), transparent);
	opacity: 0.9;
	transform-origin: center;
}

.hanel-hero__logo {
	display: grid;
	place-items: center;
	width: min(100%, 38rem);
}

.hanel-hero__logo-image {
	display: block;
	width: min(100%, 32rem);
	height: auto;
	max-height: clamp(5.75rem, 17vh, 11.5rem);
	object-fit: contain;
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.32));
}

.hanel-hero__logo-fallback {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(3.25rem, 11vw, 7rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 0.95;
	color: #fff;
	text-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.hanel-hero__tagline {
	margin: 0;
	max-width: 36rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(0.92rem, 1.7vw, 1.28rem);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.75;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.hanel-hero__word {
	display: inline-block;
	overflow: hidden;
	padding-block-end: 0.08em;
	margin-block-end: -0.08em;
	vertical-align: bottom;
}

.hanel-hero__word-inner {
	display: inline-block;
}

/* خط طلایی نازک بین شعار و دکمه‌ها */
.hanel-hero__rule {
	display: block;
	width: clamp(2.4rem, 8vw, 4.25rem);
	height: 1px;
	margin-block: 0.15rem 0.1rem;
	background: linear-gradient(
		90deg,
		transparent,
		var(--hanel-hero-gold-soft) 22%,
		var(--hanel-hero-gold) 50%,
		var(--hanel-hero-gold-soft) 78%,
		transparent
	);
	opacity: 0.85;
}

/* —— دکمه‌ها: کاملاً تخت —— */
.hanel-hero__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: center;
	gap: clamp(0.5rem, 1.8vw, 0.9rem);
	margin-block-start: 0.15rem;
	width: 100%;
	max-width: 28rem;
}

.hanel-hero__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex: 1 1 0;
	min-width: 0;
	min-height: 3rem;
	padding-block: 0.8rem;
	padding-inline: 1.25rem;
	border-radius: 999px;
	border: 1.5px solid transparent;
	background: transparent;
	box-shadow: none;
	filter: none;
	transform: none;
	font-size: clamp(0.84rem, 1.5vw, 0.98rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.22s ease,
		color 0.22s ease,
		border-color 0.22s ease;
}

.hanel-hero__btn-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 1.1rem;
	height: 1.1rem;
	color: inherit;
}

.hanel-hero__btn-icon .hanel-icon {
	width: 1.1rem;
	height: 1.1rem;
	stroke-width: 1.85;
}

.hanel-hero__btn-label {
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* اصلی: منو — طلایی تخت */
.hanel-hero__btn--solid {
	color: var(--hanel-hero-ink);
	background-color: var(--hanel-hero-gold);
	border-color: var(--hanel-hero-gold);
}

.hanel-hero__btn--solid:hover {
	color: var(--hanel-hero-ink);
	background-color: var(--hanel-hero-gold-soft);
	border-color: var(--hanel-hero-gold-soft);
}

/* ثانویه: فروشگاه — شیشه‌ای تخت، بدون سه‌بعدی */
.hanel-hero__btn--ghost {
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.42);
	backdrop-filter: blur(12px) saturate(1.15);
	-webkit-backdrop-filter: blur(12px) saturate(1.15);
	transform: none !important;
	filter: none !important;
}

.hanel-hero__btn--ghost:hover {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.18);
	border-color: rgba(232, 201, 121, 0.7);
}

.hanel-hero__btn:focus-visible {
	outline: 2px solid var(--hanel-hero-gold-soft);
	outline-offset: 3px;
}

/* —— اسکرول —— */
.hanel-hero__scroll {
	position: absolute;
	bottom: calc(clamp(1.1rem, 3.5vh, 2.25rem) + env(safe-area-inset-bottom, 0px));
	left: 50%;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	width: auto;
	color: var(--hanel-hero-gold-soft);
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.12em;
	text-decoration: none;
	pointer-events: auto;
	transform: translateX(-50%);
	transition: color 0.2s ease;
}

.hanel-hero__scroll-cue {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
}

.hanel-hero__scroll-line {
	display: block;
	width: 1px;
	height: 1.15rem;
	background: linear-gradient(180deg, transparent, var(--hanel-hero-gold-soft));
	opacity: 0.85;
}

.hanel-hero__scroll-chevron {
	display: grid;
	place-items: center;
	width: 1.85rem;
	height: 1.85rem;
	border: 1px solid rgba(232, 201, 121, 0.45);
	border-radius: 50%;
	animation: hanel-hero-scroll 2.1s ease-in-out 1.5s infinite;
}

.hanel-hero__scroll-chevron .hanel-icon {
	width: 1.05rem;
	height: 1.05rem;
	stroke-width: 1.8;
}

.hanel-hero__scroll:hover,
.hanel-hero__scroll:focus-visible {
	color: #f0d78f;
}

.hanel-hero__scroll:focus-visible {
	outline: 2px solid var(--hanel-hero-gold-soft);
	outline-offset: 4px;
	border-radius: 0.5rem;
}

.hanel-hero__scroll:hover .hanel-hero__scroll-chevron,
.hanel-hero__scroll:focus-visible .hanel-hero__scroll-chevron {
	border-color: rgba(240, 215, 143, 0.8);
}

/* —— انیمیشن ورود: همزمان، بدون تأخیر —— */
.hanel-hero:not(.hanel-hero--await):not(.is-hero-animated) .hanel-hero__eyebrow,
.hanel-hero:not(.hanel-hero--await):not(.is-hero-animated) .hanel-hero__logo,
.hanel-hero:not(.hanel-hero--await):not(.is-hero-animated) .hanel-hero__tagline,
.hanel-hero:not(.hanel-hero--await):not(.is-hero-animated) .hanel-hero__rule,
.hanel-hero:not(.hanel-hero--await):not(.is-hero-animated) .hanel-hero__actions {
	opacity: 0;
	animation: hanel-hero-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hanel-hero:not(.hanel-hero--await):not(.is-hero-animated) .hanel-hero__scroll {
	opacity: 0;
	animation: hanel-hero-in-center 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.hanel-gsap .hanel-hero:not(.hanel-hero--await):not(.is-hero-animated) .hanel-hero__eyebrow,
html.hanel-gsap .hanel-hero:not(.hanel-hero--await):not(.is-hero-animated) .hanel-hero__logo,
html.hanel-gsap .hanel-hero:not(.hanel-hero--await):not(.is-hero-animated) .hanel-hero__tagline,
html.hanel-gsap .hanel-hero:not(.hanel-hero--await):not(.is-hero-animated) .hanel-hero__rule,
html.hanel-gsap .hanel-hero:not(.hanel-hero--await):not(.is-hero-animated) .hanel-hero__actions,
html.hanel-gsap .hanel-hero:not(.hanel-hero--await):not(.is-hero-animated) .hanel-hero__scroll {
	animation: none;
}

.hanel-hero--await .hanel-hero__eyebrow,
.hanel-hero--await .hanel-hero__logo,
.hanel-hero--await .hanel-hero__tagline,
.hanel-hero--await .hanel-hero__rule,
.hanel-hero--await .hanel-hero__actions,
.hanel-hero--await .hanel-hero__scroll {
	animation: none;
	opacity: 0;
}

.hanel-hero.is-hero-ready .hanel-hero__eyebrow,
.hanel-hero.is-hero-ready .hanel-hero__logo,
.hanel-hero.is-hero-ready .hanel-hero__tagline,
.hanel-hero.is-hero-ready .hanel-hero__rule,
.hanel-hero.is-hero-ready .hanel-hero__actions,
.hanel-hero.is-hero-ready .hanel-hero__scroll,
.hanel-hero.is-hero-animated .hanel-hero__eyebrow,
.hanel-hero.is-hero-animated .hanel-hero__logo,
.hanel-hero.is-hero-animated .hanel-hero__tagline,
.hanel-hero.is-hero-animated .hanel-hero__rule,
.hanel-hero.is-hero-animated .hanel-hero__actions,
.hanel-hero.is-hero-animated .hanel-hero__scroll {
	animation: none;
	opacity: 1;
}

@keyframes hanel-hero-in {
	from {
		opacity: 0;
		transform: translate3d(0, 1.15rem, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes hanel-hero-in-center {
	from {
		opacity: 0;
		transform: translate3d(-50%, 0.85rem, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes hanel-hero-scroll {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(6px);
	}
}

/* —— تبلت —— */
@media (max-width: 1024px) {
	.hanel-hero__actions {
		max-width: 27rem;
	}
}

/* هم‌ترازی با ارتفاع هدر در نبود جاوااسکریپت */
@media (max-width: 900px) {
	.hanel-hero {
		--hanel-hero-offset: 4.1rem;
	}
}

@media (max-width: 480px) {
	.hanel-hero {
		--hanel-hero-offset: 3.9rem;
	}
}

/* —— موبایل: دو دکمه کنار هم —— */
@media (max-width: 767px) {
	.hanel-hero__content {
		padding-block-start: calc(var(--hanel-hero-offset) + 0.85rem + env(safe-area-inset-top, 0px));
		padding-block-end: calc(clamp(4.35rem, 11vh, 5.75rem) + env(safe-area-inset-bottom, 0px));
		padding-inline: 1rem;
	}

	.hanel-hero__main {
		gap: 0.7rem;
		width: 100%;
	}

	.hanel-hero__eyebrow {
		gap: 0.45rem;
		font-size: 0.64rem;
		letter-spacing: 0.14em;
	}

	.hanel-hero__eyebrow-line {
		width: 1.35rem;
	}

	.hanel-hero__logo-image {
		width: min(100%, 16.5rem);
		max-height: clamp(4.75rem, 15vh, 8rem);
	}

	.hanel-hero__tagline {
		max-width: 24rem;
		font-size: 0.9rem;
		line-height: 1.65;
	}

	.hanel-hero__rule {
		width: 2.15rem;
	}

	/* کنار هم — بدون شکستن به ستون */
	.hanel-hero__actions {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 0.5rem;
		width: 100%;
		max-width: 22rem;
		margin-block-start: 0.1rem;
	}

	.hanel-hero__btn {
		flex: 1 1 0;
		min-width: 0;
		min-height: 2.85rem;
		gap: 0.35rem;
		padding-block: 0.65rem;
		padding-inline: 0.7rem;
		font-size: 0.8rem;
		border-width: 1.25px;
	}

	.hanel-hero__btn-icon,
	.hanel-hero__btn-icon .hanel-icon {
		width: 1rem;
		height: 1rem;
	}

	.hanel-hero__scroll {
		bottom: calc(0.95rem + env(safe-area-inset-bottom, 0px));
		font-size: 0.66rem;
		letter-spacing: 0.1em;
		gap: 0.3rem;
	}

	.hanel-hero__scroll-line {
		height: 0.85rem;
	}

	.hanel-hero__scroll-chevron {
		width: 1.6rem;
		height: 1.6rem;
	}

	.hanel-hero__scroll-chevron .hanel-icon {
		width: 0.95rem;
		height: 0.95rem;
	}
}

/* موبایل باریک */
@media (max-width: 380px) {
	.hanel-hero__btn {
		padding-inline: 0.5rem;
		font-size: 0.74rem;
		gap: 0.28rem;
	}

	.hanel-hero__btn-icon,
	.hanel-hero__btn-icon .hanel-icon {
		width: 0.9rem;
		height: 0.9rem;
	}

	.hanel-hero__tagline {
		font-size: 0.84rem;
	}

	.hanel-hero__actions {
		max-width: 100%;
	}
}

/* صفحه‌های کوتاه (لنداسکیپ موبایل) */
@media (max-height: 560px) and (orientation: landscape) {
	.hanel-hero__content {
		padding-block-start: calc(var(--hanel-hero-offset) + 0.4rem);
		padding-block-end: 2.75rem;
	}

	.hanel-hero__main {
		gap: 0.5rem;
	}

	.hanel-hero__logo-image {
		max-height: 4.25rem;
	}

	.hanel-hero__tagline,
	.hanel-hero__rule,
	.hanel-hero__scroll {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hanel-hero__eyebrow,
	.hanel-hero__logo,
	.hanel-hero__tagline,
	.hanel-hero__rule,
	.hanel-hero__actions,
	.hanel-hero__scroll,
	.hanel-hero__scroll-chevron,
	.hanel-hero--await .hanel-hero__eyebrow,
	.hanel-hero--await .hanel-hero__logo,
	.hanel-hero--await .hanel-hero__tagline,
	.hanel-hero--await .hanel-hero__rule,
	.hanel-hero--await .hanel-hero__actions,
	.hanel-hero--await .hanel-hero__scroll {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
	}

	.hanel-hero__scroll {
		transform: translateX(-50%) !important;
	}
}