/*********************************************
 * Home Banner
**********************************************/
/* general */
.vii-home-banner {
    --banner-height:calc(var(--vii-100vh) - var(--admin-bar-height));
    --banner-video-w:clamp(300px, calc(0.35 * var(--vii-container)), 413px);
    --spacing-bottom:var(--vii-spacing-64);
}

/* banner height */
.vii-home-banner--height {height:var(--banner-height);}

/* slider */
.vii-home-banner__slide-media:before {background:rgba(0, 0, 0, .15); z-index:1;}
.vii-home-banner__slide-media:after {
    background:linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
    opacity:0.4; z-index:2; top:35%;
}

/* slider > image animation */
body.show-content.finish-loading .vii-home-banner__slide-media.-image {transition:transform 3s ease-in-out;}
body.show-content.finish-loading .vii-home-banner__slide:not(.is-selected) .vii-home-banner__slide-media.-image {transform:scale(1.25);}

/* slider > dots */
body .vii-home-banner .custom-dots .flickity-page-dots {right:6px;}

/* show/hide image desktop/mobile */
.vii-home-banner__slide-media.-image img.is-mobile {display:none;}
@media only screen and (max-width:768px) {
    .vii-home-banner__slide-media.-image.has-image-mobile img.is-desktop {display:none;}
    .vii-home-banner__slide-media.-image.has-image-mobile img.is-mobile {display:block;}
}

/* content */
.vii-home-banner__content {
    padding:0 calc(var(--vii-gap-side) + var(--banner-video-w) + var(--vii-gap-container)) 0 var(--vii-gap-side);
    bottom:var(--spacing-bottom);
}
.vii-home-banner__content-inner {max-width:660px;}
.vii-home-banner.use-separated-content .vii-home-banner__content-item:not(.active) {opacity:0; pointer-events:none;}

/* video */
.vii-home-banner__video-popup {
    right:var(--vii-gap-side); bottom:var(--spacing-bottom);
    width:var(--banner-video-w);
}
.vii-home-banner__video-popup .vii-video-popup:before {opacity:0.3;}
.vii-home-banner__video-popup .vii-video-popup:hover:before {opacity:0.5;}


/*********************************************
 * Home Banner Responsive
**********************************************/
@media only screen and (max-width:1180px) {
    .vii-home-banner {--spacing-bottom:32px;}
    .vii-home-banner:has(.vii-home-banner__slide:nth-child(2)) {--spacing-bottom:60px;}

    /* dots */
    body .vii-home-banner .custom-dots .flickity-page-dots {
        top:unset; right:auto; left:50%; bottom:10px; transform:translateX(-50%);
        min-height:30px; flex-direction:row; gap:12px; padding:8px 12px;
    }
}
@media only screen and (max-width:1023px) {
    .vii-home-banner {
        --spacing-bottom:32px;
        --banner-video-w:clamp(300px, var(--vii-container), 880px);
    }
    .vii-home-banner:has(.vii-home-banner__slide:nth-child(2)) {--spacing-bottom:82px;}

    /* content */
    .vii-home-banner__content {padding-right:var(--vii-gap-side);}
    .vii-home-banner__content-inner {max-width:800px; margin:auto; text-align:center;}

    /* video popup */
    .vii-home-banner__video-popup {
        position:relative; bottom:0; right:0;
        margin:var(--vii-gap-container) auto 0;
    }

    /* dots */
    body .vii-home-banner .custom-dots .flickity-page-dots {bottom:20px;}
}


/*********************************************
 * Home Banner - Animation
**********************************************/
/* first screen */
.vii-home-banner__video-popup,
.vii-home-banner.use-separated-content .vii-home-banner__content-item,
.vii-home-banner:not(.use-separated-content) .vii-home-banner__content-inner {
    transform:translateY(calc(100% + var(--spacing-bottom)));
    transition:transform 1s ease, opacity 0.6s ease;
}
body .vii-home-banner .custom-dots .flickity-page-dots {
    transform:translate(calc(100% + 10px), -50%);
    transition:transform 0.8s ease, opacity 0.6s ease 1.2s;
}
body.page-template-has-home-banner .vii-menu-block.logo {
    transform:translateX(-100%);
    transition:transform 1.2s ease
}
body.page-template-has-home-banner .vii-menu-button {
    transform:translateX(calc(100% + var(--vii-spacing-right)));
    transition:transform 1.2s ease
}
body.page-template-has-home-banner .vii-menu-col .vii-language-switcher.hover {
    opacity:0; transition:opacity 1.2s ease
}
.vii-home-banner__slide-media {
    transform:scale(1.25);
    transition:transform 1.2s ease;
}

/* show-content */
body.show-content .vii-home-banner__video-popup,
body.show-content .vii-home-banner.use-separated-content .vii-home-banner__content-item,
body.show-content .vii-home-banner:not(.use-separated-content) .vii-home-banner__content-inner,
body.show-content.page-template-has-home-banner .vii-menu-block.logo,
body.show-content.page-template-has-home-banner .vii-menu-button {
    transform:translate(0,0);
}
body.show-content .vii-home-banner .custom-dots .flickity-page-dots {transform:translate(0, -50%);}
body.show-content.page-template-has-home-banner .vii-menu-col .vii-language-switcher.hover {opacity:1}
body.show-content .vii-home-banner__slide-media {transform:scale(1);}

/* responsive */
@media only screen and (max-width:1180px) {
    body .vii-home-banner .custom-dots .flickity-page-dots {transform:translate(-50%, 100%); opacity:0;}
    body.show-content .vii-home-banner .custom-dots .flickity-page-dots {transform:translate(-50%, 0); opacity:1}
}