/****************************
 * Loading Animation
****************************/
body.has-loading-animation {height:var(--vii-100vh); overflow:hidden;}
.vii-loading-animation {
    --number-height:74px;
    --index-active:0;
    --duration-number:0ms;
    --width-line:0%;

    --duration-circle:0ms;
    --scale-circle:1;

    top:var(--admin-bar-height);
}
.vii-loading-animation__inner {padding:8vh var(--vii-gap-container);}
html.mac .vii-loading-animation {background:#ededef;}

/* video */
.vii-loading-animation__video {width:232px; top:35%}
.vii-loading-animation__video:before {
    content:"";
    width:20px; aspect-ratio:1; background:var(--vii-color-blue); border-radius:50%;
    position:absolute; left:calc(50% - 10px); top:35.5%;
    transition:transform var(--duration-circle) ease;
}

/* number */
.vii-loading-animation__number {
    height:var(--number-height);
    font-size:68px; line-height:1.1; letter-spacing:-0.07em; color:#2d2218;
}
.vii-loading-animation__number-inner {
    transform:translateY(calc(var(--index-active) * var(--number-height)));
    transition:transform var(--duration-number) ease;
}

/* text */
.vii-loading-animation__text {letter-spacing:-0.01em;}

/* line */
.vii-loading-animation__progress-bar {
    height:4px; aspect-ratio:202/4; background:#d9d9d9;

}
.vii-loading-animation__progress-bar i {
    width:var(--width-line);
    background:linear-gradient(to right, var(--vii-color-blue) 0%, #4587e3 100%);
    transition:width var(--duration-number) ease;
}

/* cookie */
#cookie-notice {transition:opacity .3s ease; opacity:0 !important; z-index:39}
body.page-width-loading.show-cookie #cookie-notice {opacity:1 !important;}

/* responsive */
@media only screen and (max-width:1024px) {
    .vii-loading-animation__video {top:45%}
}


/****************************************
 * Loading Animation - Screen after loading
****************************************/
/* for inner page */
body.page-width-loading .vii-menu-row.top-panel > *,
body.page-width-loading .vii-menu-row.main {transition:transform var(--hb-duration) ease, opacity var(--hb-duration) ease;}
body.page-width-loading.loading-menu .vii-menu-row.top-panel > * {transform:translateY(-50px);}
body.page-width-loading.loading-menu .vii-menu-row.main {transform:translateY(-200%); opacity:0}
body.page-width-loading.loading-menu.animation-inner-page .vii-menu-row.top-panel > *,
body.page-width-loading.loading-menu.animation-inner-page .vii-menu-row.main  {transform:translateY(0); opacity:1}

/* for home page */
body.page-width-loading {--hb-duration:1.2s;}
body.page-width-loading .vii-home-banner {overflow:hidden;}

/* for home page > first screen */
body.page-width-loading.loading-home .vii-home-banner__slider {
    transform:scale(1.5); transition:all 0.6s ease;
}
body.page-width-loading .vii-home-banner__content,
body.page-width-loading [data-scroll-down] {transform:translateY(60vh); opacity:0.5;transition:all 1s ease}
body.page-width-loading .vii-home-banner .flickity-page-dots {opacity:0; transition:opacity var(--hb-duration) ease}

/* for home page > animation after finish loading */
body.page-width-loading.loading-home.scale-circle .vii-home-banner__slider {transform:scale(1.025)}
body.page-width-loading.loading-home.animation-home-banner .vii-home-banner__slider {transform:scale(1)}
body.page-width-loading:is(.animation-home-banner, .simple-loading) .vii-home-banner__content,
body.page-width-loading:is(.animation-home-banner, .simple-loading) [data-scroll-down] {
    transform:translateY(0); opacity:1;
}
body.page-width-loading:is(.animation-home-banner, .simple-loading) .vii-home-banner .flickity-page-dots {opacity:1;}

/* desktop only */
@media only screen and (min-width:1181px) {
    body.page-width-loading.loading-home .vii-menu > * {
        transform:translateY(-125%);
        transition:transform var(--hb-duration) ease;
    }
    body.page-width-loading.loading-home .vii-home-banner {
        --hb-padding:0px;
        padding:0; margin-top:calc(-1 * var(--vii-header-height));
        height:calc(var(--vii-100vh) - var(--admin-bar-height));
        transition:all var(--hb-duration) ease;
    }
    body.page-width-loading.loading-home .vii-home-banner__slide {
        padding-top:0; transition:all var(--hb-duration) ease, opacity .45s ease !important;
    }
    body.page-width-loading.loading-home .vii-home-banner--height {transition:all var(--hb-duration) ease;}

    body.page-width-loading.loading-home:is(.animation-home-banner, .simple-loading) .vii-menu > * {transform:translateY(0)}
    body.page-width-loading.loading-home.animation-home-banner .vii-home-banner {
        --hb-padding:8px;
        padding:0 var(--hb-padding) var(--hb-padding); margin-top:calc(-1 * var(--vii-header-height));
    }
    body.page-width-loading.loading-home.animation-home-banner .vii-home-banner__slide {
        padding-top:var(--vii-header-top-height);
    }
}

/* tablet */
@media only screen and (max-width:1180px) {
    body.page-width-loading .vii-menu {
        transform:translateY(-125%);
        transition:transform var(--hb-duration) ease;
    }
    body.page-width-loading .vii-home-banner__slider {
        transform:scale(1.5);
        transition:transform var(--hb-duration) ease;
    }
    body.page-width-loading:is(.animation-home-banner, .simple-loading, .animation-inner-page) .vii-menu {transform:translateY(0)}
    body.page-width-loading:is(.animation-home-banner, .simple-loading) .vii-home-banner__slider {transform:scale(1)}
    body.page-width-loading.loading-home .vii-home-banner {
        margin-top:calc(-1 * var(--vii-header-height)); height:calc(var(--vii-100vh) - var(--admin-bar-height));
        transition:all var(--hb-duration) ease;
    }
    body.page-width-loading.loading-home.animation-home-banner .vii-home-banner {
        margin-top:0; height:calc(var(--vii-100vh) - var(--vii-header-height) - var(--admin-bar-height));
    }
    body.page-width-loading.loading-home.scale-circle .vii-home-banner__slider {transform:scale(1.2); transition:transform var(--hb-duration) ease;}
    body.page-width-loading.loading-home.animation-home-banner .vii-home-banner__slider {transform:scale(1)}

    body.page-width-loading.finish-loading .vii-menu {
        --hb-duration:0.3s;
    }
}


/****************************
 * Loading Animation > Animation
****************************/
/* circle */
body.page-width-loading i.loading-circle:before {
    content:"";
    width:calc(max(var(--vii-100vw), var(--vii-100vh)) * 1.5); aspect-ratio:1; border-radius:50%;
    position:fixed; transform:translate(-50%, -50%);
    left:50%; top:50%;
    transition:width 0.6s ease; pointer-events:none; z-index:100;
}

/* first screen */
.vii-loading-animation__inner {opacity:0; transition:opacity 0.6s ease;}

/* screen 1: fade all content after */
.vii-loading-animation.screen-1 .vii-loading-animation__inner {opacity:1;}

/* screen 2:play video turbine + number move to first number + progress run to first percent (set variable by javascript) */
/* screen 3:run progress + number (calculate by JS) */
/* screen 4: stop video by JS */

/* screen 5 */
.vii-loading-animation.screen-5 .vii-loading-animation__video:before {transform:scale(var(--scale-circle))}

/* screen 6: scale circle */
body.page-width-loading.show-circle i.loading-circle:before {background:var(--vii-color-blue);}
body.page-width-loading.show-circle.scale-circle i.loading-circle:before {width:0}