/* Container that clips the image */
.img-container {
    width: 1400px;       /* Adjust as needed */
    height: 700px;      /* Adjust as needed */
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
  }
  
  /* The image to be animated */
  .img-container img {
    /* Make it large enough so you can zoom in */
    width: 1400px;      
    height: 700px;
    transform-origin: top left; 
    animation: panZoom 60s linear forwards;
  }
  
  /* Define the keyframes. 
     Adjust the translate/scale values to match your animation path. */
  @keyframes panZoom {
    /* The keyTimes in your SVG example were 0, 0.5, 0.5, 0.6, 1.0 
       which correspond to 0%, 50%, 50%, 60%, 100% here. */
  
    0% {
      /* Similar to viewBox="0 0 200 200" -> no zoom/offset yet */
      transform: translate(0, 0) scale(1);
    }
    50% {
      /* Similar to viewBox="350 80 400 400" -> 
         This would correspond to roughly a 2x zoom plus an offset. 
         You'd have to do a bit of arithmetic to match the exact movement. */
      transform: translate(-350px, -80px) scale(2);
    }
    /* You can repeat 50% again if you want no change between 50% and 50% 
       (like in your SVG, it just held the same values) */
    60% {
      /* This might match viewBox="500 100 200 200" – i.e., back to scale(1)? */
      transform: translate(-500px, -100px) scale(1);
    }
    100% {
      /* End state -> viewBox="400 50 200 200" 
         Another slight offset from the original, if desired. */
      transform: translate(-400px, -50px) scale(1);
    }
  }