/* =========================================================
   AB Portfolio – Intro
   Das Pool-Carousel (Klasse abx-intro im Gridder) ist immer unsichtbar.
   Nur mit html.abx-intro-pending liegt es als Vollbild über der Seite.
   Diese Klasse setzt intro-guard.js, ohne JavaScript bleibt alles aus.
   Das Vollbild ersetzt Lays Größen aus dem Gridder, daher !important.

   Ablauf: Das Intro kommt aus einer weißen Fläche, das Bild blendet
   vergrößert ein und schrumpft auf Vollbild (Einblenden). Am Ende wächst es
   weiter auf den Betrachter zu und blendet dabei aus (Ausblenden).
   Animiert werden nur transform und opacity. Die Größe ändert sich nur an
   den Bildern selbst, nie am Carousel oder an einem Element darüber: Lay
   misst die Slide-Breite samt Skalierung (getestet 07.11.2026: bei 92 %
   wurden die Slides dauerhaft 92 % breit, rechts blitzte das Nachbarbild).
   ========================================================= */

/* Stellschrauben. modules/intro.js liest die drei Dauern von hier,
   deshalb immer mit Einheit (ms oder s) angeben.
   Beide Größen nicht unter 1, sonst entstehen weiße Ränder. */
:root {
	--abx-intro-start-scale: 1.12;     /* Größe des Bildes beim Einblenden */
	--abx-intro-end-scale: 1.25;       /* Größe des Bildes am Ende */
	--abx-intro-enter-duration: 500ms; /* Einblenden; Bildwechsel zählen erst danach */
	--abx-intro-exit-duration: 700ms;  /* Ausblenden nach dem letzten Bild */
	--abx-intro-abort-duration: 400ms; /* Ausblenden nach Scrollen, Klick oder Taste */
}

.abx-intro {
	display: none !important;
}

/* Weiße Fläche, bis das Pool-Carousel im Seitenaufbau erreicht ist. */
html.abx-intro-pending::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	background-color: #fff;
}

/* Lays Inhaltsbereich ist eine eigene Ebene (z-index 0). Sie muss während des
   Intros über die weiße Fläche, Menü und Back Button, sonst bleibt das
   Pool-Carousel verdeckt. Der Cursor liegt weiterhin darüber. */
html.abx-intro-pending body > .lay-content {
	z-index: 2147483001 !important;
}

html.abx-intro-pending .abx-intro {
	display: block !important;
	position: fixed !important;
	inset: 0;
	z-index: 2147483001;
	width: 100vw !important;
	height: 100vh !important;
	margin: 0 !important;
	background-color: #fff;
	transition: opacity var(--abx-intro-exit-duration) ease-in;
}

html.abx-intro-pending .abx-intro .lay-carousel-wrap,
html.abx-intro-pending .abx-intro .lay-carousel,
html.abx-intro-pending .abx-intro .swiper-container {
	width: 100% !important;
	height: 100% !important;
	padding-bottom: 0 !important;
}

html.abx-intro-pending .abx-intro .swiper-wrapper,
html.abx-intro-pending .abx-intro .lay-carousel-slide,
html.abx-intro-pending .abx-intro .slide-inner {
	height: 100% !important;
}

/* Vergrößerte Bilder bleiben in ihrer Slide und ragen nicht ins Nachbarbild. */
html.abx-intro-pending .abx-intro .lay-carousel-slide {
	overflow: hidden !important;
}

/* Bildschirm immer gefüllt, Bildmitte bleibt in der Mitte (object-fit).
   Lay zentriert Carousel-Bilder je nach Einstellung mit left: 50% und
   translateX(-50%). Hier liegt das Bild fest in der Slide, damit die
   Skalierung unten nicht mit Lays Verschiebung kollidiert. */
html.abx-intro-pending .abx-intro img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center !important;
}

/* Einblenden: Das Carousel ist erst durchsichtig, die Bilder vergrößert.
   Sobald intro.js läuft (abx-intro-running), wird es deckend und die Bilder
   schrumpfen auf Vollbild. Deckkraft verändert Lays Messung nicht. */
html.abx-intro-pending .abx-intro .lay-carousel {
	opacity: 0;
	transition: opacity var(--abx-intro-enter-duration) ease-out;
}

/* Lays eigene Einblendung der Bilder beim Laden (opacity 300 ms) bleibt erhalten. */
html.abx-intro-pending .abx-intro img {
	transform: scale(var(--abx-intro-start-scale)) !important;
	transform-origin: 50% 50% !important;
	transition: opacity 300ms ease-out, transform var(--abx-intro-enter-duration) ease-out !important;
	will-change: transform;
}

html.abx-intro-pending.abx-intro-running .abx-intro .lay-carousel {
	opacity: 1;
}

html.abx-intro-pending.abx-intro-running .abx-intro img {
	transform: scale(1) !important;
}

/* Ausblenden: Die Bilder wachsen weiter, das ganze Intro wird durchsichtig.
   Die weiße Fläche dahinter verschwindet sofort, sonst bliebe beim
   Ausblenden ein weißer Schleier über der Startseite. */
html.abx-intro-leaving::after {
	opacity: 0;
}

html.abx-intro-leaving .abx-intro {
	opacity: 0;
}

html.abx-intro-pending.abx-intro-running.abx-intro-leaving .abx-intro img {
	transform: scale(var(--abx-intro-end-scale)) !important;
	transition: opacity 300ms ease-out, transform var(--abx-intro-exit-duration) ease-in !important;
}

html.abx-intro-leaving.abx-intro-abort .abx-intro {
	transition-duration: var(--abx-intro-abort-duration);
}

html.abx-intro-pending.abx-intro-running.abx-intro-leaving.abx-intro-abort .abx-intro img {
	transition: opacity 300ms ease-out, transform var(--abx-intro-abort-duration) ease-in !important;
}

/* Der weiße Cursor-Punkt wäre auf dem weißen Grund unsichtbar: Umkehr-Effekt
   wie auf den weißen Seiten. */
html.abx-cursor-on.abx-intro-pending .abx-cursor:not(.abx-cursor--image):not(.abx-cursor--drag) {
	mix-blend-mode: exclusion;
}