/**
 * Ajustes do tema, por cima do Tailwind compilado.
 *
 * O site original usava framer-motion (~50KB de JS) só para fazer as seções
 * aparecerem ao rolar. Aqui isso vira CSS + IntersectionObserver.
 */

/* ---- Reveal ao rolar ---- */
.cangaiba-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .6s ease-out, transform .6s ease-out;
	will-change: opacity, transform;
}

.cangaiba-reveal.is-visivel {
	opacity: 1;
	transform: none;
}

/* Atraso em cascata para grades de cards. */
.cangaiba-reveal[data-atraso="1"] { transition-delay: .08s; }
.cangaiba-reveal[data-atraso="2"] { transition-delay: .16s; }
.cangaiba-reveal[data-atraso="3"] { transition-delay: .24s; }

/* Quem pediu menos movimento não recebe movimento nenhum. */
@media (prefers-reduced-motion: reduce) {
	.cangaiba-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	html { scroll-behavior: auto !important; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Âncoras ---- */
/* A nav é fixa e tem 80px: sem isso, o título da seção fica escondido atrás dela. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

/* ---- [hidden] tem que ganhar ---- */
/* Utilitários como .grid/.flex/.block têm a mesma especificidade de [hidden] e
   vêm depois no arquivo, então venciam o cascade e o atributo hidden não
   escondia nada. Sem este !important, as 11 grades de categoria apareciam
   todas ao mesmo tempo. */
[hidden] { display: none !important; }

/* ---- Modais ---- */
.cangaiba-modal[hidden] { display: none; }

.cangaiba-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.cangaiba-modal__fundo {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / .6);
	backdrop-filter: blur(2px);
}

.cangaiba-modal__caixa {
	position: relative;
	z-index: 1;
	max-height: 90vh;
	overflow-y: auto;
	width: 100%;
	max-width: 42rem;
	animation: cangaiba-sobe .25s ease-out;
}

@keyframes cangaiba-sobe {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

body.cangaiba-travado { overflow: hidden; }

/* ---- Contraste do hero ---- */
/* Ajuste pontual: no original o texto do hero disputava com a foto de fundo
   em telas claras. O gradiente ganhou peso à esquerda, onde o texto vive. */
.cangaiba-hero__veu {
	background: linear-gradient(
		to right,
		rgb(0 0 0 / .82) 0%,
		rgb(0 0 0 / .65) 45%,
		rgb(0 0 0 / .35) 100%
	);
}

/* ---- Filtro de preço ---- */
.cangaiba-produto[hidden] { display: none; }

/* ---- Vídeos ---- */
.cangaiba-video-painel[hidden] { display: none; }

/* Facade: o poster carrega, o vídeo só entra quando clicam. */
.cangaiba-video-facade {
	position: relative;
	cursor: pointer;
	background: #111;
}

.cangaiba-video-facade__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s;
}

.cangaiba-video-facade:hover .cangaiba-video-facade__play {
	background: rgb(0 0 0 / .25);
}