/* ==========================================================================
   GLX Holo - Vorspann und Bannerelement
   ==========================================================================

   Alle einstellbaren Zahlen kommen als CSS-Variablen aus dem Plugin
   (siehe glxholo_mitgeben). Hier steht nur, WIE es aussieht, nicht
   WELCHE Werte - sonst müsste man zum Ändern einer Größe eine Datei
   bearbeiten statt ein Feld auszufüllen.
   ========================================================================== */

/* --- Die Auflage über der ganzen Seite ---------------------------------
   Die Farbe liegt HIER und nicht im Video: Das Video ist durchsichtig,
   damit dieselbe Datei auch im Banner über dem Seitenhintergrund laufen
   kann. Wer die Farbe ändern will, ändert ein Feld - nicht 72 Bilder. */
.glxholo-auflage{
	position:fixed;
	inset:0;
	z-index:2147483000;          /* über allem, auch über Cookie-Hinweisen */
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--glxholo-grund,#0a1a2c);
	opacity:1;
	transition:opacity var(--glxholo-blende,.8s) ease;
}
.glxholo-auflage[hidden]{display:none}

/* Beim Ausblenden: NUR DER GRUND wird durchsichtig, nicht die
   Animation. Sie fliegt ja gerade an ihren Platz im Banner.

   Gordon am 27.09.2026: "Kann die Eintrittsanimation eine Flugbahn
   haben und dabei kleiner werden, sodass sie da landet, wo die
   Animation im Banner liegt? Dass es so aussieht, als ob die grosse
   Animation da oben landet."

   Frueher stand hier opacity:0 auf der ganzen Auflage - damit waere
   auch der fliegende Ring mit verblasst, und vom Flug saehe man
   nichts.

   Ohne pointer-events waere die Seite eine knappe Sekunde lang nicht
   bedienbar, obwohl man sie schon sieht. */
.glxholo-auflage{
	transition:background-color var(--glxholo-blende,.8s) ease,
	           opacity var(--glxholo-blende,.8s) ease;
}
.glxholo-auflage.glxholo-weg{
	background-color:transparent;
	pointer-events:none;
}
/* Ohne Flugbahn - etwa wenn kein Bannerelement da ist - verschwindet
   die ganze Auflage wie bisher. */
.glxholo-auflage.glxholo-weg.glxholo-ohne-flug{
	opacity:0;
}

/* --- Der Flieger --------------------------------------------------------

   Gordon am 27.09.2026: "Die Animation muss im Banner einfach
   weiterlaufen, ohne Pause. Aber die Flugbahn muss als Kreis
   stattfinden und nicht sich dabei drehen."

   Nicht der Vorspann fliegt, sondern das Bannervideo - es dreht sich
   nur in seiner eigenen Ebene und bleibt darum von vorn immer ein
   Kreis. Es laeuft von Anfang an mit, nur unsichtbar; so ist es warm,
   wenn es gebraucht wird, und muss nicht erst laden.

   display:none waere falsch: Ein nicht gezeichnetes Video darf der
   Browser anhalten, und dann faengt es beim Abflug bei Null an -
   genau das "blub, blub, blub", das Gordon im Banner schon einmal
   gestoert hat. Also unsichtbar, aber gezeichnet. */
.glxholo-flieger{
	position:fixed;
	left:0; top:0;
	width:0; height:auto;
	margin:0;
	opacity:0;
	pointer-events:none;
	display:block;
	transform-origin:center center;
	filter:brightness(var(--glxholo-bhell,1.7));
}
/* Im Flug: sichtbar, und NUR verschoben und verkleinert. Kein rotate -
   das war die Drehung, die stoerte. */
.glxholo-flieger.glxholo-fliegt{
	opacity:var(--glxholo-bdeck,.85);
	transition:transform var(--glxholo-blende,.8s) cubic-bezier(.4,0,.2,1);
	will-change:transform;
}
/* Der Vorspann tritt im Augenblick des Abflugs ab - sonst saehe man
   beide Ringe uebereinander. Ohne Uebergang, weil der Flieger an
   genau derselben Stelle in genau derselben Groesse steht. */
.glxholo-auflage.glxholo-uebergabe .glxholo-film{visibility:hidden}

/* Der Flug selbst. Die Dauer setzt das Skript, weil sie einstellbar
   ist; die Kurve steht hier: langsam los, sanft ankommen. */
.glxholo-auflage .glxholo-film.glxholo-fliegt{
	transition:transform var(--glxholo-blende,.8s) cubic-bezier(.4,0,.2,1);
	will-change:transform;
}

.glxholo-auflage .glxholo-film{
	width:min(var(--glxholo-vbreite,640px), 86vw);
	height:auto;
	display:block;
	/* HELLIGKEIT, NICHT DECKKRAFT.
	   Das gerenderte Video ist blass - die HUD-Materialien leuchten
	   schwach. Deckkraft macht es nur noch schwaecher; hier wird es
	   heller gerechnet. */
	filter:brightness(var(--glxholo-vhell,1.3));
}

/* --- Das Bannerelement --------------------------------------------------
   Es hängt im Bannerbereich des Themes, wenn einer gefunden wird; sonst
   klebt es oben rechts am Fenster. Beides absichtlich rechts: links
   steht in aller Regel das Logo. */
.glxholo-banner{
	position:absolute;
	top:var(--glxholo-boben,10px);
	right:var(--glxholo-brechts,24px);
	width:var(--glxholo-bbreite,180px);
	opacity:var(--glxholo-bdeck,.85);
	pointer-events:none;         /* es ist Zierde, kein Bedienelement */
	z-index:5;
	line-height:0;
}
.glxholo-banner .glxholo-film{
	width:100%;
	height:auto;
	display:block;
	/* Gordon am 27.09.2026: "Auch wenn ich die Deckkraft auf 100 %
	   stelle, ist es immer noch transparent." Stimmt - Deckkraft kann
	   nichts heller machen. Dafuer ist das hier da. */
	filter:brightness(var(--glxholo-bhell,1.7));
}

/* Kein Wirt gefunden - dann am Fenster festmachen. */
.glxholo-banner.glxholo-frei{
	position:fixed;
	z-index:1200;
}

/* --- Kleine Bildschirme -------------------------------------------------
   Gordon am 27.09.2026: "Mobil sehe ich keine Animation, und ich sehe
   auch im Banner die Animation nicht. Das muss mobil wie Desktop
   funktionieren."

   Hier stand display:none für das Bannerelement - gut gemeint (es nimmt
   der Überschrift Platz weg), aber nicht meine Entscheidung. Jetzt
   entscheidet ein Haken im Menü, und die Breite lässt sich fürs Handy
   getrennt einstellen. */
@media (max-width:782px){
	.glxholo-banner{display:none}
	.glxholo-banner.glxholo-auch-handy{display:block}
}

/* --- Wer keine Bewegung will --------------------------------------------
   Manche Menschen bekommen von bewegten Flächen Kopfschmerzen oder
   Schwindel; das System sagt das ausdrücklich. Dann kein Vorspann und
   kein laufendes Bild - aber auch keine leere Stelle: Das Video zeigt
   sein erstes Bild und steht still. Das Anhalten macht das Skript. */
@media (prefers-reduced-motion:reduce){
	.glxholo-auflage{display:none}
}