html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    overflow: hidden;
    position: relative;
}
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');
.image-container {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

.image {
    position: absolute;
    max-width: none;
    height: auto;
    object-fit: cover;
    transition: transform 1s ease-out;
}

/* Adjusted positioning and overlap */
.one   { top: 0%; left: 0%; width: 25%; z-index: 1; }
.two   { top: 0%; left: 25%; width: 5%; height: 100%; z-index: 1; }
.three { top: 0%; left: 30%; width: 22%; z-index: 4; }
.four  { top: 0%; left: 47%; width: 5%; height: 100%; z-index: 4; }
.five  { top: 0%; right: 28%; width: 22%; z-index: 5; }
.six   { top: 0%; right: 25%; width: 5%; height: 100%; z-index: 3; }
.seven { top: 0%; right: 0%; width: 25%; z-index: 1; }
.eight { top: 10%; left: 0%; width: 75%; z-index: 4; }
.nine  { bottom: 0%; right: 0%; width: 70%; height: 25%; z-index: 4; }

/* Refined Unweaving animation */
.image-container.out .one   { transform: translate(-80%, -100%); }
.image-container.out .two   { transform: translate(0%, -100%); }
.image-container.out .three { transform: translate(80%, -100%); }
.image-container.out .four  { transform: translate(-50%, -100%); }
.image-container.out .five  { transform: translate(50%, -100%); }
.image-container.out .six   { transform: translate(0%, -100%); }
.image-container.out .seven { transform: translate(-50%, -100%); }
.image-container.out .eight { transform: translate(50%, -200%); }
.image-container.out .nine  { transform: translate(0%, -400%); }



button {
    position: absolute;
    /* bottom: 20px; */
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    padding: 30px 30px;
    font-family: "DM Mono";
    color: white;
    font-size: 3.6rem;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
   background-color: rgb(92, 49, 18); 
}

.background-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('images/background.jpg') no-repeat center center/cover;
    opacity: 0;
    z-index: 0;
    transition: opacity 2s ease-in-out;
}

@media (max-width: 414px) {
    .image {
      max-width: 100%; /* full width on narrow screens */
    }
  
    button {
      width: 90%;
      font-size: 1rem;
    }
  }