/* @group page-header
------------------------------------ */

.hero-page {
    --arrow-opacity: 0;

    width: 100vw !important;
    height: 100svh !important;

    .banner,
    .banner>.block-editor-inner-blocks>.block-editor-block-list__layout {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        isolation: isolate;
    }

    .bg {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        z-index: -1;
    }

    .full-bg {
        --overlay-opacity: 0.00000000001;
    }

    .full-bg .img-box::after {
        content: '';
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.00) 67.87%, rgba(0, 0, 0, 0.45) 100%);
        inset: 0;
        position: absolute;
        opacity: var(--overlay-opacity);
    }

    .front-content {
        z-index: 1;
        position: absolute;
        bottom: 0;
        inset-inline: 0;
        height: auto;
    }

    .move-to-next-section {
        opacity: var(--arrow-opacity);
        cursor: pointer;
    }

    .bp-icon i {
        color: var(--linen);
        font-size: 4rem;
    }

}

:where(#wrapper) .hero-page .full-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 1;

    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}



@media only screen and (min-width : 961px) {
    .hero-page {
        .full-bg {
            width: 82.4rem;
            height: 53.5rem;
        }

        .front-content {
            bottom: 3rem;
        }

        .wp-block-heading {
            font-family: var(--font-degular-variable);
        }
    }


}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .hero-page {
        .full-bg {
            width: 86.36vw;
            height: 81.59vw;
        }

        .wp-block-heading {
            letter-spacing: -.1rem;
            padding-inline: 4rem;
            --fs: 7rem;
        }

        .front-content {
            bottom: 25vh;
            bottom: 25svh;
        }
    }
}

/* @end */

/* Animations */
.hero-page {
    --transition: 1;
}

.hero-page[data-state="initial"] {
    opacity: 0;
}

body:has(.hero-page:not([data-state="done"], [data-state="scroll"], [data-state="hidden"])) {
    overflow: hidden;
}

.hero-page .full-bg .img-wrapper {
    scale: 0.2 0.00001;
    opacity: 0.001;
}