/* @group home-model
------------------------------------ */

.home-model {
    width: 100%;
    overflow: hidden;
}

.home-model pre {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

.home-model canvas {
    display: block;
    margin: auto;
}

.home-model aside {
    mix-blend-mode: lighten;
}

.home-model h2 {
    font-weight: 400;
}
.home-model h2 b {
    font-family: var(--didot-font);
    font-weight: 700;
}

.home-model h2 span {
    font: inherit;
    border-radius: 4rem;
    padding-block: 0.1em;
    padding-inline: 0.2em;
}

.home-model script + article { margin-top: 10rem; }

.home-model .bot-text span {
    display: block;
}

.home-model .loader {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
}


@media only screen and (min-width : 961px) {
    .home-model {
        padding-block: 32vh 28.6vh;
    }

    .home-model canvas {
        padding-block: 11.72vh 10.2vh;
    }

    .home-model h2 {
        font-size: 4rem;
    }

    .home-model .bot-text span {
        padding-left: calc(var(--_i, 0) * 3rem);
    }

    .home-model .bot-text span:nth-child(2) {
        --_i: 1;
    }

    .home-model .bot-text span:nth-child(3) {
        --_i: 2;
    }

    .home-model .bot-text span:nth-child(4) {
        --_i: 3;
    }

    .home-model .bot-text span:nth-child(5) {
        --_i: 4;
    }

}

@media only screen and (min-width : 0) and (max-width : 960px) {

    .home-model {
        padding-block: 10.1rem 16rem;
    }

    .home-model h2 {
        font-size: 2.5rem;
        line-height: 1.5em;
        max-width: 35.7rem;
    }

    .home-model h2 :is(b, strong) {
        font-family: inherit;
    }

    .home-model canvas {
        padding-block: 6.5rem;
    }

    .home-model .bot-text {
        text-align: right;
        margin-left: auto;
    }
}

/* @end */

/* ANIMATIONS */
.home-model :is(aside, h2) {
    opacity: 0;
    --duration: 1s;
}

.home-model:where(.animateActive) :is(aside, h2) {
    animation: fade var(--duration) forwards;
    animation-delay: var(--delay, 0);
}

.home-model:where(.animateActive) aside {
    --delay: 0.5s;
}