/* BLOCK: Scrolling Texts */

.block-scrolling-texts {
    display: flex;
    align-items: center;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.block-scrolling-texts .bg-graphics {
    position: absolute;
    z-index: -1;
    max-width: 79.5rem;
    min-width: 47.3rem;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-63%, -63%);
    opacity: 0.2;
}

.block-scrolling-texts .main-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6.25rem;
}

.block-scrolling-texts .progressbar {
    grid-column: 1;
    grid-row: 1;
    width: 2px;
    height: 100%;
    background-color: rgb(from var(--theme-ui) r g b / .2);
    overflow: hidden;
}

.block-scrolling-texts .progressbar::before {
    content: '';
    display: block;
    width: 100%;
    height: calc(var(--index, 0) * 100% / var(--count, 1));
    background-color: var(--theme-ui);
    transition: height 800ms cubic-bezier(0.83, 0, 0.17, 1);
}

.block-scrolling-texts .text-content {
    grid-column: 2;
    grid-row: 1;
    max-width: 51.5625rem;
    transform: translateY(calc(-100% - 2.5rem));
    opacity: 0;
    margin-block: 3.375rem;
}

.block-scrolling-texts .text-content.has-transition {
    transition: 800ms cubic-bezier(0.83, 0, 0.17, 1);
    transition-property: transform, opacity;
}

.block-scrolling-texts .text-content.active {
    transform: translateY(0);
    opacity: 1;
}

.block-scrolling-texts .text-content.active ~ .text-content {
    transform: translateY(calc(100% + 2.5rem));
}

.block-scrolling-texts .text-content :where(h5, .h5, h6, .h6) {
    color: var(--theme-text-body);
}

@media screen and (width <= 620px) {
    .block-scrolling-texts .bg-graphics {
        left: 0;
        transform: translate(-8%, -61%);
    }

    .block-scrolling-texts .main-wrapper {
        gap: 2.5rem;
    }

    .block-scrolling-texts .text-content {
        padding-right: 1.625rem;
        margin-block: 1.25rem;
    }
}