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

:root {
    --white: hsl(0, 0%, 100%);
    --gray-100: hsl(193, 15%, 88%);
    --gray-200: hsl(193, 11%, 82%);
    --gray-300: hsl(193, 7%, 74%);
    --gray-400: hsl(193, 6%, 65%);
    --gray-500: hsl(193, 5%, 54%);
    --gray-600: hsl(193, 6%, 41%);
    --gray-700: hsl(193, 9%, 28%);
    --gray-800: hsl(193, 16%, 14%);
    --gray-900: hsl(193, 40%, 2%);

    --primary: hsl(227, 100%, 66%);
    --accent: hsl(196, 93%, 45%);
    --accent-2: hsl(146, 70%, 58%);
}

body {
    min-block-size: 100vh;
    display: grid;
    place-content: center;
    font-family: "Google Sans", system-ui, sans-serif;
    background: var(--gray-200);
}

.frame {
    display: grid;
    position: relative;
    width: 400px;
    aspect-ratio: 1 / 1.3;
    overflow: hidden;
    border: 16px solid var(--gray-600);
    border-bottom-color: var(--gray-700);
    box-shadow: 0 1.5em 2.375em -0.26em #0006;
}

.frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 7;
    box-shadow: 0 10px 14px 8px #0005 inset;
}

.inside {
    position: absolute;
    display: grid;
    place-items: center;
    inset: 0;
    background: var(--gray-700);
    color: var(--gray-100);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
}

.inside > span {
    display: block;
    inline-size: 60%;
    max-inline-size: 60%;
    line-height: 1.15;
}

.doors {
    z-index: 5;
    display: grid;
    grid:
        "left right" 1fr
        / 1fr 1fr;
    place-content: center;
    position: relative;
}

.door {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: grid;
    transition: translate 900ms cubic-bezier(0.77, 0, 0.18, 1);
    will-change: translate;
}

.door::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gray-600)
        linear-gradient(
            to bottom,
            #0007,
            18%,
            var(--gray-400) 30% 32%,
            var(--gray-500) 42%,
            #fff2,
            60%,
            var(--gray-600) 78% 80%,
            #0003
        );
    mix-blend-mode: multiply;
    filter: url(#brushedMetalEffect) invert(7%) contrast(105%);
}

.door::before {
    content: "?";
    position: absolute;
    place-self: center;
    font-size: 12rem;
    line-height: 1;
    color: var(--white);
    z-index: 999;
    -webkit-text-stroke: 1px var(--gray-700);
}

.left-door {
    grid-area: left;
    transform-origin: left center;
    box-shadow: inset -2px 0 2.5px -1px #0007;
    border-inline-end: 1px solid var(--gray-800);
}

.left-door::before {
    inset-inline-end: -45px;
    mask-image: linear-gradient(to right, black 50%, transparent 50%);
}

.right-door {
    grid-area: right;
    transform-origin: right center;
    box-shadow: inset 2px 0 2.5px -1px #0007;
    border-inline-start: 1px solid var(--gray-800);
}

.right-door::before {
    inset-inline-start: -45px;
    mask-image: linear-gradient(to left, black 50%, transparent 50%);
}

.frame:hover .left-door {
    translate: -72% 0;
}

.frame:hover .right-door {
    translate: 72% 0;
}