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

.hero {
	position: relative;
	height: 92vh;
	min-height: 560px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--ink);
}

.hero__media,
.hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero__img {
	object-fit: cover;
}

.hero__img--placeholder {
	background: linear-gradient(135deg, var(--ink) 0%, var(--graphite) 100%);
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 10, 0.05) 0%, rgba(10, 10, 10, 0.75) 100%);
}

.hero__content {
	position: relative;
	z-index: 1;
	color: var(--white);
	padding-bottom: var(--space-2xl);
	max-width: 760px;
}

.hero__title {
	color: var(--white);
	margin-bottom: var(--space-sm);
}

.hero__subtitle {
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--fs-md);
	max-width: 540px;
	margin-bottom: var(--space-md);
}

.hero__scroll-cue {
	position: absolute;
	bottom: var(--space-md);
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 48px;
	background: rgba(255, 255, 255, 0.4);
	overflow: hidden;
}

.hero__scroll-cue::after {
	content: '';
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--white);
	animation: acdc-current-travel 2.2s var(--ease) infinite;
}