.featured-reveal-showcase {
  width: 100%;
}

/* No pinned hold — each item scrolls through naturally. The effect comes
   from the clip-path opening/closing plus the oversized photo panning
   downward inside the frame. The Elementor Media Height control writes
   --fr-media-height on the item. */
.featured-reveal-item {
  --fr-media-height: 100vh;
  position: relative;
  width: 100%;
  height: var(--fr-media-height);
}

.featured-reveal-item:last-child {
  margin-bottom: 0 !important;
}

.featured-reveal-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* .asset holds the clip-path that opens up on scroll (JS drives it live;
   this is just the resting "entering from bottom" state before JS runs,
   matching the fully-skewed shape JS settles on when off-screen) */
.featured-reveal-asset {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: polygon(20.83% 18%, 79.17% 36%, 100% 100%, 0% 100%);
  will-change: clip-path;
}

/* .inner is the photo itself, 60% TALLER than the frame and shifted up so
   its bottom edge starts flush with the frame. JS pans it downward
   (yPercent 0 -> 37.5) across the item's whole scroll range, so the photo
   keeps sliding even while the frame is held fullscreen. */
.featured-reveal-inner {
  position: absolute;
  top: -60%;
  left: 0;
  width: 100%;
  height: 160%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}

.featured-reveal-inner .video-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.featured-reveal-inner .video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-reveal-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  text-align: center;
}

.featured-reveal-title span {
  font-size: calc(1.5rem + 2vw);
  color: #fff;
  font-weight: 500;
}

@media screen and (max-width: 1024px) {
  .featured-reveal-title span {
    font-size: calc(1.2rem + 2vw);
  }
}