/* Silbermuschel Vorspann - der Weg in den Wald.
 *
 * DER ABLAUF, WIE GORDON IHN BESCHRIEBEN HAT
 *
 * Gordon, 11.09.2026: "Die Homepage fängt mit Schwarz an. Es kommen
 * Glühwürmchen. Das Schwarz geht langsam über in dunkles Waldgrün. Und
 * immer unterschiedlich glimmen die Glühwürmchen, und die müssen auch
 * ein bisschen wandern. Und dann kommt langsam das Waldbild, mittig
 * fokussiert, wo man links und rechts den Baum hat, und dann zoomt das
 * in den Wald hinein, als ob man da reingeht. Und dann blendet das
 * langsam in die Homepage über, und dann, wenn die Einblendung fertig
 * ist, sind aber immer noch die Glühwürmchen da, und die blenden dann
 * langsam weg."
 *
 * WARUM CSS HIER NUR ZUSTÄNDE KENNT UND KEINE ZEITEN
 *
 * Jeder Schritt ist eine Klasse, die das Skript setzt. Keine
 * Verzögerungen in Animationen, keine sechs Zeitachsen, die
 * nebeneinander herlaufen und sich beim Verstellen einer Zahl
 * gegenseitig überholen. Das Skript sagt "jetzt das Grün", "jetzt der
 * Wald", "jetzt hinein" - und hier steht nur, wie das aussieht.
 *
 * DIE GLÜHWÜRMCHEN LIEGEN ÜBER DEM VORHANG
 *
 * Nicht darunter. In meinem ersten Entwurf lagen sie unter ihm, und
 * damit wären sie den ganzen Vorspann über unsichtbar gewesen - genau
 * die Ebene, die zuerst kommen und zuletzt gehen soll.
 */

/* Der Vorhang. */
.smv {
	position: fixed;
	inset: 0;
	z-index: 2147482000;
	overflow: hidden;
	background: #000;
	/* Nichts abfangen: Wer schon blättern oder tippen will, soll das
	   können - der Vorspann bricht dann ohnehin ab. */
	pointer-events: none;
}

/* Die Glühwürmchen - eine Ebene höher, damit sie über allem liegen.
   Sie überleben den Vorhang und bleiben über der fertigen Seite. */
.smv-kaefer {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--smv-t-kaefer, 1.6s) ease-out;
}

.smv-kaefer.ist-da { opacity: 1 }

.smv-kaefer.ist-aus {
	opacity: 0;
	transition: opacity var(--smv-t-loeschen, 2.8s) ease-in;
}

/* Jedes Tierchen bekommt vom Skript seine eigenen Werte: Grösse, Weg,
   Dauer, Takt, Verzögerung. Gordon: "immer unterschiedlich glimmen"
   und "ein bisschen wandern". Zwei Animationen übereinander - eine für
   den Weg, eine fürs Glimmen -, mit verschiedenen Dauern, damit sich
   die beiden nie zu einem sichtbaren Muster zusammenfinden. */
.smv-kaefer i {
	position: absolute;
	display: block;
	width: var(--gr, 6px);
	height: var(--gr, 6px);
	border-radius: 50%;
	background: #f7ebb4;
	box-shadow:
		0 0 calc(var(--gr, 6px) * 2.2) calc(var(--gr, 6px) * .6)
			rgba(238, 214, 133, .66),
		0 0 calc(var(--gr, 6px) * 5) calc(var(--gr, 6px) * 1.1)
			rgba(206, 176, 86, .28);
	animation:
		smv-wandern var(--dauer, 11s) ease-in-out var(--spaet, 0s) infinite,
		smv-glimmen var(--takt, 2.6s) ease-in-out var(--spaet, 0s) infinite;
	will-change: transform, opacity;
}

@keyframes smv-wandern {
	0%   { transform: translate(0, 0) }
	25%  { transform: translate(var(--wx, 30px), calc(var(--wy, -40px) * .55)) }
	50%  { transform: translate(calc(var(--wx, 30px) * .25), var(--wy, -40px)) }
	75%  { transform: translate(calc(var(--wx, 30px) * -.65),
	                            calc(var(--wy, -40px) * .35)) }
	100% { transform: translate(0, 0) }
}

@keyframes smv-glimmen {
	0%, 100% { opacity: .08 }
	50%      { opacity: .92 }
}

/* --- Schritt 2: das Waldgrün --------------------------------------- */

.smv-gruen {
	position: absolute;
	inset: 0;
	background: var(--smv-gruen, #122615);
	opacity: 0;
	transition: opacity var(--smv-t-gruen, 2.4s) ease-out;
}

.smv.ist-gruen .smv-gruen { opacity: 1 }

/* --- Schritt 3: der Wald -------------------------------------------

   background-size: 100% auto - die volle Bildbreite, nicht cover.

   Das ist der Kern von Gordons Satz "wo man links und rechts den Baum
   hat". Mit cover wäre auf einem Handy nur ein Viertel der Bildbreite
   zu sehen, und die Bäume an den Seiten lägen ausserhalb des Schirms.
   So steht das ganze Bild da - erst schmal im Dunkeln, dann wächst es.

   Wie weit es wachsen muss, damit es den Schirm füllt, hängt vom Gerät
   ab und steht deshalb nicht hier: Das Skript misst und setzt
   --smv-ziel. */

.smv-wald {
	position: absolute;
	inset: 0;
	background-image: var(--smv-bild);
	background-size: 100% auto;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1);
	transform-origin: 50% 50%;
	transition:
		opacity   var(--smv-t-wald, 2.6s) ease-out,
		transform var(--smv-t-lauf, 6s) cubic-bezier(.34, .02, .5, 1);
	will-change: transform, opacity;
}

.smv.ist-wald .smv-wald { opacity: 1 }

/* Der Schritt hinein. Die Kurve ist bewusst nicht ease-out: Wer in
   einen Wald geht, wird nicht langsamer, je tiefer er kommt. Ein
   kleiner Anlauf am Anfang, dann gleichmässig, und erst ganz am Ende
   ein Auslaufen. */
.smv.ist-drin .smv-wald { transform: scale(var(--smv-ziel, 2)) }

/* Der Blick zur Mitte.
 *
 * Gordon: "mittig fokussiert". Aussen dunkel, in der Mitte offen -
 * dorthin, wohin man läuft. Er zieht sich während des Gehens
 * zusammen, und dadurch schliesst sich der Wald hinter einem. */
.smv-blick {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 88% 74% at 50% 50%,
		rgba(0,0,0,0) 30%, rgba(0,0,0,.40) 66%, rgba(0,0,0,.90) 100%);
	opacity: 0;
	transform: scale(1.5);
	transition:
		opacity   var(--smv-t-wald, 2.6s) ease-out,
		transform var(--smv-t-lauf, 6s) ease-in;
}

.smv.ist-wald .smv-blick { opacity: 1 }
.smv.ist-drin .smv-blick { transform: scale(1) }

/* --- Schritt 4: die Seite blendet auf -------------------------------

   Der Vorhang wird durchsichtig. Die Seite lag die ganze Zeit fertig
   darunter - sie war nie versteckt, nur verdeckt. Deshalb ist beim
   Aufblenden nichts nachzuladen und nichts springt. */
.smv.ist-weg {
	opacity: 0;
	transition: opacity var(--smv-t-blende, 2s) ease-in-out;
}

/* Wer keine Bewegung möchte, bekommt keinen Vorspann. Das Skript baut
   ihn dann gar nicht erst; diese Regel ist der Gürtel zum
   Hosenträger. */
@media (prefers-reduced-motion: reduce) {
	.smv, .smv-kaefer { display: none !important }
}