/* @group home-header
------------------------------------ */

.home-header {
    height: 100vh;
    position: relative;
    isolation: isolate;
}

.home-header .bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.home-header .bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 95.62%);
}

.home-header .row {
    align-items: flex-end;
}

.home-header header {
    display: flex;
    flex-direction: column;
}

.home-header header h1 {
    font-weight: 400;
}

.home-header header :is(strong, b) {
    font-weight: 700;
}

.home-header .row aside {
    padding: 0;
    clip-path: polygon(0 25%, 100% 0%, 100% 75%, 0% 100%);
}

.home-header .floating-wrapper {
    position: absolute;
    bottom: 4rem;
    right: 3rem;
}

@media only screen and (min-width : 961px) {
    .home-header .row {
        padding-bottom: 4rem;
        height: 100%;
    }

    .home-header header {
        gap: 3rem;
    }

    .home-header header :is(h1, strong, b) {
        font-size: 5.5rem;
    }

    .home-header .row aside {
        margin-bottom: 15vh;
        height: 59.5vh;
        max-width: 48.5vh;
    }

    .home-header .floating-wrapper {
        bottom: 4rem;
        right: 3rem;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .home-header {
        height: 106vh;
    }

    .home-header .row {
        padding-bottom: 8.3vh;
        justify-content: flex-end;
        position: absolute;
        bottom: 0;
    }

    .home-header header :is(h1, strong, b) {
        font-size: 3.5rem;
    }

    .home-header header {
        gap: 2rem;
    }

    .home-header .bttn-wrapper {
        display: flex;
        justify-content: space-between;
    }

    .home-header .row aside {
        margin-bottom: 4rem;
        height: 21.2vh;
        max-width: 17.3vh;
        order: -1;
        margin-right: 3rem;
    }

    .home-header .bttn-wrapper a:last-of-type {
        width: 42vw;
    }

}

/* @end */


/* ANIMATIONS */
.home-header :is(aside, h1, .bttn-wrapper) {
    opacity: 0;
    --duration: 1s;
}

.home-header:where(.animateActive) :is(aside, h1, .bttn-wrapper) {
    animation: fade var(--duration) forwards;
    animation-delay: var(--delay, 0);
}

.home-header:where(.animateActive) h1 {
    --delay: 0.5s;
}

.home-header:where(.animateActive) .bttn-wrapper {
    --delay: 1s;
}

.home-header:where(.animateActive) .row aside {
    --delay: 1.5s;
}