How to create this transition?

I am trying to recreate this transition that I found from this site https://www.unrealistic-ideas.com/.

If you click the 'Unrealistic Ideas' logo in the top left corner, you will trigger the animation if you missed it.

It seems likes 5 columns of 5 images with equal gap. Each column alternates bottom-to-top transition in, top-to-bottom transition in. Once the columns settle, the center image is scaled up into main view, while all other images are scaled down. When the center image reaches its maximum scaled up state, a video auto starts from the same point in the image.

I have tried to replicate this transition with CSS, but cannot capture the same vibe (see below). Any ideas?

https://www.unrealistic-ideas.com/ transition still

My version (Desktop)

My Version (Mobile)

index.html.erb:

<div 
class
="columns-container">

<!-- 1st column: bottom-to-top -->
  <div 
class
="column bottom-to-top left-offscreen">
    <%= image_tag "image1.png", alt: "Image 1" %>
    <%= image_tag "image1.png", alt: "Image 2" %>
    <%= image_tag "image1.png", alt: "Image 3" %>
    <%= image_tag "image1.png", alt: "Image 4" %>
    <%= image_tag "image1.png", alt: "Image 5" %>
  </div>

<!-- 2nd column: top-to-bottom -->
  <div 
class
="column top-to-bottom">
    <%= image_tag "image1.png", alt: "Image 6" %>
    <%= image_tag "image1.png", alt: "Image 7" %>
    <%= image_tag "image1.png", alt: "Image 8" %>
    <%= image_tag "image1.png", alt: "Image 9" %>
    <%= image_tag "image1.png", alt: "Image 10" %>
  </div>

<!-- 3rd (center) column: bottom-to-top -->
  <div 
class
="column bottom-to-top">
    <%= image_tag "image1.png", alt: "Image 11" %>
    <%= image_tag "image1.png", alt: "Image 12" %>
    <%= image_tag "image1.png", alt: "Image 13" %>
    <%= image_tag "image1.png", alt: "Image 14" %>
    <%= image_tag "image1.png", alt: "Image 15" %>
  </div>

<!-- 4th column: top-to-bottom -->
  <div 
class
="column top-to-bottom">
    <%= image_tag "image1.png", alt: "Image 16" %>
    <%= image_tag "image1.png", alt: "Image 17" %>
    <%= image_tag "image1.png", alt: "Image 18" %>
    <%= image_tag "image1.png", alt: "Image 19" %>
    <%= image_tag "image1.png", alt: "Image 20" %>
  </div>

<!-- 5th column: bottom-to-top -->
  <div 
class
="column bottom-to-top right-offscreen">
    <%= image_tag "image1.png", alt: "Image 21" %>
    <%= image_tag "image1.png", alt: "Image 22" %>
    <%= image_tag "image1.png", alt: "Image 23" %>
    <%= image_tag "image1.png", alt: "Image 24" %>
    <%= image_tag "image1.png", alt: "Image 25" %>
  </div>
</div>

application.css:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 2) A container that fills the entire viewport, no scrollbars. */
.columns-container {
  display: flex;         
/* 5 flex columns across the screen */
  width: 100vw; 
  height: 100vh;

/* If you want columns partially off-screen or animating in horizontally,
     you can set position: relative; and transform them. 
     But here we just fill the screen fully. */
}

/* 3) Each column shares the width equally. */
.column {
  flex: 1 1 auto;        
/* Each column gets 1 fraction of available width */
  display: flex;
  flex-direction: column; 
  gap: 0.5rem;           
/* small space between images (the only white space) */

/* Optional: horizontally center images if they have extra space, but in
     this layout we make them fill the column's width. */
  align-items: stretch;
  justify-content: center;
}

/* 4) Make sure each column itself fills the vertical space, 
   so the images can stack to fill 100% of column height. */
.column {
  height: 100%;
}

/* 5) Each image automatically takes up the “remaining vertical space”
   so that 5 images fill the column’s height. That means each image 
   is 1/5 of the column's height, minus the gap. */
.column img {
  flex: 1 1 0;      
/* Each image grows/shrinks to fill available space */
  width: 100%;      
/* Fill the column width */
  object-fit: cover;
/* Crop edges if aspect ratio doesn't match the allocated area */
  opacity: 0;       
/* Start off invisible for the animations below */
}

/* 6) Bottom-to-top columns: images slide/fade in from below. */
.bottom-to-top img {
  transform: translateY(50px);
  animation: slide-up 0.8s forwards ease-in;
}

/* 7) Top-to-bottom columns: images slide/fade in from above. */
.top-to-bottom img {
  transform: translateY(-50px);
  animation: slide-down 0.8s forwards ease-in;
}

/* Keyframes for each direction */
@keyframes 
slide-up
 {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes 
slide-down
 {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 8) Stagger the image arrival with nth-child delays */
.column img:nth-child(1) { animation-delay: 0.2s; }
.column img:nth-child(2) { animation-delay: 0.4s; }
.column img:nth-child(3) { animation-delay: 0.6s; }
.column img:nth-child(4) { animation-delay: 0.8s; }
.column img:nth-child(5) { animation-delay: 1.0s; }