.public-home-page{
  width:100%;
  background:#08090a;
}

.home-waterfall{
  --home-drop-duration:1800ms;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
  width:100%;
  height:calc(100svh - var(--header-h));
  min-height:560px;
  max-height:940px;
  overflow:hidden;
  background:#08090a;
}

.home-waterfall-column{
  position:relative;
  min-width:0;
  height:100%;
  overflow:hidden;
  background:#111316;
}

.home-waterfall-frame{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:50% 18%;
  backface-visibility:hidden;
  will-change:transform,opacity;
}

.home-waterfall-frame.is-current{
  z-index:1;
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

/* Editorial rhythm: outer columns arrive from above, the middle column rises
   from below. Each new frame begins noticeably closer and settles to its final
   crop while the previous frame remains underneath. */
.home-waterfall-frame.is-incoming{
  z-index:2;
  opacity:.46;
  transform:translate3d(0,-104%,0) scale(1.15);
  transition:
    transform var(--home-drop-duration) cubic-bezier(.16,.72,.2,1),
    opacity var(--home-drop-duration) cubic-bezier(.22,.64,.28,1);
}

.home-waterfall-column:nth-child(2) .home-waterfall-frame.is-incoming{
  transform:translate3d(0,104%,0) scale(1.15);
}

.home-waterfall-frame.is-incoming.is-dropping,
.home-waterfall-column:nth-child(2) .home-waterfall-frame.is-incoming.is-dropping{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

.home-waterfall-frame.is-initial{
  animation:home-waterfall-in-top var(--home-drop-duration) cubic-bezier(.16,.72,.2,1) both;
}

.home-waterfall-column:nth-child(2) .home-waterfall-frame.is-initial{
  animation-name:home-waterfall-in-bottom;
  animation-delay:190ms;
}

.home-waterfall-column:nth-child(3) .home-waterfall-frame.is-initial{
  animation-delay:380ms;
}

@keyframes home-waterfall-in-top{
  from{
    opacity:.46;
    transform:translate3d(0,-104%,0) scale(1.15);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

@keyframes home-waterfall-in-bottom{
  from{
    opacity:.46;
    transform:translate3d(0,104%,0) scale(1.15);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

@media(max-width:760px){
  .home-waterfall{
    height:72svh;
    min-height:480px;
    max-height:none;
    gap:3px;
  }
}

@media(prefers-reduced-motion:reduce){
  .home-waterfall-frame{
    opacity:1!important;
    transform:none!important;
  }
  .home-waterfall-frame.is-initial{
    animation:none!important;
  }
  .home-waterfall-frame.is-incoming{
    transition:none!important;
  }
}