/* Farm&Fork: landing page e páginas de texto. Paleta e fonte iguais às da interface do
   jogo (game/interface/ui_theme.gd), para o site e o jogo parecerem a mesma coisa.
   Os efeitos respeitam "reduzir movimento" do sistema (fim do arquivo). */

@font-face {
	font-family: "Nunito";
	src: url("/recursos/Nunito.ttf") format("truetype");
	font-weight: 200 1000;
	font-display: swap;
}

:root {
	--papel: #fbf1dc;
	--papel-escuro: #ecd9b4;
	--fundo: #e3d7ba;
	--creme: #fffaf0;
	--madeira: #b97a45;
	--madeira-clara: #d39a63;
	--madeira-escura: #6e4325;
	--tinta: #4a2f1c;
	--apagado: #8a6d4b;
	--terracota: #d9643a;
	--verde: #4f8a2e;
	--verde-vivo: #6aae3e;
	--verde-escuro: #24421a;
	--salvia: #a9c48f;
	--salvia-escura: #82916c;
	--ceu: #f6e7c4;
	--sombra: 0 6px 0 rgba(74, 47, 28, 0.18);
	--mola: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--fundo);
	color: var(--tinta);
	font-family: "Nunito", system-ui, sans-serif;
	font-size: 18px;
	line-height: 1.55;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--verde); }

.largura {
	width: min(1160px, 100% - 32px);
	margin-inline: auto;
	position: relative;
}

h1, h2, h3 { line-height: 1.1; margin: 0; font-weight: 900; }
h2 { font-size: clamp(30px, 4.4vw, 48px); }
h3 { font-size: 21px; margin: 14px 0 6px; }

.sobretitulo {
	margin: 0 0 10px;
	color: var(--terracota);
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.titulo-secao { text-align: center; max-width: 760px; margin: 0 auto 44px; }

/* --- Botões no estilo dos botões do jogo -------------------------------------------- */

.botao {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 15px 30px;
	border-radius: 14px;
	border: 3px solid var(--tinta);
	font-weight: 900;
	font-size: 20px;
	text-decoration: none;
	box-shadow: 0 6px 0 var(--tinta);
	transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.botao:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--tinta); filter: brightness(1.04); }
.botao:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--tinta); }
.botao-verde { background: var(--verde-vivo); color: var(--verde-escuro); border-color: var(--verde-escuro); box-shadow: 0 6px 0 var(--verde-escuro); }
.botao-verde:hover { box-shadow: 0 9px 0 var(--verde-escuro); }
.botao-verde:active { box-shadow: 0 2px 0 var(--verde-escuro); }
.botao-madeira { background: var(--papel); color: var(--tinta); }
.botao-pequeno { padding: 8px 18px; font-size: 16px; border-width: 2px; box-shadow: 0 4px 0 var(--verde-escuro); }

/* Reflexo passando de tempos em tempos no botão principal. */
.botao-brilho::after {
	content: "";
	position: absolute;
	top: -20%;
	left: -60%;
	width: 40%;
	height: 140%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-20deg);
	animation: brilho 3.6s ease-in-out infinite;
}
@keyframes brilho {
	0%, 60% { left: -60%; }
	100% { left: 130%; }
}

/* --- Topo ------------------------------------------------------------------------- */

.topo {
	position: fixed;
	inset: 0 0 auto;
	z-index: 20;
	transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.3s ease;
}
.topo.rolado {
	background: rgba(251, 241, 220, 0.92);
	box-shadow: 0 2px 0 var(--papel-escuro);
	backdrop-filter: blur(8px);
}
.topo-linha { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.marca img { width: 168px; transition: transform 0.3s var(--mola); }
.marca:hover img { transform: rotate(-3deg) scale(1.05); }
.topo-nav { display: flex; align-items: center; gap: 26px; }
.topo-nav > a:not(.botao) { color: var(--tinta); font-weight: 800; text-decoration: none; position: relative; }
.topo-nav > a:not(.botao)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 3px;
	border-radius: 2px;
	background: var(--terracota);
	transition: right 0.25s ease;
}
.topo-nav > a:not(.botao):hover::after { right: 0; }

/* --- Herói -------------------------------------------------------------------------- */

.heroi {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding: 110px 0 140px;
	overflow: hidden;
	background: linear-gradient(180deg, #fdf3dc 0%, var(--ceu) 55%, #efe0b8 100%);
}

.ceu { position: absolute; inset: 0; pointer-events: none; }

.sol {
	position: absolute;
	top: 14%;
	right: 12%;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(circle, #f6cf4a 0 55%, rgba(246, 207, 74, 0.25) 56% 70%, transparent 71%);
	animation: pulsar 6s ease-in-out infinite;
}
@keyframes pulsar { 50% { transform: scale(1.08); } }

.nuvem { position: absolute; fill: #fffaf0; opacity: 0.9; filter: drop-shadow(0 4px 0 rgba(74, 47, 28, 0.08)); }
.nuvem-1 { width: 180px; top: 16%; animation: vento 60s linear infinite; animation-delay: -10s; }
.nuvem-2 { width: 120px; top: 30%; animation: vento 80s linear infinite; animation-delay: -45s; opacity: 0.7; }
.nuvem-3 { width: 220px; top: 8%; animation: vento 95s linear infinite; animation-delay: -70s; opacity: 0.8; }
@keyframes vento { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 40px)); } }

.morro { position: absolute; left: -5%; width: 110%; bottom: 0; height: 42%; will-change: transform; }
.morro-fundo { fill: #c9d6a8; height: 50%; }
.morro-meio { fill: var(--salvia); }
.morro-frente { fill: #8fb06c; height: 30%; }

.ingredientes { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ing {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: clamp(36px, 4.5vw, 64px);
	animation: flutuar var(--t) ease-in-out infinite;
	animation-delay: var(--d);
	filter: drop-shadow(0 6px 0 rgba(74, 47, 28, 0.12));
	will-change: transform;
}
@keyframes flutuar {
	0%, 100% { translate: 0 0; rotate: -8deg; }
	50% { translate: 0 -22px; rotate: 8deg; }
}

.heroi-grade {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 40px;
	align-items: center;
}

.selo-teste {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px;
	border: 2px solid var(--salvia-escura);
	border-radius: 999px;
	background: rgba(255, 250, 240, 0.85);
	color: var(--verde-escuro);
	font-size: 15px;
	font-weight: 900;
	animation: entrar 0.7s var(--mola) both;
}
.ponto {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--verde-vivo);
	box-shadow: 0 0 0 0 rgba(106, 174, 62, 0.6);
	animation: radar 1.8s ease-out infinite;
}
@keyframes radar { to { box-shadow: 0 0 0 12px rgba(106, 174, 62, 0); } }

.heroi-logo { margin: 34px 0 8px; animation: entrar 0.8s var(--mola) 0.1s both; }
.heroi-logo img { width: min(560px, 100%); filter: drop-shadow(0 8px 0 rgba(74, 47, 28, 0.12)); }
.heroi-chamada {
	margin: 0;
	font-size: clamp(28px, 3.6vw, 42px);
	font-weight: 900;
	animation: entrar 0.8s var(--mola) 0.2s both;
}
.heroi-chamada em { font-style: normal; color: var(--terracota); }
.lide { font-size: 21px; margin: 16px 0 30px; max-width: 34ch; animation: entrar 0.8s var(--mola) 0.3s both; }
.acoes { display: flex; gap: 16px; flex-wrap: wrap; animation: entrar 0.8s var(--mola) 0.4s both; }
.nota { margin: 20px 0 0; color: var(--apagado); font-size: 15px; font-weight: 800; animation: entrar 0.8s ease 0.5s both; }
@keyframes entrar { from { opacity: 0; transform: translateY(26px) scale(0.97); } }

.heroi-arte { will-change: transform; animation: entrar 1s var(--mola) 0.3s both; }
.heroi-arte img { width: 100%; animation: balancar 6s ease-in-out infinite; filter: drop-shadow(0 16px 0 rgba(74, 47, 28, 0.1)); }
@keyframes balancar { 50% { transform: translateY(-12px) rotate(-1deg); } }

.rolar {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 26px;
	width: 32px;
	height: 52px;
	margin-left: -16px;
	border: 3px solid var(--tinta);
	border-radius: 18px;
	background: rgba(255, 250, 240, 0.7);
}
.rolar span {
	position: absolute;
	left: 50%;
	top: 9px;
	width: 6px;
	height: 10px;
	margin-left: -3px;
	border-radius: 3px;
	background: var(--tinta);
	animation: roda 1.6s ease-in-out infinite;
}
@keyframes roda { 60% { transform: translateY(16px); opacity: 0; } 61% { transform: none; opacity: 0; } }

/* --- Esteira de receitas -------------------------------------------------------------- */

.esteira {
	position: relative;
	z-index: 4;
	margin-top: -36px;
	padding: 18px 0;
	background: var(--madeira);
	border-block: 4px solid var(--madeira-escura);
	box-shadow: 0 8px 0 rgba(74, 47, 28, 0.15);
	transform: rotate(-1.2deg);
	overflow: hidden;
}
.esteira-trilho { display: flex; width: max-content; animation: esteira 60s linear infinite; }
.esteira:hover .esteira-trilho { animation-play-state: paused; }
.esteira-lista { display: flex; gap: 14px; margin: 0; padding: 0 7px; list-style: none; }
.esteira-lista li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px 8px 10px;
	border: 2px solid var(--madeira-escura);
	border-radius: 999px;
	background: var(--creme);
	font-weight: 900;
	font-size: 16px;
	white-space: nowrap;
}
.esteira-lista img { width: 40px; height: 40px; }
@keyframes esteira { to { transform: translateX(-50%); } }

/* --- Vitrine (janela com as telas reais) ---------------------------------------------- */

.vitrine { padding: 120px 0 90px; }

.janela {
	border: 4px solid var(--tinta);
	border-radius: 20px;
	background: var(--papel);
	box-shadow: 0 14px 0 rgba(74, 47, 28, 0.22);
	overflow: hidden;
	transform-style: preserve-3d;
	transition: transform 0.2s ease-out;
	will-change: transform;
}
.janela-barra {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 10px 16px;
	border-bottom: 3px solid var(--tinta);
	background: var(--papel-escuro);
}
.janela-bolinhas { display: flex; gap: 7px; }
.janela-bolinhas i { width: 13px; height: 13px; border: 2px solid var(--tinta); border-radius: 50%; background: var(--terracota); }
.janela-bolinhas i:nth-child(2) { background: #f2c230; }
.janela-bolinhas i:nth-child(3) { background: var(--verde-vivo); }
.janela-abas { display: flex; gap: 8px; }
.janela-abas button {
	position: relative;
	padding: 6px 18px;
	border: 2px solid var(--tinta);
	border-radius: 10px;
	background: var(--papel);
	color: var(--tinta);
	font: inherit;
	font-size: 16px;
	font-weight: 900;
	cursor: pointer;
	overflow: hidden;
	transition: background 0.2s ease;
}
.janela-abas button[aria-selected="true"] { background: var(--verde-vivo); color: var(--verde-escuro); }
/* Barra de tempo da troca automática. */
.janela-abas button[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: var(--verde-escuro);
	transform-origin: left;
	animation: tempo-aba var(--tempo-aba, 6s) linear both;
}
.janela.parada .janela-abas button::after { animation: none; transform: scaleX(0); }
@keyframes tempo-aba { from { transform: scaleX(0); } }

.janela-telas { position: relative; aspect-ratio: 16 / 9; background: #9fb27f; }
.tela {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.6s ease, transform 6s ease-out;
}
.tela.ativa { opacity: 1; transform: scale(1); }

.legenda {
	margin: 26px auto 0;
	max-width: 640px;
	text-align: center;
	color: var(--apagado);
	font-weight: 800;
	transition: opacity 0.3s ease;
}

/* --- Passos (do campo à mesa) -------------------------------------------------------- */

.como {
	position: relative;
	padding: 120px 0;
	background: var(--salvia);
}
.onda { position: absolute; left: 0; width: 100%; height: 60px; }
.onda-topo { top: -1px; fill: var(--fundo); }
.onda-base { bottom: -1px; fill: var(--fundo); }
.como .sobretitulo { color: var(--verde-escuro); }

.passos {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Trilha tracejada ligando os passos, andando como uma esteira. */
.passos::before {
	content: "";
	position: absolute;
	top: 46px;
	left: 12%;
	right: 12%;
	height: 4px;
	background: repeating-linear-gradient(90deg, var(--verde-escuro) 0 14px, transparent 14px 26px);
	background-size: 26px 4px;
	animation: trilha 1.2s linear infinite;
	opacity: 0.5;
}
@keyframes trilha { to { background-position: 26px 0; } }
.passo { position: relative; text-align: center; }
.passo-icone {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	margin: 0 auto;
	border: 3px solid var(--tinta);
	border-radius: 50%;
	background: var(--creme);
	box-shadow: 0 6px 0 var(--salvia-escura);
	transition: transform 0.35s var(--mola);
}
.passo-icone img { width: 56px; }
.passo:hover .passo-icone { transform: translateY(-8px) rotate(-6deg) scale(1.06); }
.passo p { margin: 0; font-size: 16px; }

/* --- Números ------------------------------------------------------------------------- */

.numeros { padding: 80px 0 40px; }
.numeros-grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; text-align: center; }
.numero strong {
	display: block;
	font-size: clamp(44px, 6vw, 72px);
	font-weight: 1000;
	line-height: 1;
	color: var(--creme);
	-webkit-text-stroke: 3px var(--tinta);
	paint-order: stroke fill;
	text-shadow: 0 6px 0 var(--madeira-escura);
}
.numero span { display: block; margin-top: 10px; font-weight: 900; color: var(--apagado); }

/* --- Cartões de recursos -------------------------------------------------------------- */

.recursos { padding: 70px 0 80px; }
.cartoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cartao {
	position: relative;
	padding: 26px 22px;
	border: 3px solid var(--tinta);
	border-radius: 18px;
	background: var(--creme);
	box-shadow: 0 8px 0 var(--papel-escuro), 0 8px 0 3px var(--tinta);
	transition: transform 0.3s var(--mola);
}
.cartao:hover { transform: translateY(-8px) rotate(-1deg); }
.cartao img { width: 60px; height: 60px; transition: transform 0.4s var(--mola); }
.cartao:hover img { transform: scale(1.15) rotate(8deg); }
.cartao p { margin: 0; font-size: 16px; color: #5c4330; }

/* --- Modos --------------------------------------------------------------------------- */

.modos { padding: 0 0 90px; }
.modos-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.modo {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 22px;
	border: 3px solid var(--salvia-escura);
	border-radius: 18px;
	background: rgba(169, 196, 143, 0.55);
}
.modo img { width: 52px; flex: none; }
.modo h3 { margin-top: 0; }
.modo p { margin: 0; font-size: 16px; }

/* --- Chamada final (placa pendurada) -------------------------------------------------- */

.chamada { padding: 30px 0 100px; }
.placa {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	padding: 56px 32px 48px;
	border: 4px solid var(--madeira-escura);
	border-radius: 24px;
	background:
		repeating-linear-gradient(0deg, transparent 0 46px, rgba(110, 67, 37, 0.28) 46px 49px),
		linear-gradient(180deg, var(--madeira-clara), var(--madeira));
	box-shadow: 0 14px 0 rgba(74, 47, 28, 0.25);
	color: var(--creme);
	text-align: center;
	transform-origin: top center;
	animation: pendurada 5s ease-in-out infinite;
}
.placa h2 { color: var(--creme); -webkit-text-stroke: 2px var(--tinta); paint-order: stroke fill; text-shadow: 0 5px 0 var(--madeira-escura); }
.placa p { font-weight: 800; font-size: 19px; margin: 14px auto 28px; max-width: 46ch; }
.placa .sobretitulo { color: var(--papel); }
.placa-corda {
	position: absolute;
	top: -60px;
	left: 50%;
	width: 160px;
	height: 64px;
	margin-left: -80px;
	border: 4px solid var(--madeira-escura);
	border-bottom: none;
	border-radius: 80px 80px 0 0;
}
@keyframes pendurada { 50% { transform: rotate(0.8deg); } 0%, 100% { transform: rotate(-0.8deg); } }

/* --- Rodapé ------------------------------------------------------------------------- */

.rodape { padding: 28px 0 44px; color: var(--apagado); font-size: 15px; font-weight: 800; border-top: 3px solid var(--papel-escuro); }
.rodape-linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rodape-linha span { flex: 1; }
.rodape a { color: var(--apagado); }

/* --- Revelar ao rolar (site.js põe .visivel) ----------------------------------------- */

/* Só esconde com JavaScript (classe "js" no <html>); sem ele, tudo aparece de uma vez. */
.js .revelar {
	opacity: 0;
	transform: translateY(40px) scale(0.98);
	transition: opacity 0.7s ease, transform 0.8s var(--mola);
	transition-delay: var(--atraso, 0s);
}
.js .revelar.visivel { opacity: 1; transform: none; }
.cartao.revelar.visivel:hover { transform: translateY(-8px) rotate(-1deg); transition-delay: 0s; }

/* --- Página de texto (privacidade) ---------------------------------------------------- */

.pagina-texto .topo { background: rgba(251, 241, 220, 0.92); box-shadow: 0 2px 0 var(--papel-escuro); }
.texto { padding: 120px 0 64px; }
.texto .largura { max-width: 760px; }
.texto h1 { font-size: clamp(36px, 5vw, 52px); margin-bottom: 24px; }
.texto h2 { font-size: 24px; margin: 32px 0 8px; }

/* --- Telas menores ------------------------------------------------------------------ */

@media (max-width: 960px) {
	.heroi-grade { grid-template-columns: 1fr; text-align: center; }
	.heroi-texto { display: flex; flex-direction: column; align-items: center; }
	.lide { margin-inline: auto; }
	.acoes { justify-content: center; }
	.heroi-arte { max-width: 460px; margin-inline: auto; }
	.cartoes { grid-template-columns: repeat(2, 1fr); }
	.passos { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.passos::before { display: none; }
	.numeros-grade { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
	.modos-grade { grid-template-columns: 1fr; }
	.topo-nav > a:not(.botao) { display: none; }
}

@media (max-width: 560px) {
	body { font-size: 17px; }
	.heroi { padding-top: 96px; }
	.cartoes, .passos { grid-template-columns: 1fr; }
	.numeros-grade { grid-template-columns: repeat(2, 1fr); }
	.botao { width: 100%; text-align: center; }
	.topo .botao { width: auto; }
	.marca img { width: 136px; }
	.janela-abas button { padding: 5px 12px; font-size: 14px; }
	.placa { padding: 44px 20px 36px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.js .revelar { opacity: 1; transform: none; }
}