/* GM Video Creator — Hero */

.gmvc-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 92vh;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
	background: var(--gmvc-bg);
}

.gmvc-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	transform-origin: center;
}

.gmvc-hero__media video,
.gmvc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gmvc-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(5, 5, 5, 0.35) 0%,
		rgba(5, 5, 5, 0.55) 45%,
		rgba(5, 5, 5, 0.95) 100%
	);
	pointer-events: none;
}

.gmvc-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: 120px 140px;
}

.gmvc-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 34px;
}

.gmvc-hero .gmvc-head {
	margin-bottom: 0;
	gap: 22px;
}

.gmvc-hero .gmvc-title {
	font-size: clamp(38px, 6.4vw, 84px);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.98;
	max-width: 17ch;
}

.gmvc-hero .gmvc-subtitle {
	max-width: 58ch;
	color: rgba(255, 255, 255, 0.72);
	font-size: clamp(15px, 1.4vw, 19px);
}

.gmvc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* Indicador de rolagem */
.gmvc-hero__scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 26px;
	height: 42px;
	padding-top: 8px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--gmvc-radius-pill);
	transform: translateX(-50%);
	transition: border-color 300ms var(--gmvc-ease);
}

.gmvc-hero__scroll:hover {
	border-color: var(--gmvc-accent);
}

.gmvc-hero__scroll-dot {
	width: 4px;
	height: 8px;
	border-radius: 4px;
	background: var(--gmvc-accent);
	animation: gmvc-hero-scroll 1.8s var(--gmvc-ease) infinite;
}

@keyframes gmvc-hero-scroll {
	0% {
		opacity: 0;
		transform: translateY(0);
	}
	35% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(16px);
	}
}

@media (max-width: 767px) {
	.gmvc-hero__inner {
		padding-block: 96px 110px;
	}

	.gmvc-hero__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.gmvc-hero__actions .gmvc-btn {
		width: 100%;
	}
}