/* Tripolone — efeitos. Só transform, opacity e clip-path. */

/* ---------- cortina de entrada: as colunas do logo crescem e a página se revela ---------- */
.cortina {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	background: var(--verde-900);
	pointer-events: none;
	animation: cortina-sobe .75s .95s cubic-bezier(.76, 0, .24, 1) forwards;
}

.cortina__marca { display: flex; align-items: flex-end; gap: 7px; height: 84px; }

.cortina__marca span {
	display: block;
	width: 7px;
	background: linear-gradient(180deg, #f0cfa4, var(--dourado-claro) 45%, #a8773f);
	transform: scaleY(0);
	transform-origin: bottom;
	animation: coluna-cresce .6s cubic-bezier(.16, 1, .3, 1) forwards;
}

.cortina__marca span:nth-child(1) { height: 46%; animation-delay: .10s; }
.cortina__marca span:nth-child(2) { height: 70%; animation-delay: .18s; }
.cortina__marca span:nth-child(3) { height: 100%; animation-delay: .26s; }
.cortina__marca span:nth-child(4) { height: 70%; animation-delay: .34s; }
.cortina__marca span:nth-child(5) { height: 46%; animation-delay: .42s; }

@keyframes coluna-cresce { to { transform: scaleY(1); } }
@keyframes cortina-sobe { to { transform: translateY(-100%); visibility: hidden; } }

.sem-cortina .cortina { display: none; }

/* Com a cortina na frente, o hero espera ela subir para começar. */
html:not(.sem-cortina) .hero-h__conteudo > :nth-child(1) { animation-delay: 1.1s; }
html:not(.sem-cortina) .hero-h__conteudo > :nth-child(3) { animation-delay: 1.55s; }
html:not(.sem-cortina) .hero-h__conteudo > :nth-child(4) { animation-delay: 1.7s; }

/* Esconde o título até o script dividir as palavras; se o script falhar, aparece sozinho. */
.js .hero-h__titulo:not(.dividido) { animation: aparece-tarde .01s 2.5s both; }
@keyframes aparece-tarde { from { opacity: 0; } to { opacity: 1; } }
html:not(.sem-cortina) .busca-h .busca-imoveis { animation-delay: 1.5s; }

/* ---------- barra de progresso de leitura ---------- */
.progresso-leitura {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 90;
	height: 2px;
	background: linear-gradient(90deg, var(--dourado-titulo), var(--dourado-claro));
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

/* ---------- cabeçalho que some ao descer e volta ao subir ---------- */
.topo,
.home .topo {
	transition: transform .5s cubic-bezier(.16, 1, .3, 1), background var(--suave) var(--ease), border-color var(--suave), box-shadow var(--suave);
}

.topo--oculto { transform: translateY(-105%); }

/* ---------- hero ---------- */
.hero-h__fundo { will-change: transform; }

.hero-h__titulo.dividido { animation: none; }

/* Nada de máscara na palavra do hero. Qualquer recorte (overflow ou clip-path)
   corta o acento do Cinzel em caixa alta no Safari/macOS — foi o que fez "IMÓVEL"
   virar "IMOVEL" no Mac. A palavra entra subindo e clareando, sem recorte algum. */
.palavra { display: inline-block; vertical-align: top; }

.palavra__in {
	display: inline-block;
	opacity: 0;
	transform: translateY(.32em);
	animation: palavra-sobe 1.25s cubic-bezier(.16, 1, .3, 1) forwards;
	animation-delay: calc(.15s + var(--i) * .13s);
}

html:not(.sem-cortina) .palavra__in { animation-delay: calc(1.25s + var(--i) * .13s); }

@keyframes palavra-sobe { to { opacity: 1; transform: none; } }

/* A palavra dourada é cor chapada, sem brilho passando por cima:
   `background-clip: text` depende de `color: transparent` e, se o Safari
   falhar em pintar o fundo, some a palavra inteira. Risco desnecessário
   num texto que é o H1 do site, e o pedido era menos efeito, não mais. */
/* Pedido do dono (01/10/2026): titulo do hero numa cor so. */
.hero-h__titulo em { color: inherit; font-style: normal; }

.hero-h__luz {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(520px circle at var(--x, 50%) var(--y, 50%), rgba(212, 162, 108, .22), transparent 60%);
	opacity: 0;
	transition: opacity .6s var(--ease);
	pointer-events: none;
	mix-blend-mode: soft-light;
}

.hero-h__luz.acesa { opacity: 1; }
.hero-h__conteudo { z-index: 1; }

/* ---------- busca: pílula deslizante ---------- */
.abas--dinamicas {
	position: relative;
	display: inline-flex;
	gap: .2rem;
	padding: .25rem;
	border-radius: 10px;
	background: var(--menta-100);
}

.abas--dinamicas .busca-imoveis__aba,
.abas--dinamicas .busca-imoveis__aba:hover,
.abas--dinamicas .busca-imoveis__aba:has(input:checked) {
	position: relative;
	z-index: 1;
	background: transparent;
	transition: color .35s var(--ease);
}

.abas--dinamicas .busca-imoveis__aba:has(input:checked) { color: var(--branco); }

.abas__pilula {
	position: absolute;
	inset-block: .25rem;
	inset-inline-start: 0;
	z-index: 0;
	border-radius: 8px;
	background: var(--verde-900);
	box-shadow: 0 6px 16px rgba(29, 37, 21, .22);
	transition: transform .55s cubic-bezier(.34, 1.4, .5, 1), width .45s var(--ease);
}

.busca-imoveis__campo input,
.busca-imoveis__campo select { transition: border-color var(--rapido), box-shadow .3s var(--ease); }

.busca-imoveis__campo input:focus,
.busca-imoveis__campo select:focus { border-color: var(--dourado-claro); box-shadow: 0 0 0 4px rgba(212, 162, 108, .18); }

/* ---------- serviços: holofote ---------- */
.servicos-h__card { position: relative; overflow: hidden; }

.servicos-h__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(360px circle at var(--x, -400px) var(--y, -400px), rgba(212, 162, 108, .16), transparent 65%);
	pointer-events: none;
	transition: opacity .4s;
}

.servicos-h__icone svg { overflow: visible; }

/* ---------- títulos por máscara ---------- */
.mascara {
	clip-path: inset(-40% -5% 100% -5%);
	transform: translateY(.35em);
	transition: clip-path 1.5s cubic-bezier(.16, 1, .3, 1), transform 1.5s cubic-bezier(.16, 1, .3, 1);
}

.mascara--aberta { clip-path: inset(-40% -5% -25% -5%); transform: none; }

/* ---------- cards: inclinação e reflexo ---------- */
.imovel-card { transform-style: preserve-3d; will-change: transform; }
.imovel-card.inclinando { transition: transform .12s linear, box-shadow var(--suave) var(--ease); }

.imovel-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .28), transparent 55%);
	opacity: 0;
	transition: opacity .4s;
	pointer-events: none;
}

.imovel-card.inclinando::after { opacity: 1; }
.imovel-card__salvar { z-index: 3; }

/* ---------- faixa: brilho no botão ---------- */
.faixa-h__foto img { transform: scale(1.18); will-change: transform; }

.btn--dourado { position: relative; overflow: hidden; }

.btn--dourado::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-18deg);
	animation: reflexo 4.5s 1s ease-in-out infinite;
}

@keyframes reflexo { 0%, 60% { inset-inline-start: -60%; } 100% { inset-inline-start: 130%; } }

/* ---------- quem somos: foto em cortina ---------- */
.cortina-foto img {
	clip-path: inset(0 100% 0 0 round var(--raio));
	transform: scale(1.12);
	transition: clip-path 1.8s cubic-bezier(.76, 0, .24, 1), transform 2.4s cubic-bezier(.16, 1, .3, 1);
}

.cortina-foto::before {
	opacity: 0;
	transform: translate(-1.2rem, -1.2rem);
	transition: opacity .8s .7s, transform 1.1s .7s cubic-bezier(.16, 1, .3, 1);
}

.cortina-foto--aberta img { clip-path: inset(0 0 0 0 round var(--raio)); transform: none; }
.cortina-foto--aberta::before { opacity: 1; transform: none; }

/* ---------- formulário em cascata ---------- */
.cascata > * { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.cascata--viva > * { opacity: 1; transform: none; }
.cascata--viva > :nth-child(2) { transition-delay: .05s; }
.cascata--viva > :nth-child(3) { transition-delay: .1s; }
.cascata--viva > :nth-child(4) { transition-delay: .15s; }
.cascata--viva > :nth-child(5) { transition-delay: .2s; }
.cascata--viva > :nth-child(6) { transition-delay: .25s; }
.cascata--viva > :nth-child(7) { transition-delay: .3s; }
.cascata--viva > :nth-child(8) { transition-delay: .35s; }

/* ---------- cursor ---------- */
.cursor-anel {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 150;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 1px solid var(--dourado-claro);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s, opacity .3s;
}

.cursor-anel span {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dourado-claro);
	opacity: 0;
	transform: scale(.6);
	transition: opacity .25s, transform .35s var(--ease);
}

.cursor-anel.visivel { opacity: 1; }

.cursor-anel.sobre-link { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(212, 162, 108, .12); }

.cursor-anel.sobre-card {
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	border-color: transparent;
	background: rgba(29, 37, 21, .88);
	backdrop-filter: blur(4px);
}

.cursor-anel.sobre-card span { opacity: 1; transform: none; }
.cursor-anel.sobre-campo { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.cortina, .hero-h__luz, .cursor-anel, .progresso-leitura { display: none !important; }
	.palavra__in, .mascara, .cortina-foto img, .cascata > * { transform: none !important; clip-path: none !important; opacity: 1 !important; }
	.js .hero-h__titulo:not(.dividido) { animation: none; opacity: 1; }
}

/* Pedido do dono (05/10/2026): a tela de entrada mostra o T da logo (monograma oficial),
   que sobe de baixo para cima como as colunas do símbolo, no lugar das barrinhas. */
.cortina__marca { display: block; width: 84px; height: auto; }
.cortina__marca img {
	display: block;
	width: 100%;
	height: auto;
	clip-path: inset(100% 0 0 0);
	animation: monograma-sobe .8s .1s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes monograma-sobe { to { clip-path: inset(0 0 0 0); } }