/**
 * Habcheh Landing — Intro pages (7 screens) visual layer.
 * Loaded after style.css; scoped to .hl-screen--intro only.
 */

.hl-screen--intro {
	--intro-art-width: min(70vw, calc(100dvh * 9 / 16));
	--intro-art-height: 100dvh;
	--intro-gold: #C7A96B;
	--intro-navy: #050a18;
	justify-content: stretch;
	background: var(--intro-navy);
}

/* ── Scene: flex-centered artwork ──────────────────────────── */
.hl-screen--intro .hl-scene {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--intro-navy) !important;
	background-image: none !important;
	pointer-events: none;
}

.hl-screen--intro .hl-scene__img {
	display: none !important;
}

.hl-intro-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}

.hl-intro-artwork {
	position: relative;
	flex: 0 0 auto;
	width: var(--intro-art-width);
	max-width: 70vw;
	height: var(--intro-art-height);
	max-height: var(--intro-art-height);
	margin: 0 auto;
	overflow: hidden;
}

.hl-intro-artwork__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain !important;
	object-position: center center;
}

/* ── Content layer mirrors artwork column ──────────────────── */
.hl-screen__body--intro {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	min-height: 0;
	pointer-events: none;
}

.hl-intro-stage--content {
	position: relative;
	width: var(--intro-art-width);
	max-width: 70vw;
	height: var(--intro-art-height);
	max-height: var(--intro-art-height);
	flex-shrink: 0;
	pointer-events: none;
}

/* ── Consistent navigation button placement ────────────────── */
.hl-intro-nav {
	position: absolute;
	bottom: clamp(1.25rem, 5vh, 2.75rem);
	left: clamp(1rem, 5vw, 2rem);
	right: clamp(1rem, 5vw, 2rem);
	max-width: 420px;
	margin-inline: auto;
	z-index: 3;
	pointer-events: auto;
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.hl-screen--intro.is-active .hl-intro-nav {
	opacity: 1;
	transform: none;
}

/* ── Premium intro buttons ─────────────────────────────────── */
.hl-screen--intro button.hl-btn--intro-next,
.hl-screen--intro .hl-btn.hl-btn--intro-next {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 0.88rem 1.4rem;
	border-radius: 16px !important;
	border: 2px solid var(--intro-gold) !important;
	background: linear-gradient(
		165deg,
		rgba(199, 169, 107, 0.28) 0%,
		rgba(5, 10, 24, 0.88) 55%,
		rgba(5, 10, 24, 0.94) 100%
	) !important;
	color: var(--intro-gold) !important;
	font-size: clamp(0.9rem, 2.4vw, 1rem);
	font-weight: 700;
	line-height: 1.4;
	box-shadow:
		0 4px 18px rgba(0, 0, 0, 0.32),
		0 0 22px rgba(199, 169, 107, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transition:
		transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
		background 0.35s ease;
}

.hl-screen--intro button.hl-btn--intro-next:hover,
.hl-screen--intro .hl-btn.hl-btn--intro-next:hover {
	transform: translateY(-3px);
	background: linear-gradient(
		165deg,
		rgba(199, 169, 107, 0.38) 0%,
		rgba(5, 10, 24, 0.82) 55%,
		rgba(5, 10, 24, 0.9) 100%
	) !important;
	color: var(--intro-gold) !important;
	box-shadow:
		0 8px 28px rgba(0, 0, 0, 0.36),
		0 0 32px rgba(199, 169, 107, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hl-screen--intro button.hl-btn--intro-gold,
.hl-screen--intro .hl-btn.hl-btn--intro-gold {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 0.92rem 1.4rem;
	border-radius: 16px !important;
	border: 2px solid rgba(255, 255, 255, 0.3) !important;
	background: linear-gradient(
		135deg,
		#e2cb8e 0%,
		var(--intro-gold) 42%,
		#9a7a42 100%
	) !important;
	color: var(--intro-navy) !important;
	font-size: clamp(0.92rem, 2.5vw, 1.04rem);
	font-weight: 800;
	line-height: 1.4;
	box-shadow:
		0 6px 26px rgba(199, 169, 107, 0.42),
		0 2px 10px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
	transition:
		transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hl-screen--intro button.hl-btn--intro-gold:hover,
.hl-screen--intro .hl-btn.hl-btn--intro-gold:hover {
	transform: translateY(-3px);
	color: var(--intro-navy) !important;
	box-shadow:
		0 10px 36px rgba(199, 169, 107, 0.55),
		0 4px 14px rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.hl-screen--intro button.hl-btn--intro-next:active,
.hl-screen--intro button.hl-btn--intro-gold:active {
	transform: translateY(0);
}

/* ── Mobile: full-width artwork ────────────────────────────── */
@media (max-width: 768px) {
	.hl-screen--intro {
		--intro-art-width: 100%;
		--intro-art-height: 100dvh;
	}

	.hl-intro-artwork,
	.hl-intro-stage--content {
		max-width: 100%;
		width: 100%;
	}

	.hl-intro-nav {
		bottom: clamp(1rem, 4vh, 2rem);
		left: clamp(0.875rem, 4vw, 1.25rem);
		right: clamp(0.875rem, 4vw, 1.25rem);
		max-width: none;
	}
}

@media (max-width: 420px) {
	.hl-screen--intro button.hl-btn--intro-next,
	.hl-screen--intro .hl-btn.hl-btn--intro-next,
	.hl-screen--intro button.hl-btn--intro-gold,
	.hl-screen--intro .hl-btn.hl-btn--intro-gold {
		min-height: 48px;
		padding: 0.82rem 1.1rem;
		font-size: 0.9rem;
	}
}

/* Beat WP / Elementor global img & button overrides on intro screens only */
#habcheh-landing .hl-screen--intro .hl-intro-artwork__img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: contain !important;
}

#habcheh-landing .hl-screen--intro button.hl-btn,
#habcheh-landing .hl-screen--intro .hl-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	text-decoration: none !important;
}

#habcheh-landing .hl-screen--intro .elementor-button-wrapper,
#habcheh-landing .hl-screen--intro .elementor-button {
	all: unset;
	box-sizing: border-box;
}