/* =====================================================================
   Seção "Nosso novo projeto." (patterns/primeira-pessoa.php): a tela ocupa as três colunas da grade e o clip-path a
   recua até a coluna central; o JS (primeira-pessoa.js) põe --pov-g (o recuo em px) e --pov-abre (0 emoldurada,
   1 aberta) conforme a rolagem, e .is-on enquanto o vídeo está entre 10,3 e 33,4 s.
   ===================================================================== */

.gvsx-pov__screen {
	grid-area: 2 / 1 / 3 / 4;
	position: relative;
	z-index: 1;
	isolation: isolate;
	overflow: clip;
	min-height: max(calc(100svh - var(--gvsx-header-h)), 560px);
	background: #050705;
	color: var(--gvsx-media-text);
	clip-path: inset(0 calc((1 - var(--pov-abre, 0)) * var(--pov-g, 0px)) round calc((1 - var(--pov-abre, 0)) * var(--gvsx-radius-block)));
}

.gvsx-pov__poster, .gvsx-pov__poster img, .gvsx-pov__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.gvsx-pov__poster img, .gvsx-pov__video { object-fit: cover; display: block; }
.gvsx-pov__video { transition: opacity 0.3s ease; }
.gvsx-pov__video.is-waiting { opacity: 0; }

.gvsx-pov__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(20deg, rgb(3 6 4 / 0.8), rgb(3 6 4 / 0) 55%);
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

/* bloco: cada linha sobe de dentro da própria máscara, desfocada para nítida (o gesto das frases do teaser) */
.gvsx-pov__block {
	position: absolute;
	left: calc(var(--pov-g, 0px) + var(--gvsx-block-x));
	bottom: clamp(48px, 9vh, 120px);
	max-width: min(760px, calc(100% - 2 * var(--gvsx-block-x)));
}
.gvsx-pov__line { display: block; overflow: hidden; padding: 0.06em 0.1em 0.12em; margin: 0 -0.1em; }
.gvsx-pov__line > * {
	display: inline-flex;
	align-items: center;
	transition: transform 0.45s cubic-bezier(0.4, 0, 1, 1), filter 0.45s ease, opacity 0.45s ease;
}
/* escondido só com o script rodando (.is-js): se ele falhar, o texto fica na tela, com o scrim e sem os botões mortos */
.gvsx-pov.is-js .gvsx-pov__line > * { transform: translateY(115%); filter: blur(6px); opacity: 0; }
.gvsx-pov:not(.is-js) .gvsx-pov__scrim { opacity: 1; }
.gvsx-pov:not(.is-js) .gvsx-pov__cta, .gvsx-pov:not(.is-js) .gvsx-pov__ctrls { display: none; }
.gvsx-pov.is-on .gvsx-pov__scrim, .gvsx-pov__screen:has(.gvsx-pov__block:focus-within) .gvsx-pov__scrim { opacity: 1; }
.gvsx-pov.is-on .gvsx-pov__line > *, .gvsx-pov__block:focus-within .gvsx-pov__line > * {
	transform: none;
	filter: blur(0);
	opacity: 1;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 80ms), filter 0.6s ease calc(var(--i, 0) * 80ms), opacity 0.3s ease calc(var(--i, 0) * 80ms);
}
/* sem texto escondido clicável: o bloco só recebe clique enquanto aparece */
.gvsx-pov.is-js:not(.is-on):not(.is-reduced) .gvsx-pov__block:not(:focus-within) { pointer-events: none; }
/* com o foco dentro, o bloco está todo à mostra: a máscara da linha cortaria o anel de foco (contorno 2px + 3px fora) */
.gvsx-pov__block:focus-within .gvsx-pov__line { overflow: visible; }

.gvsx-pov__chip { gap: 0.6em; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.gvsx-pov__title { margin: 0.35em 0 0.3em; font-size: clamp(3rem, 7.2vw, 7.5rem); line-height: 0.95; color: var(--gvsx-media-text); }
.gvsx-pov__sub { font-size: 1.05rem; color: var(--gvsx-media-text-2); }
.gvsx-pov__cta, .gvsx-pov__ctrls button {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
	border: 1px solid rgb(244 247 245 / 0.3);
	background: rgb(8 11 9 / 0.45);
	color: var(--gvsx-media-text);
	backdrop-filter: blur(6px);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.gvsx-pov__cta { margin-top: 1.2rem; min-height: 48px; padding: 0 1.4rem; border-radius: 999px; font: inherit; font-weight: 600; }
.gvsx-pov__cta .gvsx-i { color: var(--gvsx-accent); }
.gvsx-pov__cta:hover, .gvsx-pov__ctrls button:hover { border-color: rgb(244 247 245 / 0.6); background: rgb(8 11 9 / 0.65); }

/* controles que ficam sempre: pausar/tocar e som, acima do botão fixo do WhatsApp (canto inferior direito, 58 px a 20 px da borda) */
.gvsx-pov__ctrls { position: absolute; right: calc(var(--pov-g, 0px) + 24px); bottom: 96px; display: flex; gap: 10px; }
.gvsx-pov__ctrls button { position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.gvsx-pov__i-play { display: none; }
.gvsx-pov__pause.is-paused .gvsx-pov__i-play { display: block; }
.gvsx-pov__pause.is-paused .gvsx-pov__i-pause { display: none; }
.gvsx-pov__som[aria-pressed="false"]::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px;
	background: currentColor; border-radius: 1px; transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 781px) {
	.gvsx-pov__block {
		left: 0; right: 0; bottom: 140px; max-width: none;
		padding: 0 var(--gvsx-gutter-min);
		text-align: center;
	}
	.gvsx-pov__line > * { justify-content: center; }
	.gvsx-pov__title { font-size: clamp(2.5rem, 12vw, 3.5rem); }
	.gvsx-pov__sub { font-size: 0.95rem; }
	.gvsx-pov__ctrls { right: 16px; bottom: 76px; }
	.gvsx-pov__scrim { background: linear-gradient(to top, rgb(3 6 4 / 0.85), rgb(3 6 4 / 0) 60%); }
}

/* movimento reduzido (ou economia de dados): moldura aberta, bloco parado e visível, sem transições */
.gvsx-pov.is-reduced { --pov-abre: 1; }
.gvsx-pov.is-reduced .gvsx-pov__scrim { opacity: 1; transition: none; }
.gvsx-pov.is-reduced .gvsx-pov__line > * { transform: none; filter: none; opacity: 1; transition: none; }