/* Slideshow — pinned cue crossfade + keyhole reveal (GSAP, js/motion/slideshow.js).
   Default = layout enhanced (slide bertumpuk); html.no-motion = scroll normal statis. */

.slideshow-stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background-color: var(--color-black);
}

.slideshow-slides {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.slide:first-child {
  opacity: 1;
}

.slide-bg {
  position: absolute;
  inset: 0;
}

.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(48 48 48 / 0.6);
}

.slide-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
  width: min(59.375rem, 100% - 2 * var(--space-gutter));
  text-align: center;
  color: var(--color-amber);
}

.slide-sub {
  max-width: 44rem;
}

/* Keyhole: layar warna halaman dengan jendela polygon, dibuka/ditutup via clip-path */
.slideshow-keyhole {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--color-white);
  pointer-events: none;
  clip-path: polygon(
    0% 0%, 0% 100%, 20% 100%, 20% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 100%, 100% 100%, 100% 0%
  );
}

/* Fallback reduced-motion / tanpa enhance */
.no-motion .slideshow-stage {
  height: auto;
  overflow: visible;
}

.no-motion .slideshow-slides {
  position: static;
}

.no-motion .slide {
  position: relative;
  inset: auto;
  height: 100svh;
  opacity: 1;
}

.no-motion .slideshow-keyhole {
  display: none;
}