.door_wrapper {
    display: flex;
    justify-content: center;
    margin: 0;
    align-items: center;
    min-height: 100vh;
    width: 100%;
}

#door-root {
    opacity: 0;
    transition: opacity 3s ease; /* animasi 3 detik */
}

#door-root.show-door {
    opacity: 1;
}

.door_bg {
    max-width: 300px;
    width: 100%;
    background: #000;
    height: 500px;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* --sl-hue: 210;
    --sl-sat: 60%; */
}


.door_bg:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-image: linear-gradient(
        hsl(var(--sl-hue), var(--sl-sat), 90%),
        hsl(var(--sl-hue), var(--sl-sat), 75%)
    );
    transition: all 2s ease-in-out;
    transform-origin: left bottom;
    z-index: 2;
}

.door_bg:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 100%;
    background-image: linear-gradient(
        hsl(var(--sl-hue), var(--sl-sat), 90%),
        hsl(var(--sl-hue), var(--sl-sat), 75%)
    );
    transition: all 2s ease-in-out;
    transform-origin: right bottom;
    z-index: 2;
}

.door_bg.active:before {
    transform: perspective(600px) scaleZ(0.5) rotateY(90deg);
}

.door_bg.active:after {
    transform: perspective(600px) scaleZ(0.5) rotateY(-90deg);
}

.door_bg h1 {
    text-transform: uppercase;
    text-align: center;
    font-size: 20px;
    color: #fff;
    margin: 0 auto;
    z-index: 0;
    position: relative;
}