/*
 * Illustrasjoner i campingkart-stil (samme formspråk som kartet): bakken sett ovenfra,
 * bygninger med fasade og tak, kjøretøy fra siden. Alle farger er temaets egne.
 */
.byneset-ill {
	--ill-gress: var(--wp--preset--color--accent-1);
	--ill-grus: var(--wp--preset--color--accent-2);
	--ill-vann: var(--wp--preset--color--fjord);
	--ill-kalk: var(--wp--preset--color--accent-5);
	--ill-blekk: var(--wp--preset--color--contrast);
	--ill-gran: var(--wp--preset--color--accent-3);
	--ill-rav: var(--wp--preset--color--rav);
	--ill-mose: var(--wp--preset--color--mose);
	--ill-stein: var(--wp--preset--color--accent-4);
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin: 0;
	background: var(--ill-gress);
	/* Tynn kant, så formen (portal, kort) synes også på en bakgrunn i samme grønne farge.
	   Omrisset tegnes over innholdet og følger hjørnene. */
	outline: 1px solid color-mix(in srgb, var(--ill-gran) 18%, transparent);
	outline-offset: -1px;
}
.byneset-ill--oversikt { aspect-ratio: 4 / 5; }
.byneset-ill svg { display: block; width: 100%; height: 100%; }

/* Bakke og vann. */
.ill-gress { fill: var(--ill-gress); }
.ill-grus { fill: var(--ill-grus); stroke: color-mix(in srgb, var(--ill-stein) 22%, var(--ill-grus)); stroke-width: 1.2; }
.ill-asfalt { fill: color-mix(in srgb, var(--ill-stein) 16%, var(--ill-grus)); }
.ill-vann { fill: var(--ill-vann); }
.ill-strand { fill: none; stroke: color-mix(in srgb, var(--ill-gran) 35%, transparent); stroke-width: 1.5; }
.ill-bolge { fill: none; stroke: color-mix(in srgb, var(--ill-vann) 62%, var(--ill-gran)); stroke-width: 1.3; stroke-linecap: round; }
.ill-kote { fill: none; stroke: color-mix(in srgb, var(--ill-gran) 20%, transparent); stroke-width: 1.25; }
.ill-vei-kant { fill: none; stroke: color-mix(in srgb, var(--ill-gran) 34%, var(--ill-gress)); stroke-linecap: round; stroke-linejoin: round; }
.ill-vei { fill: none; stroke: var(--ill-kalk); stroke-linecap: round; stroke-linejoin: round; }
.ill-oppmerking { fill: none; stroke: var(--ill-kalk); stroke-width: 2; stroke-linecap: round; }
.ill-skygge { fill: color-mix(in srgb, var(--ill-blekk) 10%, transparent); }

/* Vegetasjon. */
.ill-gran { fill: color-mix(in srgb, var(--ill-mose) 80%, var(--ill-gran)); }
.ill-krone { fill: var(--ill-mose); }
.ill-krone-lys { fill: color-mix(in srgb, var(--ill-mose) 55%, var(--ill-kalk)); }
.ill-stamme { fill: var(--wp--preset--color--gran-dyp); }

/* Bygninger. Strek i blekk, som bilene på kartet. */
.ill-strek, .byneset-ill :is(.ill-vegg, .ill-tak, .ill-dor, .ill-port, .ill-lakk, .ill-eske, .ill-palle, .ill-rute, .ill-hjul, .ill-skilt, .ill-panel, .ill-hylle, .ill-kamera) {
	stroke: var(--ill-blekk);
	stroke-width: 1;
	stroke-linejoin: round;
}
/* Omrisset er like tykt uansett hvor stort noe er tegnet. */
.byneset-ill :is(.ill-strek, .ill-vegg, .ill-tak, .ill-dor, .ill-port, .ill-lakk, .ill-eske, .ill-palle, .ill-rute, .ill-hjul, .ill-skilt, .ill-panel, .ill-hylle, .ill-kamera, .ill-ribbe, .ill-tape, .ill-takkant, .ill-stolpe, .ill-gjerde) {
	vector-effect: non-scaling-stroke;
}
.ill-vegg { fill: var(--ill-kalk); }
.ill-tak { fill: var(--ill-gran); }
.ill-tak--lys { fill: color-mix(in srgb, var(--ill-gran) 55%, var(--ill-kalk)); }
.ill-takkant { fill: none; stroke: color-mix(in srgb, var(--ill-kalk) 45%, transparent); stroke-width: 1; }
.ill-dor { fill: var(--ill-grus); }
.ill-dor--rav { fill: var(--ill-rav); }
.ill-ribbe { fill: none; stroke: color-mix(in srgb, var(--ill-blekk) 22%, transparent); stroke-width: 0.8; }
.ill-inne { fill: color-mix(in srgb, var(--ill-blekk) 72%, var(--ill-gran)); }
.ill-port { fill: color-mix(in srgb, var(--ill-stein) 30%, var(--ill-kalk)); }
.ill-rute { fill: var(--ill-vann); }
.ill-skilt { fill: var(--ill-kalk); }
.ill-skilt--gran { fill: var(--ill-gran); }
.ill-panel { fill: var(--ill-kalk); }
.ill-lys { fill: var(--ill-rav); }
.ill-hylle { fill: none; }
.ill-stolpe { fill: none; stroke: var(--ill-blekk); stroke-width: 1.4; stroke-linecap: round; }
.ill-gjerde { fill: none; stroke: color-mix(in srgb, var(--ill-blekk) 55%, transparent); stroke-width: 1.2; stroke-linecap: round; }
.ill-kamera { fill: var(--ill-kalk); }

/* Kjøretøy og last. */
.ill-lakk { fill: var(--ill-kalk); }
.ill-lakk--rav { fill: var(--ill-rav); }
.ill-lakk--gran { fill: var(--ill-gran); }
.ill-lakk--stein { fill: color-mix(in srgb, var(--ill-stein) 45%, var(--ill-kalk)); }
.ill-stripe { fill: var(--ill-rav); }
.ill-stripe--gran { fill: var(--ill-gran); }
.ill-hjul { fill: var(--ill-blekk); }
.ill-nav { fill: var(--ill-kalk); }
.ill-eske { fill: color-mix(in srgb, var(--ill-rav) 42%, var(--ill-grus)); stroke-width: 0.8; }
.ill-tape { fill: none; stroke: color-mix(in srgb, var(--ill-blekk) 35%, transparent); stroke-width: 0.8; }
.ill-palle { fill: color-mix(in srgb, var(--ill-rav) 25%, var(--ill-kalk)); stroke-width: 0.8; }

.byneset-ill text {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	fill: var(--ill-blekk);
}
.byneset-ill .ill-skilt-tekst { fill: var(--ill-kalk); font-weight: 700; }

/* Oversikten: Ålberg gård skrått ovenfra. Låverødt, teglstein og grå mur er hentet fra gården
   selv (dempet, så de passer med paletten); resten er temaets farger. Tre lystoner per materiale. */
.byneset-ill--oversikt {
	--ill-rod: #A9493C;
	--ill-tegl: #A8503E;
	--ill-mur: color-mix(in srgb, var(--ill-stein) 78%, var(--ill-kalk));
	--ill-sol: #34434A;
	--ill-mork: color-mix(in srgb, var(--ill-blekk) 78%, var(--ill-stein));
	--ill-lystak: color-mix(in srgb, var(--ill-stein) 22%, var(--ill-kalk));
}
.ill-aker { fill: var(--ill-grus); }
.ill-slagskygge { fill: color-mix(in srgb, var(--ill-blekk) 9%, transparent); }
.ill-plog { fill: none; stroke: color-mix(in srgb, var(--ill-stein) 12%, var(--ill-grus)); stroke-width: 1.1; }
.ill-tun { fill: color-mix(in srgb, var(--ill-stein) 14%, var(--ill-kalk)); }
.ill-grusvei { fill: none; stroke: color-mix(in srgb, var(--ill-stein) 14%, var(--ill-kalk)); stroke-linecap: round; stroke-linejoin: round; }
.ill-grusvei--spor { stroke: color-mix(in srgb, var(--ill-stein) 18%, var(--ill-grus)); }
.ill-flate { stroke: color-mix(in srgb, var(--ill-blekk) 45%, transparent); stroke-width: 0.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ill-m-rod-1 { fill: color-mix(in srgb, var(--ill-rod) 86%, white); }
.ill-m-rod-2 { fill: var(--ill-rod); }
.ill-m-rod-3 { fill: color-mix(in srgb, var(--ill-rod) 80%, black); }
.ill-m-tegl-1 { fill: color-mix(in srgb, var(--ill-tegl) 84%, white); }
.ill-m-tegl-2 { fill: var(--ill-tegl); }
.ill-m-tegl-3 { fill: color-mix(in srgb, var(--ill-tegl) 78%, black); }
.ill-m-mur-1 { fill: color-mix(in srgb, var(--ill-mur) 88%, white); }
.ill-m-mur-2 { fill: var(--ill-mur); }
.ill-m-mur-3 { fill: color-mix(in srgb, var(--ill-mur) 82%, black); }
.ill-m-hvit-1 { fill: var(--ill-kalk); }
.ill-m-hvit-2 { fill: color-mix(in srgb, var(--ill-kalk) 90%, var(--ill-stein)); }
.ill-m-hvit-3 { fill: color-mix(in srgb, var(--ill-kalk) 78%, var(--ill-stein)); }
.ill-m-sol-1 { fill: color-mix(in srgb, var(--ill-sol) 85%, white); }
.ill-m-sol-2 { fill: var(--ill-sol); }
.ill-m-sol-3 { fill: color-mix(in srgb, var(--ill-sol) 80%, black); }
.ill-m-mork-1 { fill: color-mix(in srgb, var(--ill-mork) 85%, white); }
.ill-m-mork-2 { fill: var(--ill-mork); }
.ill-m-mork-3 { fill: color-mix(in srgb, var(--ill-mork) 80%, black); }
.ill-m-lys-1, .ill-m-lys-2, .ill-m-lys-3 { fill: var(--ill-lystak); }
.ill-solgitter { fill: none; stroke: color-mix(in srgb, var(--ill-vann) 45%, transparent); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.ill-vindu { fill: color-mix(in srgb, var(--ill-vann) 55%, var(--ill-stein)); }
.ill-vindu--hvitramme, .ill-vindu--bue { stroke: var(--ill-kalk); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.ill-panel-3d { fill: var(--ill-blekk); }
.ill-list { fill: none; stroke: var(--ill-kalk); stroke-width: 0.9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ill-ribbe-tynn { fill: none; stroke: color-mix(in srgb, var(--ill-blekk) 18%, transparent); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.ill-bobilstripe { fill: var(--ill-rav); }
.ill-bobilstripe--gran { fill: var(--ill-gran); }
.ill-trampoline { fill: color-mix(in srgb, var(--ill-blekk) 80%, var(--ill-stein)); stroke: color-mix(in srgb, var(--ill-stein) 50%, var(--ill-kalk)); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* Bilen i oversikten kjører inn til boden, slik bilene på kartet gjør. */
.ill-bil-kjor { display: none; }
@media (prefers-reduced-motion: no-preference) {
	@supports (offset-path: path("M0 0")) {
		.ill-bil-kjor {
			display: inline;
			offset-rotate: 0deg;
			opacity: 0;
			animation: byneset-ill-kjor 11s cubic-bezier(0.45, 0, 0.35, 1) 1.2s infinite;
		}
		.ill-bil-kjor + .ill-bil-parkert { display: none; }
		.ill-bil-kjor .ill-humpe { animation: byneset-ill-humpe 0.36s ease-in-out infinite alternate; }
		.har-effekter .byneset-ill.byneset-inn:not(.er-inne) .ill-bil-kjor { animation-play-state: paused; }
	}
}
@keyframes byneset-ill-kjor {
	0% { offset-distance: 0%; opacity: 0; }
	5% { opacity: 1; }
	62% { offset-distance: 100%; opacity: 1; }
	90% { offset-distance: 100%; opacity: 1; }
	97%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes byneset-ill-humpe { to { transform: translateY(-0.5px); } }