/* BLOCK: Hero Banner */

.block-hero-banner {
    --height: calc(1vh * var(--height-val));
    --height: calc(1svh * var(--height-val));
    max-width: 100%;
    width: 100%; 
    height: auto;
    min-height: var(--height);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    background-color: var(--c-primary);
    background-image: linear-gradient(180deg, rgb(from var(--c-secondary) r g b / 0.4) 0%, transparent 100%);
    background-size: 100% 500px;
    background-repeat: no-repeat;
}

.block-hero-banner.scroll-animation {
    --pt: 0px !important;
    --pb: 0px !important;
    /* Previous Version */
    /* --scroll-space: max(0px, var(--page-size) - 85vh); */
    /* --scroll-space: max(0px, var(--page-size) - 85svh); */
    /* New Version */
    --scroll-space: max(0px, ( var(--page-size) - 70vh ) * 0.5);
    --scroll-space: max(0px, ( var(--page-size) - 70svh ) * 0.5);
    --height: calc(100vh + var(--scroll-space));
    --height: calc(100svh + var(--scroll-space));
    padding-bottom: var(--scroll-space);
}

.block-hero-banner.scroll-animation .gradient-circle--animate {
    overflow: visible;
    position: absolute;
    bottom: calc(-1 * var(--scroll-space, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: var(--page-size);
    height: auto;
    max-width: unset;
    z-index: -1;
    user-select: none;
    pointer-events: none;
}

.block-hero-banner .bg-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.block-hero-banner .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3.75rem;
    align-items: center;
}

.block-hero-banner:first-child .content-wrapper {
    padding-top: var(--header-height);
}

.block-hero-banner.scroll-animation:first-child .content-wrapper {
    padding-block: var(--header-height, 3rem) 3rem;
}

.block-hero-banner .cta-buttons {
    gap: 0.938rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.block-hero-banner .cta-buttons a:first-child {
    color: var(--c-text-light);
    background-color: var(--c-secondary);
    border-color: var(--c-secondary);
}

.block-hero-banner .highlighted-text {
    color: var(--c-light-purple);
}

.block-hero-banner .heading {
    line-height: 1;
}

.block-hero-banner .highlighted-text + .heading {
    margin-top: -1.25rem;
}

.block-hero-banner .heading--static {
    text-align: center;
}

.block-hero-banner .heading--dynamic {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    align-items: center;
}

.block-hero-banner .heading--dynamic .heading__static {
    font-size: var(--font-90-44);
}

.block-hero-banner .content-wrapper .description {
    text-align: center;
    padding-top: 1.25rem;
    max-width: 51rem;
}

.block-hero-banner .text-roller {
    position: relative;
    height: .69lh;
    height: .69em
}

.block-hero-banner .text-roller.init .text-roller__item {
    transition: none !important;
}

.block-hero-banner .text-roller__item {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0px 0px 120px #00000040;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(.5,-0.6,.5,1.5);
    transition-property: transform, opacity;
}

.block-hero-banner .text-roller__item:not(.active) {
    transform: translate(-50%, 100%) scale(0.75);
    opacity: 0;
    user-select: none;
    pointer-events: none;
}

@media screen and (width <= 620px) {
    .block-hero-banner {
        background-size: 100% 300px;
    }
    .block-hero-banner.scroll-animation {
        --scroll-space: 50vw;
        --scroll-space: 50svw;
    }
    .block-hero-banner.scroll-animation .gradient-circle--animate {
        width: 207vw;
        bottom: 0;
    }
    .block-hero-banner .content-wrapper {
        gap: 3.125rem;
    }
    .block-hero-banner .heading--dynamic {
        gap: 0.75rem;
    }
    .block-hero-banner .cta-buttons {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
        min-width: min(100vw - 3rem, 15.875rem);
        margin-inline: auto;
    }
}