/*
 * GLX Banner 0.1.1 - animierte Ebene über dem Kopfbanner des Themes "GLX Tools".
 *
 * Das Theme bleibt unverändert. Das Skript hängt eine "Bühne" in
 * .glx-banner (vor die Pfadleiste .glx-banner-krumen). Die Bühne ist genau
 * so groß und so verschoben wie das Bannerbild mit background-size:cover -
 * deshalb stehen alle Teile darin in Anteilen des BILDES und passen auf
 * jeder Breite, auch wenn das Handy links und rechts abschneidet.
 *
 * Keine z-index-Werte: Die Bühne liegt in der Reihenfolge des Dokuments
 * über den Bildebenen und unter der Pfadleiste. Das Holo-Plugin (z-index 5)
 * bleibt oben.
 *
 * Zwei Modi:
 *   sprite        - Ausschnitte aus dem Theme-Bannerbild (Rückfall)
 *   freigestellt  - eigener Hintergrund ohne Teile + Teile als PNG-Ebenen
 */

.glxb-buehne {
	position: absolute;
	/* left/top/width/height setzt das Skript (cover-Rechnung) */
	pointer-events: none;
	contain: layout style;
}
/* Im Modus "freigestellt" blendet die Bühne beim Start weich über das
   Theme-Bild (Deckkraft setzt das Skript). */

/* Teile: Lage per --x/--y/--w/--h (Bildanteile 0..1); das Skript setzt
   zusätzlich ganze Pixel. */
.glxb-teil {
	position: absolute;
	left: calc(var(--x) * 100%);
	top: calc(var(--y) * 100%);
	width: calc(var(--w) * 100%);
	height: calc(var(--h) * 100%);
}

/* Modus sprite: Ausschnitt aus dem gerade sichtbaren Bannerbild.
   Hintergrund so groß wie die Bühne und passend verschoben. */
.glxb-lage {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: calc(100% / var(--w)) calc(100% / var(--h));
	background-position:
		calc(var(--x) / (1 - var(--w)) * 100%)
		calc(var(--y) / (1 - var(--h)) * 100%);
}
.glxb-lage-a { background-image: var(--glxb-bild-a); }
.glxb-lage-b { background-image: var(--glxb-bild-b); opacity: var(--glxb-blende, 0); }

/* Modus freigestellt: je Teil zwei Leinwände (Bild A / Bild B des
   Theme-Wechsels, jeweils passend eingefärbt) */
.glxb-cv {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.glxb-cv-b { opacity: var(--glxb-blende, 0); }

/* nur eine Lage nötig (Theme zeigt gerade kein Überblenden) */
.glxb-nur-a .glxb-lage-b, .glxb-nur-a .glxb-cv-b,
.glxb-nur-b .glxb-lage-a, .glxb-nur-b .glxb-cv-a,
.glxb-nur-a .glxb-deckel canvas + canvas,
.glxb-nur-b .glxb-deckel canvas:first-child { display: none; }

/* Hintergrund ohne Teile (nur Modus freigestellt) */
.glxb-grund {
	position: absolute;
	inset: 0;
}

/* Abdeckung (nur Modus sprite): im Browser errechnete Stelle ohne Kachel */
.glxb-deckel {
	opacity: 0;
	/* weicher Rand, damit der Kasten nicht als Rechteck auffällt */
	-webkit-mask-image:
		linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
		linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
		linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
	mask-composite: intersect;
}
.glxb-deckel canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Dunkler Schleier für den Einstieg */
.glxb-schleier {
	position: absolute;
	inset: 0;
	background: #01050a;
	opacity: 0;
}

/* Lichtpulse */
.glxb-puls {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: screen;
}

/* GLX-Buchstaben: Hülle trägt das Glühen (folgt der Buchstabenform),
   innen die aufgehellte Kopie (sprite: per clip-path beschnitten,
   freigestellt: Form kommt aus dem PNG). */
.glxb-buchstabe {
	opacity: 0;
	filter:
		drop-shadow(0 0 calc(var(--glxb-s, .5) * 6px) var(--glxb-farbe, #3df))
		drop-shadow(0 0 calc(var(--glxb-s, .5) * 18px) var(--glxb-farbe, #3df));
}
.glxb-form {
	position: absolute;
	inset: 0;
	filter: brightness(1.9) saturate(1.3);
}

/* Symbol-Kacheln */
.glxb-kachel {
	transform-origin: 50% 50%;
	backface-visibility: visible;
}
.glxb-sprite.glxb-kachel {
	border-radius: 16%;
	overflow: hidden;
}
.glxb-kachel .glxb-lage { border-radius: inherit; }

/* Holo-Raster (Scanlines), nur während der Holo-Animation sichtbar */
.glxb-scan {
	position: absolute;
	inset: 0;
	border-radius: 16%;
	opacity: 0;
	background: repeating-linear-gradient(to bottom,
		var(--glxb-farbe, #3df) 0, var(--glxb-farbe, #3df) 1px,
		transparent 1px, transparent 3px);
	mix-blend-mode: screen;
}

/* Zahnrad: im Modus sprite ein kreisrunder Ausschnitt mit weichem Rand */
.glxb-zahnrad { transform-origin: 50% 50%; }
.glxb-sprite.glxb-zahnrad {
	border-radius: 50%;
	-webkit-mask-image: radial-gradient(circle closest-side, #000 86%, transparent 100%);
	mask-image: radial-gradient(circle closest-side, #000 86%, transparent 100%);
}

/* Ohne Skript-Bewegung: nichts verschieben, nichts drehen. */
@media (prefers-reduced-motion: reduce) {
	.glxb-kachel, .glxb-zahnrad { transform: none !important; }
}