/**
 * Ambiente de fundo do site.
 *
 * O fundo chapado deixava o site com cara de rascunho. Aqui entram três
 * camadas, todas em CSS puro — sem imagem, sem requisição extra e sem custo
 * de download:
 *
 *   1. malha técnica  — grade fina, referência de prancheta/engenharia
 *   2. brilhos        — dois halos quentes, muito difusos, que dão profundidade
 *   3. grão           — ruído sutil que tira o aspecto de cor lisa em tela grande
 *
 * As três são `position: fixed`, então não rolam com a página: o conteúdo
 * desliza por cima de um ambiente parado, o que cria sensação de profundidade
 * sem parallax em JS.
 *
 * Tudo com `pointer-events: none` e z-index negativo, para nunca interceptar
 * clique nem cobrir conteúdo.
 */

/* O body precisa de contexto de empilhamento próprio, senão o z-index
   negativo das camadas as manda para trás do fundo e elas somem. */
body {
	position: relative;
	isolation: isolate;
}

.sn-ambiente {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   1. Malha técnica
   -------------------------------------------------------------------------- */

.sn-ambiente__malha {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(248, 248, 246, 0.028) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(248, 248, 246, 0.028) 1px, transparent 1px);
	background-size: 72px 72px;

	/* A malha desaparece nas bordas: grade batendo na borda da tela parece
	   textura de fundo de site pronto, não elemento desenhado. */
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
	mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
}

/* Uma segunda grade, dez vezes maior, marca os eixos principais. É o que faz
   a malha ler como sistema e não como papel milimetrado. */
.sn-ambiente__malha::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(194, 157, 99, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(194, 157, 99, 0.05) 1px, transparent 1px);
	background-size: 360px 360px;
}

/* --------------------------------------------------------------------------
   2. Brilhos ambientes
   -------------------------------------------------------------------------- */

.sn-ambiente__brilho {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
}

/* Halo dourado no alto à esquerda: puxa o olho para o topo da página. */
.sn-ambiente__brilho--um {
	inset-block-start: -18vh;
	inset-inline-start: -10vw;
	width: 60vw;
	height: 60vh;
	background: radial-gradient(circle, rgba(194, 157, 99, 0.10), transparent 68%);
}

/* Halo frio embaixo à direita: contrapeso, evita que a tela fique só quente
   de um lado só. */
.sn-ambiente__brilho--dois {
	inset-block-end: -22vh;
	inset-inline-end: -14vw;
	width: 55vw;
	height: 55vh;
	background: radial-gradient(circle, rgba(140, 160, 190, 0.055), transparent 66%);
}

/* --------------------------------------------------------------------------
   3. Grão
   -------------------------------------------------------------------------- */

/* feTurbulence gerado inline: um PNG de ruído teria o mesmo efeito, mas
   custaria uma requisição e alguns KB. */
.sn-ambiente__grao {
	position: absolute;
	inset: -50%;
	width: 200%;
	height: 200%;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Realce de seção
   -------------------------------------------------------------------------- */

/* Linha dourada que nasce e morre nas pontas, para separar seções sem o peso
   de uma régua de ponta a ponta. */
.sn-linha-secao {
	width: 100%;
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(
		to right,
		transparent,
		rgba(194, 157, 99, 0.45) 20%,
		rgba(194, 157, 99, 0.45) 80%,
		transparent
	);
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* Wide — 2400px e acima: a malha cresce junto, senão vira textura fina demais */
@media (min-width: 2400px) {
	.sn-ambiente__malha { background-size: 96px 96px; }
	.sn-ambiente__malha::after { background-size: 480px 480px; }
}

/* Tablet paisagem — até 1200 */
@media (max-width: 1200px) {
	.sn-ambiente__malha { background-size: 60px 60px; }
	.sn-ambiente__malha::after { background-size: 300px 300px; }
	.sn-ambiente__brilho { filter: blur(70px); }
}

/* Celular — até 767: menos camadas.
   O blur de 90px em telas pequenas custa caro para pintar, e o grão em 200%
   de área é desperdício num viewport estreito. Fica a malha, que é barata. */
@media (max-width: 767px) {
	.sn-ambiente__malha { background-size: 48px 48px; }
	.sn-ambiente__malha::after { background-size: 240px 240px; }
	.sn-ambiente__grao { display: none; }

	.sn-ambiente__brilho {
		filter: blur(60px);
	}

	.sn-ambiente__brilho--dois { display: none; }
}

/* --------------------------------------------------------------------------
   Movimento reduzido e alto contraste
   -------------------------------------------------------------------------- */

/* Nada aqui anima, mas quem pede contraste alto não quer textura competindo
   com o texto. */
@media (prefers-contrast: more) {
	.sn-ambiente {
		display: none;
	}
}