/* antsurgent.com — GameDesign/WEBSITE.md. Fonts and art come from the game itself. */

@font-face {
	font-family: "Lilita One";
	src: url("/fonts/LilitaOne.ttf") format("truetype");
	font-display: swap;
}

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

:root {
	--gold: #f2b33d;
	--gold-deep: #d9921f;
	--outline: #4a2c17;
	--ink: #2b2621;
	--paper: #f6f1e6;
	--soil: #2a1c10;
	--soil-light: #3d2a19;
	--blue: #1f78d1;
	--text: #f6f1e6;
	--muted: #d8ccb6;
	--gutter: clamp(16px, 4vw, 48px);
	--title: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
	--body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--soil);
	color: var(--text);
	font-family: var(--body);
	font-size: 18px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

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

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

.skip {
	position: absolute;
	left: -999px;
	top: 8px;
	background: var(--paper);
	color: var(--ink);
	padding: 8px 14px;
	border-radius: 8px;
	z-index: 10;
}

.skip:focus {
	left: 8px;
}

/* --- The painted logo, as in the game's menu ------------------------------------------------------------------ */

.logo {
	margin: 0;
	font-family: var(--title);
	font-weight: 400;
	color: var(--gold);
	letter-spacing: 0.02em;
	line-height: 0.95;
	-webkit-text-stroke: 0.12em var(--outline);
	paint-order: stroke fill;
	text-shadow: 0 0.07em 0 rgba(40, 22, 10, 0.55);
}

/* --- Stone button (art/ui/kit/set_b/button.png) ----------------------------------------------------------------- */

.stone-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 300px;
	min-height: 120px;
	padding: 18px 64px 26px;
	background: url("/assets/button.webp") center / 100% 100% no-repeat;
	font-family: var(--title);
	font-size: 56px;
	letter-spacing: 0.04em;
	color: var(--ink);
	-webkit-text-stroke: 8px var(--paper);
	paint-order: stroke fill;
	text-decoration: none;
	filter: drop-shadow(0 10px 18px rgba(20, 10, 0, 0.45));
	transition: transform 160ms ease, filter 160ms ease;
}

.stone-button:hover,
.stone-button:focus-visible {
	transform: translateY(-3px) scale(1.04);
	filter: drop-shadow(0 16px 24px rgba(20, 10, 0, 0.5)) brightness(1.06);
}

.stone-button:active {
	transform: translateY(1px) scale(0.98);
}

.stone-button:focus-visible {
	outline: 4px solid var(--paper);
	outline-offset: 6px;
}

.stone-button.small {
	min-width: 240px;
	min-height: 96px;
	font-size: 44px;
}

/* --- Hero --------------------------------------------------------------------------------------------------------- */

.hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: calc(var(--gutter) * 2) var(--gutter) 20vh;
	overflow: hidden;
	isolation: isolate;
	background:
		linear-gradient(to bottom, rgba(42, 28, 16, 0) 55%, var(--soil) 98%),
		url("/assets/hero.jpg") center bottom / cover no-repeat;
}

@media (max-width: 900px) {
	.hero {
		background:
			linear-gradient(to bottom, rgba(42, 28, 16, 0.1) 40%, var(--soil) 98%),
			url("/assets/hero_small.jpg") 30% bottom / cover no-repeat;
	}
}

.hero__content {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 900px;
}

.hero .logo {
	font-size: clamp(58px, 12vw, 160px);
}

.tagline {
	margin: 18px auto 34px;
	max-width: 30ch;
	font-family: var(--title);
	font-size: clamp(22px, 3.2vw, 34px);
	line-height: 1.2;
	color: var(--paper);
	-webkit-text-stroke: 0.18em var(--outline);
	paint-order: stroke fill;
}

.hero .stone-button {
	animation: breathe 2.6s ease-in-out infinite;
}

.facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.facts li {
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(246, 241, 230, 0.92);
	color: var(--ink);
	font-weight: 800;
	font-size: 16px;
	box-shadow: 0 3px 0 rgba(43, 38, 33, 0.35);
}

.hero__ant {
	position: absolute;
	z-index: 1;
	right: max(2vw, calc(50% - 760px));
	bottom: 4vh;
	height: min(68vh, 720px);
	width: auto;
	filter: drop-shadow(0 18px 24px rgba(20, 10, 0, 0.45));
	pointer-events: none;
}

.scroll-hint {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 22px;
	translate: -50% 0;
	color: var(--paper);
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	opacity: 0.85;
}

.scroll-hint::after {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	margin: 6px auto 0;
	border-right: 3px solid currentColor;
	border-bottom: 3px solid currentColor;
	rotate: 45deg;
	animation: nudge 1.8s ease-in-out infinite;
}

@media (max-width: 900px) {
	.hero {
		align-items: start;
		padding-top: 12vh;
		padding-bottom: 46vh;
	}

	.hero__ant {
		right: 50%;
		translate: 50% 0;
		bottom: 2vh;
		height: 40vh;
	}

	.facts li {
		font-size: 14px;
	}
}

@media (max-width: 900px) and (orientation: landscape) {
	.hero {
		padding-top: 6vh;
		padding-bottom: 10vh;
		align-items: center;
	}

	.hero__content {
		margin-right: 34vw;
	}

	.hero__ant {
		right: 3vw;
		translate: none;
		height: 76vh;
	}
}

/* Short landscape screens (a phone on its side): everything fits above the fold, beside the ant. */
@media (max-height: 520px) and (orientation: landscape) {
	.hero .logo {
		font-size: 17vh;
	}

	.tagline {
		margin: 8px auto 14px;
		font-size: 5.6vh;
	}

	.hero .stone-button {
		min-width: 190px;
		min-height: 78px;
		padding: 8px 40px 14px;
		font-size: 38px;
	}

	.facts {
		margin-top: 12px;
	}

	.facts li {
		padding: 3px 12px;
		font-size: 13px;
	}

	.scroll-hint {
		display: none;
	}
}

@keyframes breathe {
	50% {
		transform: scale(1.04);
	}
}

@keyframes nudge {
	50% {
		transform: translate(4px, 4px);
	}
}

/* --- Sections ------------------------------------------------------------------------------------------------------ */

.section {
	padding: clamp(56px, 9vw, 110px) var(--gutter);
	max-width: 1240px;
	margin: 0 auto;
}

.section h2 {
	margin: 0 0 12px;
	text-align: center;
	font-size: clamp(36px, 5vw, 58px);
}

.section .lead {
	margin: 0 auto 48px;
	max-width: 46ch;
	text-align: center;
	color: var(--muted);
	font-size: 20px;
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 22px;
}

/* Stone panel (art/ui/kit/set_b/panel.png). */
.card {
	padding: 34px 30px 36px;
	border-style: solid;
	border-width: 26px;
	border-image: url("/assets/panel.webp") 70 fill / 26px stretch;
	color: var(--ink);
}

.card svg {
	width: 52px;
	height: 52px;
	margin-bottom: 10px;
}

.card h3 {
	margin: 0 0 8px;
	font-family: var(--title);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.1;
	color: var(--ink);
}

.card p {
	margin: 0;
	font-size: 17px;
	color: #3d342b;
}

.shots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.shots figure {
	margin: 0;
}

.shots img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 14px;
	border: 4px solid var(--paper);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
}

.shots figcaption {
	margin-top: 10px;
	text-align: center;
	color: var(--muted);
	font-weight: 700;
	font-size: 16px;
}

@media (max-width: 900px) {
	.shots {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 12px;
	}

	.shots figure {
		scroll-snap-align: center;
	}
}

.cta {
	text-align: center;
	padding-bottom: clamp(70px, 10vw, 120px);
}

.cta .logo {
	font-size: clamp(36px, 5vw, 58px);
	margin-bottom: 28px;
}

/* --- Footer --------------------------------------------------------------------------------------------------------- */

.footer {
	border-top: 2px solid var(--soil-light);
	padding: 28px var(--gutter) 36px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	justify-content: center;
	align-items: center;
	color: var(--muted);
	font-size: 15px;
}

.footer a {
	color: var(--paper);
	font-weight: 700;
	text-decoration: none;
}

.footer a:hover {
	text-decoration: underline;
}

.footer img {
	width: 28px;
	height: 28px;
	border-radius: 7px;
}

/* --- Text pages (privacy, support, 404) ----------------------------------------------------------------------------- */

.page-top {
	padding: 22px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 900px;
	margin: 0 auto;
}

.page-top .logo {
	font-size: 34px;
	text-decoration: none;
}

.page-top .play-link {
	font-family: var(--title);
	font-size: 22px;
	color: var(--paper);
	text-decoration: none;
}

.paper {
	max-width: 900px;
	margin: 0 auto 60px;
	padding: clamp(28px, 5vw, 56px);
	background: var(--paper);
	color: var(--ink);
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.paper h1 {
	margin-top: 0;
	font-family: var(--title);
	font-weight: 400;
	font-size: clamp(36px, 5vw, 50px);
	line-height: 1.05;
}

.paper h2 {
	font-family: var(--title);
	font-weight: 400;
	font-size: 26px;
	margin: 34px 0 8px;
}

.paper a {
	color: var(--blue);
}

.paper .updated {
	color: #6b5f52;
	font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.hero .stone-button,
	.scroll-hint::after {
		animation: none;
	}

	.stone-button {
		transition: none;
	}
}