/* Gemeinsame Scroll-Runtime fuer alle Scroll-Varianten. */

body[data-scroll-variant="scroll"][data-animation-style="layout"],
body[data-scroll-variant="observer"][data-animation-style="layout"] {
    overflow-x: hidden;
}

/* Layout-Variante bewegt ueber Position. */
body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate {
    position: relative;
    transition: left var(--greenlab-scroll-duration) ease, right var(--greenlab-scroll-duration) ease;
}

/* Wachstum wirkt auf Kindelemente. */
body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate.scroll-grow,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate.scroll-grow {
    overflow: hidden;
}

body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate.scroll-grow > *,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate.scroll-grow > * {
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-width var(--greenlab-scroll-duration) ease, max-height var(--greenlab-scroll-duration) ease;
    transition: max-width var(--greenlab-scroll-duration) ease, max-height var(--greenlab-scroll-duration) ease;
}

/* Viewportbreite hält auch schmale Elemente komplett außen. */
body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate:not(.scroll-from-right),
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate:not(.scroll-from-right) {
    left: -110vw;
    right: auto;
}

/* Rechtsstart spiegelt die Bewegung. */
body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate.scroll-from-right,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate.scroll-from-right {
    left: auto;
    right: -110vw;
}

/* Zusatzbewegung kommt von unten. */
body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate.scroll-from-bottom,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate.scroll-from-bottom {
    top: 42px;
    -webkit-transition: left var(--greenlab-scroll-duration) ease, right var(--greenlab-scroll-duration) ease, top var(--greenlab-scroll-duration) ease;
    transition: left var(--greenlab-scroll-duration) ease, right var(--greenlab-scroll-duration) ease, top var(--greenlab-scroll-duration) ease;
}

/* Zusatzbewegung kommt von oben. */
body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate.scroll-from-top,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate.scroll-from-top {
    top: -120px;
    -webkit-transition: left var(--greenlab-scroll-duration) ease, right var(--greenlab-scroll-duration) ease, top var(--greenlab-scroll-duration) ease;
    transition: left var(--greenlab-scroll-duration) ease, right var(--greenlab-scroll-duration) ease, top var(--greenlab-scroll-duration) ease;
}

/* Starke Zusatzbewegung kommt von unten. */
body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate.scroll-from-bottom-strong,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate.scroll-from-bottom-strong {
    top: 120px;
    -webkit-transition: left var(--greenlab-scroll-duration) ease, right var(--greenlab-scroll-duration) ease, top var(--greenlab-scroll-duration) ease;
    transition: left var(--greenlab-scroll-duration) ease, right var(--greenlab-scroll-duration) ease, top var(--greenlab-scroll-duration) ease;
}

/* Sichtbare Elemente gehen auf Zielposition. */
body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate:not(.scroll-from-right).is-visible,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate:not(.scroll-from-right).is-visible {
    left: 0;
}

body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate.scroll-from-right.is-visible,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate.scroll-from-right.is-visible {
    left: auto;
    right: 0;
}

body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate.scroll-from-bottom.is-visible,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate.scroll-from-bottom.is-visible {
    top: 0;
}

body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate.scroll-from-top.is-visible,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate.scroll-from-top.is-visible,
body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate.scroll-from-bottom-strong.is-visible,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate.scroll-from-bottom-strong.is-visible {
    top: 0;
}

body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate.scroll-grow.is-visible > *,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate.scroll-grow.is-visible > * {
    max-width: var(--greenlab-grow-child-width, 100%);
    max-height: var(--greenlab-grow-child-height, 900px);
}

body[data-scroll-variant="scroll"][data-animation-style="layout"] .js-scroll-animate.scroll-grow.is-visible > img,
body[data-scroll-variant="observer"][data-animation-style="layout"] .js-scroll-animate.scroll-grow.is-visible > img {
    max-width: var(--greenlab-grow-image-width, 100%);
    max-height: var(--greenlab-grow-image-height, 900px);
}

/* Transform-Variante nutzt Variablen. */
body[data-scroll-variant="scroll"][data-animation-style="transform"] .js-scroll-animate,
body[data-scroll-variant="observer"][data-animation-style="transform"] .js-scroll-animate {
    --greenlab-scroll-x: -110vw;
    --greenlab-scroll-y: 0;
    --greenlab-scroll-scale: 1;
    -webkit-transform: translate(var(--greenlab-scroll-x), var(--greenlab-scroll-y)) scale(var(--greenlab-scroll-scale));
    transform: translate(var(--greenlab-scroll-x), var(--greenlab-scroll-y)) scale(var(--greenlab-scroll-scale));
    -webkit-transition: -webkit-transform var(--greenlab-scroll-duration) ease;
    transition: transform var(--greenlab-scroll-duration) ease;
}

/* 3D-Transform-Variante nutzt eigene Werte. */
body[data-scroll-variant="scroll"][data-animation-style="transform3d"] .js-scroll-animate,
body[data-scroll-variant="observer"][data-animation-style="transform3d"] .js-scroll-animate {
    --greenlab-scroll-x: -110vw;
    --greenlab-scroll-y: 0;
    --greenlab-scroll-scale: 1;
    -webkit-transform: translate3d(var(--greenlab-scroll-x), var(--greenlab-scroll-y), 0) scale3d(var(--greenlab-scroll-scale), var(--greenlab-scroll-scale), 1);
    transform: translate3d(var(--greenlab-scroll-x), var(--greenlab-scroll-y), 0) scale3d(var(--greenlab-scroll-scale), var(--greenlab-scroll-scale), 1);
    -webkit-transition: -webkit-transform var(--greenlab-scroll-duration) ease;
    transition: transform var(--greenlab-scroll-duration) ease;
}

/* Wachstum skaliert per Transform. */
body[data-scroll-variant="scroll"][data-animation-style="transform"] .js-scroll-animate.scroll-grow,
body[data-scroll-variant="observer"][data-animation-style="transform"] .js-scroll-animate.scroll-grow,
body[data-scroll-variant="scroll"][data-animation-style="transform3d"] .js-scroll-animate.scroll-grow,
body[data-scroll-variant="observer"][data-animation-style="transform3d"] .js-scroll-animate.scroll-grow {
    --greenlab-scroll-scale: 0;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

/* Klassen setzen nur Variablen um. */
body[data-scroll-variant="scroll"][data-animation-style="transform"] .js-scroll-animate.scroll-from-right,
body[data-scroll-variant="observer"][data-animation-style="transform"] .js-scroll-animate.scroll-from-right,
body[data-scroll-variant="scroll"][data-animation-style="transform3d"] .js-scroll-animate.scroll-from-right,
body[data-scroll-variant="observer"][data-animation-style="transform3d"] .js-scroll-animate.scroll-from-right {
    --greenlab-scroll-x: 110vw;
}

body[data-scroll-variant="scroll"][data-animation-style="transform"] .js-scroll-animate.scroll-from-bottom,
body[data-scroll-variant="observer"][data-animation-style="transform"] .js-scroll-animate.scroll-from-bottom,
body[data-scroll-variant="scroll"][data-animation-style="transform3d"] .js-scroll-animate.scroll-from-bottom,
body[data-scroll-variant="observer"][data-animation-style="transform3d"] .js-scroll-animate.scroll-from-bottom {
    --greenlab-scroll-y: 42px;
}

body[data-scroll-variant="scroll"][data-animation-style="transform"] .js-scroll-animate.scroll-from-top,
body[data-scroll-variant="observer"][data-animation-style="transform"] .js-scroll-animate.scroll-from-top,
body[data-scroll-variant="scroll"][data-animation-style="transform3d"] .js-scroll-animate.scroll-from-top,
body[data-scroll-variant="observer"][data-animation-style="transform3d"] .js-scroll-animate.scroll-from-top {
    --greenlab-scroll-y: -120px;
}

body[data-scroll-variant="scroll"][data-animation-style="transform"] .js-scroll-animate.scroll-from-bottom-strong,
body[data-scroll-variant="observer"][data-animation-style="transform"] .js-scroll-animate.scroll-from-bottom-strong,
body[data-scroll-variant="scroll"][data-animation-style="transform3d"] .js-scroll-animate.scroll-from-bottom-strong,
body[data-scroll-variant="observer"][data-animation-style="transform3d"] .js-scroll-animate.scroll-from-bottom-strong {
    --greenlab-scroll-y: 120px;
}

/* Sichtbar setzt alle Transformwerte zurueck. */
body[data-scroll-variant="scroll"][data-animation-style="transform"] .js-scroll-animate.is-visible,
body[data-scroll-variant="observer"][data-animation-style="transform"] .js-scroll-animate.is-visible,
body[data-scroll-variant="scroll"][data-animation-style="transform3d"] .js-scroll-animate.is-visible,
body[data-scroll-variant="observer"][data-animation-style="transform3d"] .js-scroll-animate.is-visible {
    --greenlab-scroll-x: 0;
    --greenlab-scroll-y: 0;
    --greenlab-scroll-scale: 1;
}