/*
 * Startbild, Zeichnung: bewegliche Teile und Lage im Hochformat.
 * Beim ersten Besuch steht die Szene fertig da und löst sich beim Scrollen nach unten auf (Auftraggeber,
 * 10.11.2026): äußere Pflasterringe zuerst, der Bagger fährt davon, Baustelle, Brunnen und Teich verblassen.
 * Gesteuert von assets/js/effekte.js; ohne Skript oder bei „Bewegung reduzieren“ bleibt alles stehen.
 */

.szene #s-teich {
	transform-box: fill-box;
	transform-origin: 50% 60%;
}

/* startbild.js verkleinert das Denkmal vom Fuß aus, wenn es sonst in den Starttext ragen würde */
.szene #s-denkmal {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.szene #s-bagger-arm {
	transform-box: view-box;
	transform-origin: 330px 736px;
}

.js-effekte .szene .stein {
	transition: opacity 0.35s, transform 0.55s cubic-bezier(0.5, 0, 0.75, 0);
}

.js-effekte .szene .stein.geloest {
	opacity: 0;
	transform: translateY(-46px);
}

/* Hochformat (Tablet, Handy): Bagger, Pflaster, Teich und Baum rücken zusammen, damit alles im Bild bleibt */
.szene .hoch-bagger,
.szene .hoch-pflaster,
.szene .hoch-teich,
.szene .hoch-baum {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

@media (max-aspect-ratio: 1/1) {
	.start {
		height: 150vh;
	}

	.start__szene svg {
		top: auto;
		height: 58%;
	}

	/* Hof und Teich rücken im Hochformat getrennt zusammen; der Verbindungsweg träfe den Teich nicht mehr */
	.szene #s-weg {
		display: none;
	}

	.szene .hoch-bagger {
		transform: translateX(300px) scale(0.8);
	}

	.szene .hoch-pflaster {
		transform: translateX(80px) scale(0.75);
	}

	.szene .hoch-teich {
		transform: translate(-200px, -60px) scale(0.8);
	}

	.szene .hoch-baum {
		transform: translate(-260px, -60px) scale(0.8);
	}
}

@media (max-aspect-ratio: 1/1) and (max-width: 760px) {
	.szene .hoch-bagger {
		transform: translateX(350px) scale(0.62);
	}

	.szene .hoch-pflaster {
		transform: translateX(10px) scale(0.55);
	}

	.szene .hoch-teich {
		transform: translate(-260px, -60px) scale(0.6);
	}

	.szene .hoch-baum {
		transform: translate(-400px, -55px) scale(0.6);
	}
}