#section-plate {
    margin-top: 0lvh;
    position: fixed;
    top: 0;
    transform: translateY(100lvh);
    z-index: 0;
    background-color: black;
    overflow: hidden;
}
#section-plate .contents-container {
    width: 1125px;
    height: 100lvh;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
#section-plate .content {
    position: absolute;
    user-select: none;
}
#section-plate .content * {
    transition: all .3s;
}
#section-plate .content.show {
    opacity: 1;
    z-index: 5;
}
#camPosContainer {
    position: absolute;
    bottom: 10px;
    left: 15px;
    z-index: 25;
    top: -100lvh;
}

#render.safari {
    filter: contrast(2);
    -webkit-filter: contrast(2);
}

#render,
#depth-render,
#plate-border,
#black-plate {
    /* filter: drop-shadow(-32px 38px 29px #000); */
    position: absolute;
    z-index: 10;
    pointer-events: none;
}

#fluid-canvas {
    position: absolute;
    transform-origin: bottom left;
    transform: translate(36.8%, -66.1%)
        perspective(999px)
        rotateX(25deg)
        rotate3d(1,0,1,8deg)
        rotateY(0deg)
        rotateZ(-48.8deg)
        skew(18deg, 33.7deg)
        scale(1.96);
    filter: contrast(1.5) brightness(1.5);
    left: 50%;
    top: 50%;
}
.fluid-container {
    position: relative;
    width: 3072px;
    height: 1818px;
    top: 52.5%;
    left: 49.3%;
    transform: translate(-50%, -50%);
    z-index: 10;

    /* -webkit-mask-image: url("../assets/images/zoom-mask.png");
    mask-image: url("../assets/images/zoom-mask.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center; */
}

#render,
#depth-render,
#black-plate,
#section-plate .zoom-container {
    transform: translate(-50%, -50%);
}

#render {
    top: 54%;
    left: 50%;
}
#depth-render,
#plate-border,
#section-plate .zoom-container,
#black-plate {
    top: 52.5%;
    left: 49.3%;
}
.zoom-container {
    opacity: 0;
    display: none;
}
#zoom-render {
    height: 100lvh;
    width: calc(100lvh * 3072 / 1818);
    transform-origin: top left;
    transform: scale(calc(1818 / var(--vh)));

    -webkit-mask-image: url("../assets/images/zoom-mask.png");
    mask-image: url("../assets/images/zoom-mask.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;

    background-position: center;
    background-size: cover;
    object-fit: cover;
}

@media screen and (min-width: calc(100lvh * 3072 / 1818)) {
    #zoom-render {
        width: 100vw;
        height: calc(100vw * 1818 / 3072);
        transform: scale(calc(3072 / var(--vw)));
    }
}

#depth-render {
    /* height: 1818px;
    width: 3072px; */
    height: 1454px;
    width: 2458px;
}

#plate-border {
    width: 4343px;
    height: 1818px;
    z-index: 11;

    /* background-image: url("../assets/images/plate-border.png");
    -webkit-background-image: url("../assets/images/plate-border.png"); */
    background-repeat: no-repeat;
    -webkit-background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    -webkit-background-position: center;
}
#plate-border.glass {
    background-image: url("../assets/images/plate-border-glass.png");
}

#plate-border.size-1 {
    transform: translate(calc(max(0px, 50vw - 1129px) - 50%), -50%);
}
#plate-border.size-2 {
    transform: translate(calc(-400px - 50%), calc(-100px - 50%));
}
#plate-border.size-3 {
    transform: translate(calc(-190px - 50%), calc(-120px - 50%)) scale(0.5);
}

#black-plate {
    width: 3072px;
    height: 1818px;
    z-index: 9;

    background-image: url("../assets/images/zoom-mask.png");
    -webkit-background-image: url("../assets/images/zoom-mask.png");
    background-repeat: no-repeat;
    -webkit-background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    -webkit-background-position: center;
}

#textureCanvas {
    opacity: 0;
    z-index: -20;
    position: absolute;
    top: -100lvh;
}
#zoomCanvas,
#deepTextureCanvas {
    top: 0;
    position: absolute;
    opacity: 0;
    z-index: -1;
    top: -100lvh;
}

#section-plate .zoom-container {
    width: 3072px;
    height: 1818px;
    top: 51.9%;
    left: 49%;

    background-size: cover;
    background-image: url("../assets/images/zoom-mask.png");
    background-repeat: no-repeat;
    -webkit-background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    -webkit-background-position: center;

    /* -webkit-filter: drop-shadow(-32px 38px 29px #000);
    -moz-filter: drop-shadow(-32px 38px 29px #000);
    -ms-filter: drop-shadow(-32px 38px 29px #000);
    -o-filter: drop-shadow(-32px 38px 29px #000);
    filter: drop-shadow(-32px 38px 29px #000); */

    position: absolute;
    z-index: 10;
}

#section-plate .button-palettes {
    display: flex;
    flex-direction: column;
    top: 50%;
    left: calc(50vw - 562px - 200px);
    transform: translateY(-50%);
    z-index: 16;
}
#section-plate .palette-button {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border-width: 0;
    overflow: hidden;
    position: relative;
    background-color: black;
    cursor: pointer;
    transition: .3s;
    margin: 10px;
}
#section-plate .palette-button:hover {
    transform: scale(.9);
}
#section-plate .palette-button:before,
#section-plate .palette-button:after {
    content: '';
    width: 20px;
    height: 40px;
    position: absolute;
    top: 0;
}
#section-plate .palette-button:before {
    left: 0;
}
#section-plate .palette-button:before {
    right: 0;
}
#section-plate .title-palette.palette-button:before {
    background-color: rgb(91, 128, 189);
}
#section-plate .title-palette.palette-button:after {
    background-color: rgb(234, 168, 114);
}
#section-plate .fire.palette-button:before {
    background-color: rgb(205, 81, 76);
}
#section-plate .fire.palette-button:after {
    background-color: rgb(233, 206, 93);
}
#section-plate .galaxy.palette-button:before {
    background-color: rgb(152, 57, 133);
}
#section-plate .galaxy.palette-button:after {
    background-color: rgb(91, 128, 189);
}
#section-plate .plant.palette-button:before {
    background-color: rgb(37, 84, 75);
}
#section-plate .plant.palette-button:after {
    background-color: rgb(195, 214, 141);
}
/* #section-plate #zoom-render.title-palette {
    filter: drop-shadow(-32px 38px 29px #000) hue-rotate(290deg);
}
#section-plate #zoom-render.fire {
    filter: drop-shadow(-32px 38px 29px #000) hue-rotate(254deg);
}
#section-plate #zoom-render.galaxy {
    filter: drop-shadow(-32px 38px 29px #000) hue-rotate(133deg);
}
#section-plate #zoom-render.plant {
    filter: drop-shadow(-32px 38px 29px #000) hue-rotate(0deg);
} */
#section-plate .title-palette {
    color: rgb(234, 168, 114) !important;
}
#section-plate .fire {
    color: rgb(205, 81, 76) !important;
}
#section-plate .galaxy {
    color: rgb(152, 57, 133) !important;
}
#section-plate .plant {
    color: rgb(195, 214, 141) !important;
}
#section-plate .title {
    top: calc(53% - 425px);
    text-align: center;
    width: 100%;
    color: white;
    align-self: flex-start;
    z-index: 7;
    line-height: 1;
    opacity: 0;
}
#section-plate .text {
    left: 100px;
    color: white;
    width: 625px;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
}
#section-plate .subtext:not(.bold) {
    margin-top: 20px;
    line-height: 1;
}

#section-plate .text-3 .subtext-1 {
    width: 110%;
}

#section-plate .text-3 .subtext-1 .colored {
    color: rgb(119, 119, 119);
}
#section-plate .title-3 {
    text-align: start;
    left: 0;
    top: 200px;
}
#section-plate .text-3 {
    bottom: unset;
    left: calc((100vw - 1125px) / 2);
    margin-top: -250px;
    opacity: 0;
    z-index: 18;
    top: 50%;
    transform: translateY(-50%);
}
#section-plate .drag-mouse-icon {
    top: 40%;
    right: 27.5vw;
    height: 70px;
    z-index: 14;
    user-select: none;
    pointer-events: none;
    /* display: none; */
}

#section-plate .drag-mouse-icon #finger,
#section-plate .drag-mouse-icon #__lottie_element_139 > g > g > g:nth-child(1) > path {
    animation: drag-3 1.5s linear infinite;
}
#section-plate .drag-mouse-icon #circle {
    animation: drag-2 1.5s linear infinite;
}
#section-plate .drag-mouse-icon #outer-circle {
    animation: drag 1.5s linear infinite;
}
#section-plate .drag-mouse-icon #hand,
#section-plate .drag-mouse-icon #__lottie_element_139 > g > g {
  animation: drag-1 1.5s linear infinite;
}

#section-plate .mask-box {
    width: 100%;
    height: calc(54lvh - 450px + 230px);
    background-color: black;
    z-index: 5;
    position: absolute;
    top: 0;
}

#section-plate .shadow-box {
    bottom: 0;
    width: 100vw;
    left: 0;
    height: 0;
    position: absolute;
    z-index: 15;
    box-shadow: 0px 0px 80px 60px #000;
}

@media screen and (max-width: 1530px) and (min-width: 1151px) {
    #section-plate .button-palettes {
        left: 15px;
    }
}

@media screen and (max-width: 1150px) {
    #render,
    #depth-render,
    #black-plate,
    #section-plate .zoom-container,
    #section-plate .fluid-container,
    #plate-border {
        transform: translate(calc(-50% - 250px + 19vw), calc(-50% - 150px)) scale(0.5);
    }

    #section-plate .zoom-container {
        top: 52.4%;
    }

    #section-plate .contents-container {
        width: 100vw;
    }

    #section-plate .text {
        left: 0;
    }
    
    #section-plate .text-1 {
        width: 176px;
        left: calc(50vw - 176px / 2);
    }
    #section-plate .text-2 {
        width: 263px;
        left: calc(50vw - 263px / 2);
    }
    #section-plate .text-3 {
        bottom: -10px;
        top: unset;
        padding: 0 20px;
    }
    #section-plate .text-3 .subtext-1 {
        margin-bottom: 10px;
    }
    
    #section-plate .button-palettes {
        flex-direction: row;
        top: unset;
        left: 0;
        transform: none;
        bottom: 0px;
        padding-bottom: 90px;
        background-color: black;
        width: 100vw;
        justify-content: center;
        appearance: none;
        box-shadow: 0px 0px 40px 70px #000;
        -webkit-appearance: none;
        -webkit-box-shadow: 0px 0px 40px 70px #000;
        box-shadow: 0px 0px 40px 70px #000;
    }

    #section-plate .shadow-box {
        display: none;
    }

    #section-plate .drag-mouse-icon {
        top: 37%;
        right: 27.5vw;
        height: 70px;
        z-index: 14;
        user-select: none;
        pointer-events: none;
        /* display: none; */
    }
}