/****************************
 * Header
*****************************/
.site-banner {
    --content-w:500px;
    --banner-width-content:calc(14 * var(--grid-size));
    padding:calc(1.57 * var(--grid-size) + var(--vii-header-height)) 0 calc(1.67 * var(--grid-size));
    position:relative;
    min-height:600px;

    .site-banner__inner {
        max-width:var(--content-w); margin:0 auto;

        .site-title__inner {max-width:450px;}
        .site-breadcrumbs-image {margin-bottom:24px;}
        .decor.crown {bottom:103%; left:103%; width:80px;}
    }
}
@media only screen and (max-width:1180px) {
    .site-banner {
        min-height:400px;
    }
}

/* breadcrumb */
.site-breadcrumbs a, .breadcrumb-sep:not(:nth-last-child(2)) {color:rgba(255, 255, 255, 0.6);}
.site-breadcrumbs a:hover, .site-breadcrumbs a:focus {color:#fff;}
.breadcrumb-sep {padding:0 15px;}

/* decoration */
.site-banner__decor.crown {
    right:calc(var(--grid-size) * -0.1); bottom:calc(var(--grid-size) * 0.8);
    height:52px; aspect-ratio:58/52
}
.site-banner__decor.yellow-arrow {
    right:calc(var(--banner-width-content) - var(--grid-size) * 2.06); bottom:calc(-1 * var(--grid-size) + -15px);
    height:106px; aspect-ratio:109/128;
}
.site-banner__decor.laptop img {transform:rotate(20.5deg);}

/* lottie */
.site-banner__decor.diamond {
    width:77px; aspect-ratio:77/96; padding:4px;
    bottom:100%; transform:translateY(80%); left:calc(var(--grid-size) * -0.5);
}

/****************************
 * Header - Responsive
*****************************/
@media only screen and (max-width:1280px) {
    .site-banner {--banner-width-content:calc(12 * var(--grid-size));}

    /* decoration */
    .site-banner__decor.robot-hand {height:150px; bottom:calc(-2 * var(--grid-size) - 20px);}
    .site-banner__decor.laptop {height:100px; right:calc(var(--banner-width-content) - 30px);}
}
@media only screen and (max-width:1180px) {
    .breadcrumb-sep {padding:0 8px;}
}
@media only screen and (max-width:1023px) {
    .site-banner {
        --pos-x:var(--vii-gap-side);
        overflow:unset;
        padding:calc(var(--vii-header-height) + 50px) 0 50px;

        .site-banner__inner {margin-left:0; margin-right:unset;}
    }

    .site-breadcrumbs-image, .site-title {width:100%;}
    .site-image, .site-title {max-width:100%;}
    .site-breadcrumbs-image {padding-right:0;}
    .site-image {height:calc(3 * var(--grid-size));}
    .site-image img {object-position:top left;}

    /* Content */
    .site-title {min-height:calc(4 * var(--grid-size));}
    .site-title__inner {--vii-spacing-heading:8px;}

    /* lottie */
    .site-banner__decor.diamond {left:44%; transform:translateY(22%); width:50px;}
}
@media only screen and (min-width:769px) {
    .site-banner .site-image {max-width:calc(10.5 * var(--grid-size));}
}
@media only screen and (max-width:768px) {
    .site-banner {margin-bottom:var(--vii-spacing-default);}
    .site-banner__inner {gap:24px;}
    .site-image {height:calc(5 * var(--grid-size));}

    /* lottie: increased size */
    .site-banner__decor.diamond {left:unset; right:35px; width:58px; aspect-ratio:47/59;}
}
@media only screen and (max-width:480px) {
    .site-banner {
        --pos-y:5px;

        .site-banner__inner {
            .site-breadcrumbs-image {margin-bottom:18px;}
        }

        .mobile-bg {top:var(--vii-header-height);}
    }

    .site-breadcrumbs {margin-bottom:18px; font-size:15px;}
    .breadcrumb-sep {padding:0 4px;}

    .site-title {min-height:calc(4.5 * var(--grid-size)); font-size:15px; --vii-size-h1:22px;}
}


/****************************
 * Header > Animation
*****************************/
.banner-shape-animation {
    height:100vh; bottom:auto;
    overflow:hidden;

    .layer {
        /* width:calc(50% - var(--content-w) / 2); */
        width:100%;
        /* top:calc((100vh - 600px) * -1); bottom:calc((100vh - 600px) * -1); */

        &.left {left:-55px; right:auto;}
        &.right {right:-55px; left:auto; transform:scaleX(-1);}

        svg {
            height:130%; min-height:980px; aspect-ratio:295/980;
            position:absolute; left:0; top:37%;
            transform:translate(0, -50%);

            &:nth-child(1) {z-index:4; left:-94px; aspect-ratio:380/980;}
            &:nth-child(2) {z-index:3; left:60px;}
            &:nth-child(3) {z-index:2; left:128px;}
            &:nth-child(4) {z-index:1; left:188px;}
        }
    }
}

.white-shape {
    bottom:calc(100% - 1px); top:auto;

    &:before, &:after {content:""; height:70px; display:block; background:#fff;}
    &:before {aspect-ratio:120/70;}
    &:after {aspect-ratio:220/70;}
    &.right:before {margin-left:auto;}
}


@media only screen and (min-width:1024px) {
    .banner-shape-animation__inner,
    [data-anim="content"] {opacity:0;}
    .site-content {opacity:0; background-color:var(--vii-color-bg); padding-top:25px;}
    .vii-menu {
        opacity:0; transform:translateY(-100%);
    }
}