/* Abertura cinematográfica: o markup permanece editável; véu e linhas são
   decoração e vivem somente em pseudo-elementos. */

/* O cabeçalho é fixed e a abertura nasce no topo da viewport, sob a pílula. */
.tsg-abertura {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: 100svh;
	padding: 160px max(var(--wp--preset--spacing--30), 6vw) 74px;
	overflow: hidden;
	background: var(--wp--preset--color--fundo-escuro);
	color: var(--wp--preset--color--branco);
}

.tsg-abertura::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--wp--custom--veu-abertura);
	pointer-events: none;
}

/* Quatro linhas em uma única camada evitam markup decorativo no pattern. */
.tsg-abertura::after {
	content: "";
	position: absolute;
	z-index: 1;
	right: -15%;
	bottom: 14%;
	left: -15%;
	height: 34vh;
	background-image:
		linear-gradient(90deg, transparent, var(--wp--preset--color--destaque-claro), transparent),
		linear-gradient(90deg, transparent, var(--wp--preset--color--destaque-claro), transparent),
		linear-gradient(90deg, transparent, var(--wp--preset--color--destaque-claro), transparent),
		linear-gradient(90deg, transparent, var(--wp--preset--color--destaque-claro), transparent);
	background-position: 0 6%, 0 32%, 0 58%, 0 84%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	opacity: 0.55;
	transform: rotate(-8deg);
	animation: tsg-abertura-linhas 6s linear infinite alternate;
	pointer-events: none;
}

.tsg-abertura .tsg-abertura__midia {
	position: absolute;
	inset: -10% 0 0;
	z-index: 0;
	width: 100%;
	height: 120%;
	margin: 0;
}

.tsg-abertura__midia video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.92) contrast(1.08);
	transform: scale(1.06);
}

.tsg-abertura__conteudo {
	position: relative;
	z-index: 2;
	width: min(900px, 100%);
	margin: 0;
}

.tsg-abertura__eyebrow {
	margin: 0 0 18px;
	color: var(--wp--preset--color--destaque-claro);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.tsg-abertura__titulo {
	max-width: 900px;
	margin: 0 0 24px;
	color: inherit;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: clamp(38px, 8vw, 104px) !important;
	font-weight: 700;
	line-height: 0.86;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.tsg-abertura__chamada {
	max-width: 660px;
	margin: 0;
	color: inherit;
	font-size: clamp(18px, 2.1vw, 26px) !important;
	line-height: 1.38;
	opacity: 0.84 !important;
}

@keyframes tsg-abertura-linhas {
	from {
		transform: translateX(-8%) rotate(-8deg);
	}
	to {
		transform: translateX(8%) rotate(-8deg);
	}
}

@media (max-width: 899px) {
	.tsg-abertura {
		/* No desktop o texto ancora no rodapé; em tablet/mobile sobe para o meio. */
		align-items: center;
		margin: 0 var(--wp--preset--spacing--40);
		min-height: 92svh;
		padding: 134px var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	}
}

@media (max-width: 767px) {
	.tsg-abertura {
		margin: 0 var(--wp--preset--spacing--20);
		padding-right: var(--wp--preset--spacing--20);
		padding-left: var(--wp--preset--spacing--20);
	}

	.tsg-abertura__titulo {
		line-height: 0.96;
	}

	.tsg-abertura__chamada {
		font-size: var(--wp--preset--font-size--body-lg);
		line-height: 1.45;
	}

}

@media (prefers-reduced-motion: reduce) {
	.tsg-abertura::after {
		animation: none;
	}
}