/*
 * Estilos exclusivos da página "Sobre" (page-sobre.php): animação do
 * selo da Sette se montando no hero, reveal-on-scroll dos blocos e
 * hover nos cards de pilares. Carregado só nessa página (ver
 * sette_sobre_assets() em functions.php), sem mexer no bundle principal.
 */

/* ---------- Hero: texto + selo da marca se montando ---------- */
.sobre-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}
.sobre-hero__text { flex: 1 1 420px; }
.sobre-hero__mark {
	width: 170px;
	height: 170px;
	flex: 0 0 170px;
	animation: sobre-mark-in .8s cubic-bezier(.22, 1, .36, 1) both, sobre-mark-float 4.6s ease-in-out .9s infinite alternate;
	will-change: transform, opacity;
}
.sobre-hero__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

@keyframes sobre-mark-in {
	from { opacity: 0; transform: translateY(28px) scale(.72) rotate(-10deg); }
	to   { opacity: 1; transform: none; }
}
@keyframes sobre-mark-float {
	from { transform: translateY(0); }
	to   { transform: translateY(-9px); }
}

@media (max-width: 782px) {
	.sobre-hero { flex-direction: column-reverse; }
	.sobre-hero__mark { width: 110px; height: 110px; margin: 0 auto; }
}

/* ---------- Estatísticas: só 2 itens nessa página (sem R$10M+) ---------- */
.stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; margin: 0 auto; }
@media (max-width: 680px) {
	.stats--2 { grid-template-columns: 1fr; }
}

/* ---------- Reveal on scroll (fade + sobe levemente) ---------- */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Pilares: leve elevação no hover ---------- */
.case-card--lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.case-card--lift:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(31, 27, 22, .12);
	border-color: var(--sette-ink);
}

@media (prefers-reduced-motion: reduce) {
	.sobre-hero__mark { animation: none; }
	.reveal { opacity: 1; transform: none; transition: none; }
	.case-card--lift:hover { transform: none; }
}