body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Frame */
.frame {
  width: 144.4px;
  height: 200px;
  border: solid 1em #782e00;
  border-bottom: none;
  perspective: 550px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 4px 15px rgba(0,0,0,0.4),
    -4px 4px 10px rgba(0,0,0,0.3),
    4px -4px 10px rgba(0,0,0,0.2);
}

/* Door styling */
.door {
  width: 144.4px;
  height: 200px;
  background: #cf7d4a;
  transition: transform 1.6s ease-out, box-shadow 1.6s ease-out;
  transform-origin: left center;
  position: relative;
  z-index: 1;
  box-shadow:
    inset 0 10px 10px -10px rgba(0,0,0,0.2),
    inset 10px 0 10px -10px rgba(0,0,0,0.2),
    inset -10px 0 10px -10px rgba(0,0,0,0.2),
    1px 7px 20px rgba(0, 0, 0, 0.5);
}

.door::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 10px;
  height: 10px;
  background: sienna;
  border-radius: 50%;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  transform: translateY(-50%);
  z-index: 2;
}

/* Door open effect on hover */
.open {
  transform: rotateY(65deg);
}

/* Image behind the door */
.behind {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}