/* Showreel section: cinematic background video + entrance/reveal motion */

.postbox-scroll-zoom video.postbox-scroll-zoom-img {
  display: block;
  background-color: #0d0b09;
}

/* Legibility layers, clipped with the same shape as the media */
.postbox-scroll-zoom .postbox-scroll-zoom-scrim,
.postbox-scroll-zoom .postbox-scroll-zoom-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: none;
}

.postbox-scroll-zoom .postbox-scroll-zoom-media {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(calc(50% - 50px) calc(50% - 100px) calc(50% - 50px) calc(50% - 100px) round 4px);
  will-change: clip-path;
}

.postbox-scroll-zoom .postbox-scroll-zoom-media video.postbox-scroll-zoom-img {
  clip-path: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.postbox-scroll-zoom .postbox-scroll-zoom-scrim {
  z-index: 3;
  background:
    linear-gradient(
      to bottom,
      rgba(13, 11, 9, 0.62) 0%,
      rgba(13, 11, 9, 0.18) 18%,
      rgba(13, 11, 9, 0.04) 45%,
      rgba(13, 11, 9, 0.22) 82%,
      rgba(13, 11, 9, 0.6) 100%
    ),
    radial-gradient(120% 90% at 50% 50%, rgba(13, 11, 9, 0) 42%, rgba(13, 11, 9, 0.55) 100%);
}

.postbox-scroll-zoom .postbox-scroll-zoom-vignette {
  z-index: 4;
  box-shadow: inset 0 0 220px 70px #0d0b09;
}

/* Entrance motion */
@keyframes blurFadeUp {
  from {
    opacity: 0;
    filter: blur(18px);
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.postbox-scroll-zoom .rise {
  opacity: 0;
  animation: blurFadeUp 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.postbox-scroll-zoom .rise.is-armed {
  animation-play-state: paused;
}

/* Scroll reveal */
.postbox-scroll-zoom .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.85s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.postbox-scroll-zoom .reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .postbox-scroll-zoom .rise,
  .postbox-scroll-zoom .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
    transition: none;
  }
}