/* Prascucuias Met Hero ------------------------------------------------------
   Estrutura: .prc-hero > .prc-hero__media (obra + shader WebGL) + .prc-hero__frame (texto)
   O fundo é o motor WebGL do Met Shader Hero; o escurecimento e a retícula ficam
   por cima dele para o texto nunca perder contraste.
--------------------------------------------------------------------------- */

.prc-hero {
	--prc-ink: #f4f1ea;
	--prc-hover: #26c9c8;
	--prc-bg: #070605;
	--prc-font: "ClashDisplay", "Clash Display", "Archivo", "Helvetica Neue", Arial, sans-serif;
	--prc-small: clamp(11px, 0.92vw, 14px);
	--prc-tiny: clamp(9px, 0.7vw, 11px);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	justify-content: center;
	min-height: clamp(560px, 90svh, 920px);
	margin: 0;
	padding-top: 9em; /* espaço para o header do tema, que fica por cima do hero */
	background: var(--prc-bg);
	color: var(--prc-ink);
	font-family: var(--prc-font);
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.prc-hero *,
.prc-hero *::before,
.prc-hero *::after { box-sizing: border-box; }
.prc-hero a {
	color: inherit;
	font-weight: 600;
}
.prc-hero a:hover { color: var(--prc-hover); }

/* Mídia ------------------------------------------------------------------ */

.prc-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: #000;
	transition: opacity 0.45s ease;
}

/* Imagem estática: aparece antes do WebGL e fica como reserva sem ele. */
.prc-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: 50% 32%;
	filter: saturate(0.85) brightness(0.9);
}

.prc-hero__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.9s ease;
}
.prc-hero.has-gl .prc-hero__canvas { opacity: 1; }

.prc-hero__shade,
.prc-hero__screen {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Escurecimento: garante leitura do branco sobre qualquer obra. */
.prc-hero__shade {
	background:
		radial-gradient(ellipse 70% 60% at 50% 46%, rgba(8, 6, 4, 0.5), rgba(8, 6, 4, 0.86) 100%),
		linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));
}

/* Retícula fina (o "ponto" de impressão do layout). */
.prc-hero__screen {
	background-image: radial-gradient(circle, rgba(0, 0, 0, 0.62) 0 0.9px, transparent 1.3px);
	background-size: 3px 3px;
	mix-blend-mode: multiply;
}
/* O shader Retícula já tem os próprios pontos: a tela fina por cima só faria moiré. */
.prc-hero[data-shader="halftone"] .prc-hero__screen { opacity: 0.3; }

/* Moldura e tipografia ----------------------------------------------------- */

.prc-hero__frame {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: minmax(40px, 1fr) auto auto auto minmax(40px, 0.9fr) auto auto;
	justify-items: stretch;
	width: min(100% - 32px, max(69%, 720px), 1120px);
	padding-block: 22px 22px;
}

.prc-hero__kicker {
	grid-row: 2;
	justify-self: center;
	margin: 0 0 clamp(18px, 2.2vw, 32px);
	font-size: var(--prc-tiny);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.85;
}

.prc-hero__lede {
	--fs: clamp(40px, 5.2vw, 96px);
	grid-row: 3;
	max-width: 15.5em;
	margin: 0;
	font-size: var(--fs);
	line-height: 0.98;
	text-transform: uppercase;
	text-wrap: pretty;
}
.prc-hero__lede[data-size="xl"] { --fs: clamp(46px, 6.6vw, 124px); max-width: 11em; }
.prc-hero__lede[data-size="m"]  { --fs: clamp(34px, 4.3vw, 80px);  max-width: 18em; }
.prc-hero__lede[data-size="s"]  { --fs: clamp(30px, 3.5vw, 64px);  max-width: 21em; }

.prc-hero__quote,
.prc-hero__verse {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font: inherit;
	color: inherit;
	background: none;
}
.prc-hero__quote::before,
.prc-hero__quote::after { content: none; }

.prc-hero__verse {
	font-weight: 500;
	letter-spacing: -0.035em;
	word-spacing: 0.04em;
	text-shadow: 0 0 0.6em rgba(0, 0, 0, 0.35);
}

/* Rótulo da coluna encaixado no recuo da primeira linha. */
.prc-hero__column {
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	margin-right: clamp(14px, 1.8vw, 28px);
	font-size: var(--prc-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	vertical-align: calc(var(--fs) * 0.34 - 0.36em);
	text-shadow: none;
}
.prc-hero__column[hidden] { display: none; }

.prc-hero__arrow {
	width: 1.55em;
	height: 0.75em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	vertical-align: middle;
	transition: transform 0.25s ease;
}
.prc-hero a:hover .prc-hero__arrow,
.prc-hero a:focus-visible .prc-hero__arrow { transform: translateX(4px); }

.prc-hero__meta {
	grid-row: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
	margin-top: clamp(18px, 2vw, 30px);
	font-size: var(--prc-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.prc-hero__read {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	min-height: 44px;
	padding: 0.5em 1.6em;
	text-decoration: none;
}
.prc-hero__read .prc-hero__arrow { width: 1.3em; }

.prc-hero__ring {
	position: absolute;
	inset: -2px -4px;
	width: calc(100% + 8px);
	height: calc(100% + 4px);
	overflow: visible;
	pointer-events: none;
	transition: transform 0.4s cubic-bezier(.3, 1.6, .5, 1);
}
.prc-hero__ring ellipse {
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
.prc-hero__read:hover .prc-hero__ring,
.prc-hero__read:focus-visible .prc-hero__ring { transform: rotate(-3deg) scale(1.04); }

.prc-hero__source {
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 0 0 0 auto;
}
.prc-hero__title { text-decoration: none; }
.prc-hero__title:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.prc-hero__source time { font-weight: 500; letter-spacing: 0.04em; }

.prc-hero__more {
	grid-row: 6;
	justify-self: center;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 0 0 clamp(18px, 2.4vw, 36px);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--prc-tiny);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}
.prc-hero__more-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(36px, 2.8vw, 46px);
	aspect-ratio: 1;
}
.prc-hero__more-icon .prc-hero__ring { inset: 0; width: 100%; height: 100%; }
.prc-hero__updown {
	width: 48%;
	height: 48%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	transition: transform 0.5s cubic-bezier(.3, 1.4, .5, 1);
}
.prc-hero__more:hover .prc-hero__ring,
.prc-hero__more:focus-visible .prc-hero__ring { transform: rotate(25deg); }
.prc-hero.is-loading .prc-hero__updown { transform: rotate(180deg); }
.prc-hero.is-loading .prc-hero__more { cursor: progress; }

.prc-hero a:focus-visible,
.prc-hero__more:focus-visible {
	outline: 1px dashed currentColor;
	outline-offset: 6px;
}

.prc-hero__foot {
	grid-row: 7;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: var(--prc-tiny);
	font-weight: 600;
	letter-spacing: 0.04em;
	word-spacing: 1.1em;
	text-transform: uppercase;
	opacity: 0.9;
}

.prc-hero__credit {
	position: absolute;
	left: 100%;
	bottom: 22px;
	max-height: 62%;
	margin: 0;
	padding-left: 8px;
	overflow: hidden;
	writing-mode: vertical-rl;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.55;
	transition: opacity 0.2s;
}
.prc-hero__credit:hover { opacity: 1; }
.prc-hero__credit a { text-decoration: none; }
.prc-hero__credit[hidden] { display: none; }

.prc-hero__live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Troca de verso ("Outro verso"). Com WebGL, o próprio shader dissolve uma obra na outra. */
.prc-hero__swap { transition: opacity 0.38s ease, transform 0.38s ease; }
.prc-hero:not(.has-gl).is-swapping .prc-hero__media,
.prc-hero:not(.has-gl).is-imgswap .prc-hero__media { opacity: 0; }
.prc-hero.is-swapping .prc-hero__swap { opacity: 0; transform: translateY(6px); }
.prc-hero__credit { transition: opacity 0.4s ease; }
.prc-hero.is-crediting .prc-hero__credit { opacity: 0; }

/* Telas pequenas ----------------------------------------------------------- */
@media (max-width: 640px) {
	.prc-hero { min-height: max(560px, 92svh); }
	.prc-hero__frame { padding-block: 16px; }
	.prc-hero__lede { max-width: none; }
	.prc-hero__lede[data-size] { --fs: clamp(30px, 9.4vw, 52px); }
	.prc-hero__lede[data-size="s"] { --fs: clamp(26px, 7.6vw, 40px); }
	.prc-hero__column { display: flex; width: max-content; margin: 0 0 14px; vertical-align: baseline; }
	.prc-hero__column[hidden] { display: none; }
	.prc-hero__meta { flex-direction: column; align-items: flex-start; }
	.prc-hero__source { margin: 0; }
	.prc-hero__read { margin-left: -4px; }
	.prc-hero__foot { word-spacing: 0.4em; }
	.prc-hero__credit { padding-left: 3px; font-size: 9px; }
}

/* Movimento reduzido: o shader continua (bem mais lento, sem troca automática); as transições de CSS param. */
@media (prefers-reduced-motion: reduce) {
	.prc-hero,
	.prc-hero *,
	.prc-hero *::before,
	.prc-hero *::after {
		animation: none !important;
		transition: none !important;
	}
}