/* endresgames.com: one stylesheet for the studio pages. The color tokens are shared with the Robo Mosaic
   site. Headings use Lilita One (OFL, served from /fonts, D13). Every animation is pure CSS (the CSP has no
   script-src) and lives in the "Motion" section at the end: nothing moves for "reduce motion", and the
   scroll effects run only where the browser has scroll-driven animations (D12). */

@font-face {
	font-family: "Lilita One";
	src: url("/fonts/lilita-one.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #fff6ec;
	--bg-deep: #ffeedd;
	--surface: #ffffff;
	--ink: #3b2a45;
	--muted: #7a6884;
	--brand: #a64cc4;
	--accent: #18a0a8;
	--sun: #ffb648;
	--rose: #ff7a8a;
	--rule: #f0dcc6;
	--store: #1d1724;
	--store-ink: #ffffff;
	--bezel: #2a2133;
	--tile-alpha: .2;
	--radius: 20px;
	--shadow: 0 10px 30px rgba(80, 40, 90, .12);
	--shadow-lift: 0 24px 50px rgba(80, 40, 90, .24);
	--font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
	--display: "Lilita One", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
	--bounce: cubic-bezier(.3, 1.5, .5, 1);
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1d1724;
		--bg-deep: #241c2d;
		--surface: #2a2133;
		--ink: #f4e9f8;
		--muted: #b9a6c4;
		--brand: #d79bf0;
		--accent: #5fd3d9;
		--rule: #3d3048;
		--store: #f4e9f8;
		--store-ink: #1d1724;
		--bezel: #0f0b14;
		--tile-alpha: .28;
		--shadow: 0 10px 30px rgba(0, 0, 0, .35);
		--shadow-lift: 0 24px 50px rgba(0, 0, 0, .5);
	}
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	overflow-wrap: break-word;
}

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

a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; font-synthesis: none; line-height: 1.1; letter-spacing: .005em; }
h1 { font-size: clamp(2.5rem, 9vw, 4.2rem); margin: 0 0 1rem; }
h2 { font-size: 1.45rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.15rem; margin: 1.4rem 0 .3rem; }

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.wrap-text { max-width: 720px; }
.de { color: var(--muted); }

/* Header: sticky, the logo is the animated tile buddy (D9) */
.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	padding: 12px 0;
	background: rgba(255, 246, 236, .82);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	border-bottom: 1px solid transparent;
}
@media (prefers-color-scheme: dark) { .site-header { background: rgba(29, 23, 36, .8); } }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--display); font-size: 1.55rem; line-height: 1; }
.wordmark:hover { color: var(--ink); }
.wordmark .mark { width: 40px; height: 40px; flex: none; overflow: visible; }
.wordmark .wm-text span { color: var(--brand); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 800; font-size: .98rem; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); }

/* Buttons */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	border: 2px solid var(--rule);
	background: var(--surface);
	color: var(--ink);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.25;
	text-decoration: none;
	transition: transform .25s var(--bounce), border-color .2s, color .2s, background .2s, box-shadow .25s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-store { background: var(--store); border-color: var(--store); color: var(--store-ink); overflow: hidden; isolation: isolate; }
.btn-store:hover { background: var(--brand); border-color: var(--brand); color: #ffffff; }
.btn-store small { display: block; font-size: .75rem; font-weight: 700; opacity: .8; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

.pill {
	align-self: flex-start;
	display: inline-block;
	padding: 4px 13px;
	border-radius: 999px;
	background: var(--sun);
	color: #3b2a45;
	font-family: var(--display);
	font-size: .95rem;
	letter-spacing: .02em;
}
.pill-live { background: var(--accent); color: #ffffff; }
.eyebrow { margin: 0 0 .7rem; color: var(--brand); font-weight: 800; font-size: .95rem; letter-spacing: .03em; }

/* Hero: a stage of drifting mosaic tiles behind the text and a fan of three phones */
.hero-stage { position: relative; overflow: hidden; isolation: isolate; }
.bg-tiles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bg-tiles span { position: absolute; display: block; border-radius: 28%; opacity: var(--tile-alpha); }
.bg-tiles span:nth-child(4n + 1) { background: var(--brand); }
.bg-tiles span:nth-child(4n + 2) { background: var(--sun); }
.bg-tiles span:nth-child(4n + 3) { background: var(--accent); }
.bg-tiles span:nth-child(4n + 4) { background: var(--rose); }
.bg-tiles span:nth-child(1) { left: 3%; top: 10%; width: 34px; height: 34px; --par: -160px; }
.bg-tiles span:nth-child(2) { left: 14%; top: 74%; width: 22px; height: 22px; --par: -90px; }
.bg-tiles span:nth-child(3) { left: 31%; top: 4%; width: 18px; height: 18px; --par: -220px; }
.bg-tiles span:nth-child(4) { left: 43%; top: 86%; width: 42px; height: 42px; --par: -120px; }
.bg-tiles span:nth-child(5) { left: 55%; top: 14%; width: 26px; height: 26px; --par: -260px; }
.bg-tiles span:nth-child(6) { left: 64%; top: 64%; width: 18px; height: 18px; --par: -70px; }
.bg-tiles span:nth-child(7) { left: 79%; top: 5%; width: 48px; height: 48px; --par: -180px; }
.bg-tiles span:nth-child(8) { left: 93%; top: 38%; width: 24px; height: 24px; --par: -110px; }
.bg-tiles span:nth-child(9) { left: 87%; top: 84%; width: 30px; height: 30px; --par: -240px; }
.bg-tiles span:nth-child(10) { left: 22%; top: 44%; width: 14px; height: 14px; --par: -60px; }
.bg-tiles span:nth-child(11) { left: 49%; top: 52%; width: 12px; height: 12px; --par: -200px; }
.bg-tiles span:nth-child(12) { left: 97%; top: 70%; width: 16px; height: 16px; --par: -140px; }
.bg-tiles span:nth-child(13) { left: 7%; top: 50%; width: 20px; height: 20px; --par: -230px; }
.bg-tiles span:nth-child(14) { left: 70%; top: 93%; width: 20px; height: 20px; --par: -100px; }

.hero { display: grid; gap: 34px; align-items: center; padding-top: 30px; padding-bottom: 40px; }
.hero h1 .line { display: block; }
.hl {
	background: linear-gradient(transparent 64%, rgba(255, 182, 72, .55) 64%, rgba(255, 182, 72, .55) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
	padding: 0 .06em;
	margin: 0 -.06em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.hero-text p { font-size: 1.15rem; color: var(--muted); max-width: 30em; margin: 0 0 .6rem; }
.hero-text .de { font-size: 1rem; }
.hero-text .btn-row { margin-top: 24px; }
.phones { position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 10px 0 0; }
.phone {
	margin: 0;
	width: 31%;
	max-width: 200px;
	border: 6px solid var(--bezel);
	border-radius: 28px;
	overflow: hidden;
	background: var(--bezel);
	box-shadow: var(--shadow-lift);
}
.phone img { width: 100%; aspect-ratio: 9 / 18; object-fit: cover; }
.phones .phone:nth-child(1) { transform: rotate(-8deg) translate(18%, 6%); }
.phones .phone:nth-child(2) { position: relative; z-index: 1; width: 36%; max-width: 230px; }
.phones .phone:nth-child(3) { transform: rotate(8deg) translate(-18%, 6%); }
@media (min-width: 820px) {
	.hero { grid-template-columns: 1.05fr 1fr; padding-top: 56px; padding-bottom: 70px; }
}

/* Games: one wide block per game, the screenshots beside the text */
.games { padding-top: 34px; }
.section-head { margin-bottom: 14px; }
.section-head h2 { font-size: clamp(2rem, 6vw, 2.7rem); margin: 0; }
.section-head p { margin: .1rem 0 0; }
.game {
	display: grid;
	gap: 24px;
	margin-top: 26px;
	padding: 22px;
	background: var(--surface);
	border-radius: 30px;
	box-shadow: var(--shadow);
	transition: transform .4s var(--bounce), box-shadow .4s;
}
.game:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.game-media { display: flex; gap: 14px; justify-content: center; align-items: flex-start; }
.game-media img {
	width: calc(50% - 7px);
	max-width: 230px;
	border-radius: 18px;
	box-shadow: var(--shadow);
	background: var(--bg-deep);
	transition: transform .5s var(--bounce);
}
.game-media img + img { margin-top: 28px; }
.game:hover .game-media img:first-child { transform: rotate(-4deg) translateY(-4px); }
.game:hover .game-media img + img { transform: rotate(4deg) translateY(-10px); }
.game-body { display: flex; flex-direction: column; gap: 12px; }
.game-head { display: flex; align-items: center; gap: 16px; }
.game-icon { width: 76px; height: 76px; border-radius: 18px; flex: none; box-shadow: 0 4px 12px rgba(80, 40, 90, .2); }
.game h3 { margin: 0; font-size: clamp(1.8rem, 5.5vw, 2.3rem); }
.game h3 a { color: var(--ink); text-decoration: none; }
.game h3 a:hover { color: var(--brand); }
.tagline { margin: 0; color: var(--muted); font-weight: 800; }
.game p { margin: 0; }
.facts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: .9rem; font-weight: 700; color: var(--muted); }
.facts li { padding: 2px 10px; border-radius: 999px; background: var(--bg); }
.game .btn-row { margin-top: 6px; }
@media (min-width: 820px) {
	.game { grid-template-columns: 1fr 1.1fr; align-items: center; padding: 32px; gap: 36px; }
	.game-flip .game-media { order: 2; }
}

.more {
	margin-top: 26px;
	padding: 30px 20px;
	border: 2px dashed var(--rule);
	border-radius: 30px;
	text-align: center;
	color: var(--muted);
}
.more h3 { margin: 0 0 .2rem; color: var(--muted); font-size: 1.35rem; }
.more p { margin: 0; }
/* Four tiles that keep trading places: a puzzle being worked on */
.shuffle { position: relative; width: 52px; height: 52px; margin: 0 auto 14px; }
.shuffle span { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 7px; }
.shuffle span:nth-child(1) { background: var(--brand); translate: 0 0; }
.shuffle span:nth-child(2) { background: var(--sun); translate: 28px 0; }
.shuffle span:nth-child(3) { background: var(--rose); translate: 28px 28px; }
.shuffle span:nth-child(4) { background: var(--accent); translate: 0 28px; }

/* Studio */
.studio { padding-top: 46px; }
.studio-box { display: grid; gap: 8px 40px; }
.studio-box p { margin: 0 0 .8rem; max-width: 38em; }
@media (min-width: 820px) { .studio-box { grid-template-columns: 1.4fr 1fr; } }
.contact {
	align-self: start;
	padding: 18px 20px;
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transition: transform .4s var(--bounce);
}
.contact:hover { transform: rotate(-1.5deg) translateY(-4px); }
.contact h3 { margin: 0 0 .3rem; }
.contact p { margin: 0 0 .4rem; }

/* A game's own page (Beaver Keep) */
.game-hero { text-align: center; padding-top: 30px; }
.game-hero .game-icon { width: 128px; height: 128px; border-radius: 30px; margin: 0 auto 18px; box-shadow: var(--shadow-lift); }
.game-hero h1 { margin-bottom: .3rem; }
.game-hero .tagline { font-size: 1.2rem; margin-bottom: 14px; }
.game-hero p.pitch { max-width: 34em; margin: 18px auto 0; font-size: 1.1rem; }
.shots { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.shots img { width: 100%; border-radius: 18px; box-shadow: var(--shadow); background: var(--bg-deep); transition: transform .5s var(--bounce); }
.shots img:hover { transform: translateY(-8px) rotate(-1.5deg); }
@media (max-width: 540px) {
	.shots { grid-template-columns: repeat(3, 70%); overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 0; }
	.shots li { scroll-snap-align: center; }
}
main.wrap > .wrap-text { margin-left: auto; margin-right: auto; }
.features { padding-top: 10px; }
.features ul { padding-left: 1.2em; }
.features li { margin: .25rem 0; }
.note { color: var(--muted); font-size: .95rem; }

/* Text pages */
main.text { padding-top: 14px; padding-bottom: 20px; }
main.text address { font-style: normal; }
main.text ul { padding-left: 1.2em; }
main.text li { margin: .2rem 0; }
.stand { color: var(--muted); margin-top: 0; }
.en-block, .de-block {
	margin-top: 2.5rem;
	padding: 4px 20px 16px;
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.en-block h2, .de-block h2 { margin-top: 1.2rem; }

hr { border: 0; border-top: 2px solid var(--rule); margin: 2rem 0; }

/* Footer */
.site-footer { margin-top: 56px; padding: 22px 0 34px; border-top: 2px solid var(--rule); color: var(--muted); font-size: .92rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--brand); }
.site-footer p { margin: 0; }

/* ================================================================================================
   Motion (D12). Time-based animations first, then the scroll-driven ones. All of it is off when the
   system asks for reduced motion; without scroll-driven animations everything is simply visible.
   ================================================================================================ */
@media (prefers-reduced-motion: no-preference) {
	/* The logo: the tiles pop in one by one, the sun tile hops now and then, the face blinks and looks around */
	.mark .t { transform-box: fill-box; transform-origin: 50% 80%; animation: tile-pop .7s var(--bounce) both; }
	.mark .t1 { animation-delay: .05s; }
	.mark .t2 { animation: tile-pop .7s var(--bounce) .2s both, hop 5s ease-in-out 2.5s infinite; }
	.mark .t3 { animation-delay: .3s; }
	.mark .t4 { animation-delay: .4s; }
	.mark .eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.6s 1.8s infinite; }
	.mark .pupils { animation: look 9s 3s ease-in-out infinite; }
	.wordmark:hover .t { animation: tile-wave .55s var(--bounce) both; }
	.wordmark:hover .t2 { animation-delay: .06s; }
	.wordmark:hover .t4 { animation-delay: .12s; }
	.wordmark:hover .t3 { animation-delay: .18s; }
	.wordmark .wm-text { display: inline-block; animation: rise .7s cubic-bezier(.2, .8, .2, 1) .25s both; }

	/* The hero: text rises in line by line, "short breaks" gets its marker stroke, the phones pop up and float */
	.hero-text > *, .hero h1 .line { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
	.hero-text > h1 { animation: none; }
	.hero h1 .line:nth-child(1) { animation-delay: .12s; }
	.hero h1 .line:nth-child(2) { animation-delay: .26s; }
	.hero-text > p:nth-of-type(2) { animation-delay: .45s; }
	.hero-text > p:nth-of-type(3) { animation-delay: .55s; }
	.hero-text > .btn-row { animation-delay: .7s; }
	.hl { animation: marker .9s cubic-bezier(.6, 0, .2, 1) 1s both; }
	.phone { animation: phone-in 1s var(--bounce) both, phone-float 5s ease-in-out 1.2s infinite alternate; }
	.phones .phone:nth-child(1) { animation-delay: .45s, 1.4s; animation-duration: 1s, 5.6s; }
	.phones .phone:nth-child(2) { animation-delay: .3s, 1.1s; animation-duration: 1s, 4.8s; }
	.phones .phone:nth-child(3) { animation-delay: .6s, 1.7s; animation-duration: 1s, 6.2s; }
	.bg-tiles span { animation: drift 12s ease-in-out infinite alternate; }
	.bg-tiles span:nth-child(3n + 1) { animation-duration: 14s; animation-delay: -3s; }
	.bg-tiles span:nth-child(3n + 2) { animation-duration: 10s; animation-delay: -6s; }
	.bg-tiles span:nth-child(5n) { animation-duration: 17s; animation-direction: alternate-reverse; }

	/* The store button glints, the "out now" pill pulses, the placeholder tiles trade places */
	.btn-store::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
		translate: -130% 0;
		animation: glint 4.2s ease-in-out 2s infinite;
		pointer-events: none;
	}
	.pill-live { animation: pulse 2.4s ease-out infinite; }
	.shuffle span { animation: orbit 6s cubic-bezier(.65, 0, .25, 1) infinite; }
	.shuffle span:nth-child(2) { animation-delay: -1.5s; }
	.shuffle span:nth-child(3) { animation-delay: -3s; }
	.shuffle span:nth-child(4) { animation-delay: -4.5s; }
	.game:hover .game-icon { animation: wiggle .6s ease-in-out; }

	/* The game page: the icon drops in and bobs */
	.game-hero .game-icon { animation: drop-in .9s var(--bounce) both, bob 4s ease-in-out 1s infinite alternate; }
	.game-hero h1, .game-hero .tagline, .game-hero .pill, .game-hero .pitch { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
	.game-hero .tagline { animation-delay: .1s; }
	.game-hero .pill { animation-delay: .2s; }
	.game-hero .pitch { animation-delay: .3s; }
}

/* Scroll-driven: blocks slide in as they enter, screenshots tilt into place, the hero's tiles and phones
   move at their own speeds while the page scrolls (parallax). */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
		.game-media img, .shots li { animation: tilt-in linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; }
		.game-media img + img, .shots li:nth-child(2) { animation-range: entry 20% cover 45%; }
		.shots li:nth-child(3) { animation-range: entry 35% cover 55%; }
		.phones { animation: parallax-phones linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
		.bg-tiles span {
			animation: drift 12s ease-in-out infinite alternate, parallax linear both;
			animation-timeline: auto, scroll(root);
			animation-range: normal, 0 100vh;
		}
		.bg-tiles span:nth-child(3n + 1) { animation-duration: 14s, auto; animation-delay: -3s, 0s; }
		.bg-tiles span:nth-child(3n + 2) { animation-duration: 10s, auto; animation-delay: -6s, 0s; }
		.bg-tiles span:nth-child(5n) { animation-duration: 17s, auto; animation-direction: alternate-reverse, normal; }
	}
}

@keyframes tile-pop { from { transform: scale(0) rotate(-30deg); opacity: 0; } }
@keyframes hop {
	0%, 78%, 100% { transform: translateY(0) rotate(0); }
	84% { transform: translateY(-5px) rotate(-12deg); }
	90% { transform: translateY(0) rotate(6deg); }
	95% { transform: translateY(-1px) rotate(-2deg); }
}
@keyframes tile-wave { 40% { transform: translateY(-6px) scale(1.08); } }
@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes look {
	0%, 20%, 100% { transform: translate(0, 0); }
	26%, 44% { transform: translate(1.4px, -.6px); }
	52%, 70% { transform: translate(-1.6px, 0); }
}
@keyframes rise { from { opacity: 0; translate: 0 26px; } }
@keyframes marker { from { background-size: 0% 100%; } }
@keyframes phone-in { from { opacity: 0; scale: .6; } }
@keyframes phone-float { to { translate: 0 -14px; } }
@keyframes drift { to { transform: translateY(-28px) rotate(28deg); } }
@keyframes glint { 0% { translate: -130% 0; } 30%, 100% { translate: 130% 0; } }
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(24, 160, 168, .55); }
	70%, 100% { box-shadow: 0 0 0 12px rgba(24, 160, 168, 0); }
}
@keyframes orbit {
	0%, 18% { translate: 0 0; }
	25%, 43% { translate: 28px 0; }
	50%, 68% { translate: 28px 28px; }
	75%, 93% { translate: 0 28px; }
	100% { translate: 0 0; }
}
@keyframes wiggle { 25% { rotate: -8deg; } 50% { rotate: 6deg; } 75% { rotate: -3deg; } }
@keyframes drop-in { from { opacity: 0; translate: 0 -60px; scale: .7; } }
@keyframes bob { to { translate: 0 -8px; } }
@keyframes reveal { from { opacity: 0; translate: 0 70px; scale: .95; } }
@keyframes tilt-in { from { opacity: 0; translate: 0 60px; rotate: -7deg; } }
@keyframes parallax-phones { to { translate: 0 -90px; } }
@keyframes parallax { to { translate: 0 var(--par, -120px); } }