/* @group doll-house
------------------------------------ */


.doll-house {
    position: relative;
    --intro-duration: 2;
    --intro-transition: 1.5;
    --intro-breather: 2;
    --intro-stagger: 1;
    --room-transition: 0.5s;
    color: var(--white);

}

:where(#wrapper) .doll-house .canvas-img {
    position: absolute;
    inset: 0;
    /* transition: 0.2s; */
    z-index: -1;
    opacity: 1;
    width: 100%;
}


:where(#wrapper) .doll-house[data-ready="true"] .bg .img-box {
    opacity: 0;
}

:where(#wrapper) .doll-house[data-ready="true"] .images-wrapper:has(.active) .img-box {
    transition: none;
    clip-path: polygon(0 var(--_start, 0px), 100% var(--_start, 0px), 100% var(--_end, 0px), 0 var(--_end, 0px));
    opacity: 1 !important;
}



#wrapper:has(.doll-house:not([data-ready="true"])) {
    overflow: hidden;
    height: 100vh;
}


:where(#wrapper) .images-wrapper,
:where(#wrapper) .images-wrapper img {
    will-change: contents;
}

:where(#wrapper) .doll-house:not([data-state])>* {
    opacity: 0;
    transition: 0;
}

:where(#wrapper) .doll-house * {
    overflow: hidden;
}

:where(#wrapper) .doll-house .rooms-content *,
:where(#wrapper) .doll-house .content-wrapper *,
:where(#wrapper) .doll-house .intro-text *,
:where(#wrapper) .doll-house :is(.rooms-content, .content-wrapper, .intro-text) {
    overflow: visible !important;
}

.doll-house .bttn-skip {
    position: fixed;
    bottom: 3rem;
    right: 3rem;
}


:where(#wrapper) .doll-house :is(.intro-text, .content-wrapper, .images-wrapper) {
    transition: calc(var(--intro-transition) * 1s);
}

:where(#wrapper) .doll-house .images-wrapper :is(.rooms-img, img) {
    pointer-events: none;
}



:where(#wrapper) .doll-house .images-wrapper {
    display: flex;
}



:where(#wrapper) .doll-house :is(.images-wrapper, .content-wrapper) {
    transition-delay: calc(var(--intro-stagger) * 1s);
}

:where(#wrapper) .doll-house :is(.images-wrapper, #important) img {
    object-fit: contain;
}

:where(#wrapper) .doll-house .images-wrapper {
    position: relative;
}



:where(#wrapper) .doll-house .bg {
    height: 100%;
    margin-bottom: -1px !important;
    position: relative;
    isolation: isolate;
}




:where(#wrapper) .doll-house .bg img {
    object-fit: cover !important;
    /* max-height: 38vw; */
    transition-delay: calc(var(--intro-stagger) * 1s);
    transition: calc(var(--intro-duration) * 1s);
    /* transition-timing-function: ease-in; */
    object-position: center bottom;
    max-height: calc(100vh - var(--heightNav));
}

@media only screen and (min-width : 961px) and (max-width: 1720px) {
    :where(#wrapper) .doll-house .bg img {
        /* max-height: 41vw; */
        /* object-position: center -8.1vw !important; */
    }
}

@media only screen and (min-width: 1721px) {
    :where(#wrapper) .doll-house .bg img {
        /* max-height: 38vw; */
        /* object-position: center -13rem !important; */
    }
}

:where(#wrapper) .doll-house[data-state="intro"] .bg img {
    /* max-height: 100vh; */
    object-position: center top !important;
}

:where(#wrapper) .doll-house[data-state="end"] .bg img {
    /* object-position: center top !important; */
    max-height: none;
}




:where(#wrapper) .doll-house .rooms-img {
    position: absolute;
    width: 100%;
}

:where(#wrapper) .doll-house .rooms-img .room-overlay {
    display: block;
    position: relative;
}



:where(#wrapper) .doll-house .rooms-content>* {
    transition: opacity var(--room-transition);
}



:where(#wrapper) .doll-house .rooms-content h4 {
    --fw: 400;
}


:where(#wrapper) .doll-house .rooms-content>*:not(.active) {
    opacity: 0;
    pointer-events: none;
}

:where(#wrapper) .doll-house .room-overlay {
    --_small: 47.8%;
    --_med: calc(var(--_small) + 13.55%)
}

/* ROOM SIZES */
:where(#wrapper) .doll-house .room-overlay#exchange {
    width: var(--_small);
    aspect-ratio: 504.37/277;
}

:where(#wrapper) .doll-house .room-overlay#fairway {
    width: var(--_med);
    aspect-ratio: 648.25/148.66;
}

:where(#wrapper) .doll-house .room-overlay#parlor {
    width: var(--_med);
    aspect-ratio: 648.25/136;
}

:where(#wrapper) .doll-house .room-overlay#frame {
    width: var(--_med);
    aspect-ratio: 648.25/279.5;
}

:where(#wrapper) .doll-house .room-overlay#scene {
    width: var(--_med);
    aspect-ratio: 648.25/286;
}

@media only screen and (min-width : 961px) {

    :where(#wrapper) .doll-house .rooms-img {
        top: 20.3%;
        left: 7.2%;
    }

    :where(#wrapper) .doll-house .rooms-content>* {
        padding-bottom: 2rem;
    }


    :where(#wrapper) .doll-house .rooms-content>*::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: var(--_w);
        height: 2.5px;
        background: var(--light-purple);
    }

    :where(#wrapper) .doll-house .rooms-content>*:not(.active) {
        position: relative;
    }


    :where(#wrapper) .doll-house .intro-text {
        position: absolute;
        top: 0;
        left: 50%;
        translate: -50% 0;
    }

    :where(#wrapper) .doll-house .room-overlay:not(:first-child) {
        margin-top: 0.8%;
    }

    :where(#wrapper) .doll-house .content-wrapper .header {
        padding-top: 6.1rem;
        transition: var(--room-transition);
    }

    :where(#wrapper) .doll-house .images-wrapper {
        height: calc(108vh - var(--heightNav));
    }

    .doll-house .intro-text .wp-block-heading {
        position: relative;
        padding-right: 5rem;
    }

    .doll-house .content-wrapper,
    .doll-house .intro-text .header {
        translate: min(6.5rem, 1.5vw);
    }

    .doll-house .content-wrapper .header :is(.wp-block-heading, #important) {
        --fs: 5.7rem;
        padding-right: 3vw;
    }


    .doll-house .rooms-content :is(h3, #important) {
        --fs: 3.1rem;
    }

    .doll-house .rooms-content :is(h4, #important) {
        --fs: 1.9rem;
    }

    .doll-house .rooms-content :is(p, #important) {
        --fs: 1.7rem;
    }

    .doll-house .intro-text :is(.wp-block-heading, #important) {
        --fs: 3.1rem;
    }

    .doll-house .rooms-content {
        padding-right: 2vw;
    }

}

@media only screen and (min-width: 1721px) {

    .doll-house .content-wrapper,
    .doll-house .intro-text .header {
        translate: min(6.5rem, 3.4vw);
    }
}

@media only screen and (min-width : 961px) and (max-width: 1720px) {

    .doll-house .rooms-content p {
        font-size: 1.8rem;
        text-wrap: balance;
    }
}

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

    .doll-house {
        padding-top: 2.8rem;
    }

    .doll-house .intro-text {
        display: none;
    }



    .doll-house .content-wrapper {
        order: -1;
    }

    .doll-house .content-wrapper .header {
        padding-inline: calc(var(--row-mobile-padding) - var(--gap-mobile));
    }

    .doll-house .rooms-content {
        position: relative;
    }

    .doll-house .rooms-img {
        top: 20.5%;
        left: 6.2%;
    }

    :is(.rooms-content, #important),
    .rooms-content>* {
        padding-block: 3.4rem;
        padding-inline: 1.7rem;
    }

    :is(.rooms-content, #important) {
        --_h: 29.6rem;
        background: var(--dark-purple);
        box-shadow: 0 -4px 9px 0 #000;
        position: fixed;
        bottom: 0;
        z-index: 1;
        isolation: isolate;
        width: 100%;
        height: var(--_h);
        bottom: calc(var(--_h) * -1.1);
        transition: 1s;
        transition: 0.5s;
    }

    .doll-house .rooms-content>* {
        position: absolute;
        opacity: 0;
        z-index: 1;
        top: 0;
    }

    :is(.rooms-content, #important).active {
        bottom: 0;
    }

    .doll-house .rooms-content .bp-group>* {
        margin-right: auto;
    }

    .doll-house .rooms-content>*.active {
        opacity: 1;
    }

    .doll-house .main-row {
        overflow-x: hidden;
    }

    :where(#wrapper) .doll-house .images-wrapper {
        width: 153.5vw;
        display: block;
        left: -3.2rem;
        max-width: none !important;
    }

    .doll-house .rooms-img .room-overlay {
        background-color: var(--light-purple);
        opacity: 1;
        transition: 0.5s;
        mix-blend-mode: multiply;
        transform: scale(1.0255);
        transform-origin: left top;
    }

    .doll-house .room-overlay:not(:first-child) {
        margin-top: 1.1%;
        translate: 0 2.8%;
    }

    .doll-house .rooms-img .room-overlay.active {
        opacity: 0;
    }

    .doll-house .room-overlay#scene {
        aspect-ratio: 648.25 / 305;
    }

    .doll-house .header .wp-block-heading{
        --fs: 3.5rem !important;
        text-wrap: balance;
        max-width: 40rem;
    }

}

/* @end */

/* INITIAL - STATE -  */
@media only screen and (min-width : 961px) {
    :where(#wrapper) .doll-house .content-wrapper {
        opacity: 0;
        /* pointer-events: none; */
    }
}

/* INTRO - STATE -  */
@media only screen and (min-width : 961px) {
    :where(#wrapper) .doll-house:is([data-state="intro"], [data-state="end"]) .content-wrapper {
        opacity: 1;
    }

    :where(#wrapper) .doll-house:is([data-state="intro"], [data-state="end"]) .intro-text {
        opacity: 0;
        pointer-events: none;
    }

    :where(#wrapper) .doll-house[data-ready="true"] .images-wrapper .room-overlay {
        background-color: var(--light-purple);
        opacity: 1;
        /* transition-delay: 0.1s; */
        transition: calc(var(--room-transition) * 0.5);
        mix-blend-mode: multiply;
    }

    :where(#wrapper) .doll-house:not([data-state='end']) .images-wrapper {
        height: 100vh !important;
    }

    :where(#wrapper) .doll-house[data-ready="true"] .rooms-img .room-overlay.active {
        transition: calc(var(--room-transition) * 0.25);
        opacity: 0;
    }
}


@media only screen and (min-width : 961px) {}

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


.editor-styles-wrapper .doll-house .rooms-content {
    padding-top: 5rem;
}