/**
 * ==========================================================
 * STUDIO ATRIUM
 * Full-Screen Architectural Foundation
 * ==========================================================
 */


/* ==========================================================
   Design Tokens
========================================================== */

:root {
    --atrium-background: #f5f2ed;
    --atrium-wall: #fdfcf9;
    --atrium-feature-wall: #faf8f5;
    --atrium-floor: #ebe6df;
    --atrium-text: #6b6259;
}


/* ==========================================================
   Full-Screen Studio Experience
   Hide WordPress only while inside Studio.
========================================================== */

html.wp-toolbar {
    padding-top: 0 !important;
}

body.toplevel_page_studio {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--atrium-background);
}

body.toplevel_page_studio #wpadminbar,
body.toplevel_page_studio #adminmenumain,
body.toplevel_page_studio #screen-meta,
body.toplevel_page_studio #screen-meta-links,
body.toplevel_page_studio #wpfooter {
    display: none !important;
}

body.toplevel_page_studio #wpwrap,
body.toplevel_page_studio #wpcontent,
body.toplevel_page_studio #wpbody,
body.toplevel_page_studio #wpbody-content {
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.toplevel_page_studio #wpcontent {
    margin-left: 0 !important;
}

body.toplevel_page_studio #wpbody-content {
    float: none !important;
}


/* ==========================================================
   Reset
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ==========================================================
   Atrium Canvas
========================================================== */

.studio-atrium {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 5%,
            #ffffff 0%,
            var(--atrium-background) 72%
        );
}

.studio-atrium__scene {
    width: 100%;
    height: 100%;

    perspective: 1800px;
}


/* ==========================================================
   Architectural Shell
========================================================== */

.studio-atrium__shell {
    position: relative;

    width: 100%;
    height: 100%;

    margin: 0;
    overflow: hidden;

    background: var(--atrium-wall);
}


/* ==========================================================
   Ceiling Light
========================================================== */

.atrium__ceiling {
    position: absolute;
    z-index: 3;

    top: 0;
    right: 0;
    left: 0;

    height: 150px;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.98),
            rgba(255, 255, 255, 0)
        );
}


/* ==========================================================
   Back Wall
========================================================== */

.atrium__back-wall {
    position: absolute;
    z-index: 1;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-bottom: 7vh;
}


/* ==========================================================
   Studio Feature Wall
========================================================== */

.atrium__studio-wall {
    display: flex;
    align-items: center;
    justify-content: center;

    width: min(560px, 70vw);
    height: min(340px, 44vh);

    border: 1px solid rgba(80, 68, 57, 0.055);
    border-radius: 18px;

    background: var(--atrium-feature-wall);

    box-shadow:
        0 22px 65px rgba(72, 62, 52, 0.055);
}

.atrium__studio-mark {
    color: var(--atrium-text);

    font-family: inherit;
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 300;
    letter-spacing: 0.12em;
}


/* ==========================================================
   Floor
========================================================== */

.atrium__floor {
    position: absolute;
    z-index: 2;

    right: -8%;
    bottom: -180px;
    left: -8%;

    height: 330px;

    pointer-events: none;

    background: var(--atrium-floor);

    transform:
        perspective(1000px)
        rotateX(75deg);

    transform-origin: top;
}


/* ==========================================================
   Responsive Adjustment
========================================================== */

@media (max-width: 700px) {

    .atrium__studio-wall {
        width: 78vw;
        height: 36vh;
    }

    .atrium__floor {
        bottom: -210px;
    }

}