/* Effektgruppe: layout/shifting-blocks; Reihenfolge in inc/assets.php. */

/* Basis-Setup für die Row */
.shifting-blocks {
    display: flex;
    align-items: center; /* Zentriert die Bewegung optisch */
}

/* Wir nutzen CSS Animationen, die an den Scroll-Fortschritt gebunden sind */
@media (min-width: 1025px) {
    
    /* Animation definieren */
    @keyframes shiftUp {
        from { transform: translateY(30px); }
        to { transform: translateY(-30px); }
    }
    
    @keyframes shiftDown {
        from { transform: translateY(-30px); }
        to { transform: translateY(30px); }
    }

    /* Die Spalten innerhalb der Row ansprechen */
    .shifting-blocks > .kt-row-column-wrap > .wp-block-kadence-column {
        /* Standard: Sanfter Übergang */
        /*transition: transform 0.1s linear;
        /* Scroll-Animationen (Unterstützt Chrome, Edge, Opera) */
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
        animation-fill-mode: both;
    }

    /* --- VARIANTE .left --- */
    /* 1. Spalte nach oben, 2. Spalte nach unten */
    .shifting-blocks.left > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(1) {
        animation-name: shiftUp;
    }
    .shifting-blocks.left > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) {
        animation-name: shiftDown;
    }

    /* --- VARIANTE .right --- */
    /* 1. Spalte nach unten, 2. Spalte nach oben */
    .shifting-blocks.right > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(1) {
        animation-name: shiftDown;
    }
    .shifting-blocks.right > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) {
        animation-name: shiftUp;
    }
}