/*********************************************
 * Intro Banner
**********************************************/
html:not(.vii-intro-banner-loaded),
html:not(.vii-intro-banner-loaded) body {
    overflow:hidden;
    max-height:100vh;
}

.vii-intro-banner {
    padding:0 var(--vii-gap-side);
}

.vii-intro-banner__inner {
    min-height:var(--vii-100vh);
    padding:calc(var(--vii-header-height) + var(--vii-spacing-30)) 0 var(--vii-spacing-72);
}

/** COL LEFT **/
@media (min-width:1024px) {
    .vii-intro-banner__col.col-left {
        padding-right:var(--vii-gap-container);
        max-width:calc(410px + var(--vii-gap-container));
        gap:24px;
    }
}

.vii-intro-banner__decor.arrow {
    top:96%;
    left:78%;
    width:160px;
}

/* logo */
.vii-intro-banner__logo {}

/* content */
.vii-intro-banner__content {
    --vii-spacing-paragraph:24px;
    font-size:14px;
}

/** COL RIGHT **/
.vii-intro-banner__col.col-right {
    max-width:clamp(260px, 42vw, 595px);
    width:100%;
    margin-left:auto;
}

/* video */
.vii-intro-banner__video-container {
    position:relative;
}

.vii-intro-banner__shapes {
    position:absolute;
    left:0;
    height:100%;
    width:100%;
}

.vii-intro-banner__shapes svg {
    aspect-ratio:398/596;
    height:100%;
    position:absolute;
    top:0;
}

.vii-intro-banner__shapes svg:nth-child(1) { left:-231px; }
.vii-intro-banner__shapes svg:nth-child(2) { left:-155px; }
.vii-intro-banner__shapes svg:nth-child(3) { left:-135px; }
.vii-intro-banner__shapes svg:nth-child(4) { left:-97px; }
.vii-intro-banner__shapes svg:nth-child(5) { left:-47px; }

.vii-intro-banner__shapes:after {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:25%;
    background:var(--vii-color-red);
}

@media (max-width:1023px) {
    .vii-intro-banner__inner {
        flex-direction:column-reverse;
        justify-content:flex-end;
        gap:24px;
        padding-bottom:90px;
    }

    .vii-intro-banner__col {
        width:100%;
        max-width:410px;
    }

    .vii-intro-banner__col.col-left {
        gap:16px;
    }

    .vii-intro-banner__col.col-right {
        max-width:clamp(210px, 78vw, 410px);
    }

    .vii-intro-banner__shapes {
        left:-24px;
    }

    .vii-intro-banner__decor.arrow {
        top:auto;
        bottom:-30px;
        left:61%;
        width:120px;
    }

    .vii-intro-banner__decor.arrow img {
        transform:scaleY(-1) rotate(-103deg);
    }
}

/*********************************************
 * Intro Banner > Animation
**********************************************/
.vii-menu {
    opacity:0;
    transform:translateY(-100%);
}