/* ============================================================
   BLOB MASK — Pure CSS Slideshow (no JS, no plugin required)
   - Stacks 4 slides on top of each other
   - Crossfades through them on an 8s loop (2s per slide)
   - Wraps the whole thing in a quirky blob shape
   ============================================================ */

.wp-block-jetpack-slideshow.blob-mask {
  display: block;
  width: 100%;
  max-width: 850px;
  margin: 2rem auto;
  aspect-ratio: 850 / 567;       /* landscape framing */
  position: relative;
  overflow: hidden;
  border-radius: 30% 40% 25% 35% / 35% 25% 40% 30%;
  transition: border-radius 0.8s ease;
}

.wp-block-jetpack-slideshow.blob-mask:hover {
  border-radius: 35% 25% 40% 30% / 30% 40% 25% 35%;
}

.wp-block-jetpack-slideshow.blob-mask .wp-block-jetpack-slideshow_container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

/* Reset the <ul> wrapper — kill default list padding, bullets */
.wp-block-jetpack-slideshow.blob-mask .wp-block-jetpack-slideshow_swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Stack all slides on top of each other, fade them in/out */
.wp-block-jetpack-slideshow.blob-mask .wp-block-jetpack-slideshow_slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  list-style: none;
  animation: blobMaskFade 8s ease-in-out infinite;
}

/* Each slide starts 2 seconds after the previous one */
.wp-block-jetpack-slideshow.blob-mask .wp-block-jetpack-slideshow_slide:nth-child(1) { animation-delay: 0s; }
.wp-block-jetpack-slideshow.blob-mask .wp-block-jetpack-slideshow_slide:nth-child(2) { animation-delay: 2s; }
.wp-block-jetpack-slideshow.blob-mask .wp-block-jetpack-slideshow_slide:nth-child(3) { animation-delay: 4s; }
.wp-block-jetpack-slideshow.blob-mask .wp-block-jetpack-slideshow_slide:nth-child(4) { animation-delay: 6s; }

@keyframes blobMaskFade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }   /* fade in over the first 5% (0.4s)   */
  25%  { opacity: 1; }   /* stay visible until 25% (2s)        */
  30%  { opacity: 0; }   /* fade out by 30% (2.4s)             */
  100% { opacity: 0; }   /* stay hidden the rest of the cycle  */
}

.wp-block-jetpack-slideshow.blob-mask .wp-block-jetpack-slideshow_slide figure {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wp-block-jetpack-slideshow.blob-mask .wp-block-jetpack-slideshow_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hide the nav arrows, pause button, and pagination dots —
   they need JS to function and we don't have any. */
.wp-block-jetpack-slideshow.blob-mask .swiper-button-prev,
.wp-block-jetpack-slideshow.blob-mask .swiper-button-next,
.wp-block-jetpack-slideshow.blob-mask .wp-block-jetpack-slideshow_button-pause,
.wp-block-jetpack-slideshow.blob-mask .wp-block-jetpack-slideshow_pagination {
  display: none;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1024px) {
  .wp-block-jetpack-slideshow.blob-mask {
    max-width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 28% 35% 22% 30% / 30% 22% 35% 28%;
  }
  .wp-block-jetpack-slideshow.blob-mask:hover {
    border-radius: 30% 22% 35% 28% / 28% 35% 22% 30%;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {
  .wp-block-jetpack-slideshow.blob-mask {
    aspect-ratio: 1 / 1;
    margin: 1.5rem auto;
    border-radius: 25% 30% 20% 28% / 28% 20% 30% 25%;
  }
  .wp-block-jetpack-slideshow.blob-mask:hover {
    border-radius: 28% 20% 30% 25% / 25% 30% 20% 28%;
  }
}