/* UP SCORE PRO® — fotos, figuras, ícones e animações. Complementa up.css. */

/* Cabeçalho mais firme ao rolar (classe posta por animacoes.js) */
.up-cabecalho { transition: background-color .35s, box-shadow .35s; }
.up-cabecalho.is-rolado { background: rgba(6, 8, 7, .92); box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }

/* Ouro com brilho que corre devagar */
.up-ouro, .up-num { background-size: 200% auto; animation: up-brilho 8s linear infinite; }
@keyframes up-brilho { to { background-position: 200% center; } }

/* Fundo com foto: véu escuro entre a imagem e o conteúdo */
.up-escuro { position: relative; isolation: isolate; overflow: hidden; background-color: #060807; }
.up-escuro::before {
	content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
	background:
		radial-gradient(900px 520px at 78% 18%, rgba(194, 179, 138, .14), transparent 62%),
		linear-gradient(180deg, rgba(6, 8, 7, .80) 0%, rgba(6, 8, 7, .72) 45%, rgba(6, 8, 7, .96) 100%);
}
.up-escuro.up-veu-lado::before {
	background: linear-gradient(90deg, rgba(6, 8, 7, .97) 0%, rgba(6, 8, 7, .86) 50%, rgba(6, 8, 7, .55) 100%);
}

.up-escuro.up-veu-forte::before {
	background: linear-gradient(180deg, rgba(6, 8, 7, .93) 0%, rgba(6, 8, 7, .86) 50%, rgba(6, 8, 7, .97) 100%);
}

/* Foto em arco (forma do manual de identidade), com hexágono girando atrás */
.up-figura { position: relative; max-width: 440px; margin: 0 auto; isolation: isolate; }
.up-arco { position: relative; margin: 0; overflow: hidden; border-radius: 999px 999px 22px 22px; }
.up-arco img {
	display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
	filter: saturate(.7) sepia(.2) contrast(1.05);
	transition: transform 1.8s cubic-bezier(.2, .7, .2, 1);
}
.up-figura::after {
	content: ""; position: absolute; inset: -12px; pointer-events: none;
	border: 1px solid rgba(194, 179, 138, .45); border-radius: 999px 999px 30px 30px;
}
.up-hex { position: absolute; width: 150%; left: -25%; top: -14%; z-index: -1; opacity: .5; animation: up-girar 90s linear infinite; }
@keyframes up-girar { to { transform: rotate(360deg); } }

/* Foto retangular com moldura fina */
.up-foto { position: relative; margin: 0; }
.up-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; filter: saturate(.7) sepia(.2) contrast(1.05); }
.up-foto::after { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(194, 179, 138, .35); pointer-events: none; }

/* Ícones de linha */
.up-icone {
	width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
	border: 1px solid rgba(194, 179, 138, .35); background: rgba(194, 179, 138, .06);
	color: var(--wp--preset--color--ouro); margin-bottom: 1.1rem;
}
.up-icone svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Cartões: luz dourada que segue o cursor */
.up-card { position: relative; overflow: hidden; }
.up-card::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
	background: radial-gradient(320px circle at var(--x, 50%) var(--y, 0%), rgba(194, 179, 138, .16), transparent 60%);
}
.up-card:hover::before { opacity: 1; }
.up-card .up-num { font-size: .95rem; letter-spacing: .22em; margin-bottom: .5rem; }

/* Faixa de palavras-chave em movimento contínuo */
.up-faixa { overflow: hidden; border-block: 1px solid rgba(194, 179, 138, .22); background: #080B0A; padding: 1.15rem 0; }
.up-faixa-trilho { display: flex; align-items: center; width: max-content; animation: up-deslizar 50s linear infinite; }
.up-faixa-trilho span {
	font-family: var(--wp--preset--font-family--titulo); font-weight: 200; font-size: clamp(1.05rem, 2vw, 1.45rem);
	letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--perola); white-space: nowrap; padding-inline: 1.5rem;
}
.up-faixa-trilho i { color: var(--wp--preset--color--ouro); font-style: normal; font-size: .7rem; }
@keyframes up-deslizar { to { transform: translateX(-50%); } }

/* Diagrama do ciclo da Matriz PRO */
.up-diagrama { max-width: 520px; margin-inline: auto; }
.up-diagrama svg { display: block; width: 100%; height: auto; overflow: visible; }
.up-diagrama .up-orbita { transform-origin: 200px 200px; animation: up-girar 16s linear infinite; }
.up-diagrama text { font-family: var(--wp--preset--font-family--titulo); font-size: 12.5px; letter-spacing: .16em; fill: #EDE6DA; }
.up-diagrama .up-centro { font-family: var(--wp--preset--font-family--titulo); font-weight: 200; font-size: 30px; letter-spacing: .18em; fill: #C2B38A; }

/* Citação grande */
.up-citacao { font-family: var(--wp--preset--font-family--titulo); font-weight: 200; font-size: clamp(1.6rem, 3.6vw, 2.8rem) !important; line-height: 1.25; color: #fff; }

/* Surgimento ao rolar (classes postas por animacoes.js, só quando o movimento é permitido) */
.up-anim .up-revela {
	opacity: 0; transform: translateY(28px);
	transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.up-anim .up-revela.is-visivel { opacity: 1; transform: none; }
.up-anim .up-figura.up-revela { transform: translateY(40px) scale(.97); }
.up-anim .up-figura.up-revela.is-visivel { transform: none; }
.up-anim .up-figura.up-revela .up-arco img { transform: scale(1.14); }
.up-anim .up-figura.up-revela.is-visivel .up-arco img { transform: scale(1); }

@media (max-width: 781px) {
	.up-figura { max-width: 320px; margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.up-ouro, .up-num, .up-hex, .up-faixa-trilho, .up-diagrama .up-orbita { animation: none; }
}