/* -------------------------------------------------------------------------
   Fold-Intro: Beim Öffnen der Tool-Shell klappt das Tool selbst einmal kurz
   auf - Kopfleiste und Seite schwingen gemeinsam um die linke Kante nach
   vorne, wie ein Falthandy, das aufgeschlagen wird.

   Kein Overlay, kein Deckel: animiert wird der echte Inhalt.

   Die Perspektive sitzt auf dem body, damit .top und .pageswrapper denselben
   Fluchtpunkt teilen und wie EINE Fläche aufklappen. Sie wird per Animation
   gesetzt statt als normale Property, weil ein body mit perspective sonst
   dauerhaft Containing Block für alles position:fixed wäre.

   Aus demselben Grund ist überall fill-mode "backwards": der gefaltete
   Startzustand gilt nur bis zum Ende der Animation, danach bleibt weder
   transform noch perspective stehen.

   Greift nur beim Laden von base.php - AJAX-Seitenwechsel bleiben unberührt.
   ------------------------------------------------------------------------- */

:root {
	--foldIntroDuration: 430ms;
	/* kurzer Moment im zugeklappten Zustand, bevor es aufgeht */
	--foldIntroDelay: 70ms;
	/* Startwinkel: 0deg = offen, 90deg = ganz zugeklappt */
	--foldIntroAngle: 34deg;
	--foldIntroPerspective: 2200px;
}

body {
	/* Betrachter mittig: die Faltung bleibt symmetrisch. */
	perspective-origin: 50% 50%;
	animation: foldIntroStage calc(var(--foldIntroDuration) + var(--foldIntroDelay)) linear backwards;
}

.top,
.pageswrapper {
	/* Scharnier in der Bildmitte - das Tool entfaltet sich nach beiden Seiten. */
	transform-origin: center center;
	animation: foldIntroOpen var(--foldIntroDuration) cubic-bezier(.19, .84, .31, 1) var(--foldIntroDelay) backwards;
}

/* Haelt die Perspektive nur solange, wie das Tool aufklappt. */
@keyframes foldIntroStage {
	from { perspective: var(--foldIntroPerspective); }
	to   { perspective: var(--foldIntroPerspective); }
}

@keyframes foldIntroOpen {
	0% {
		transform: rotateY(var(--foldIntroAngle));
		filter: brightness(.9);
	}
	100% {
		transform: rotateY(0deg);
		filter: brightness(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	body,
	.top,
	.pageswrapper { animation: none; }
}