/* ============================================================
   CSS HELPER FOR KAYON MBIKAK (Pure CSS / GSAP Clip-Path & Mask)
   ============================================================ */

/* Option A: Using Gunungan Kiri & Gunungan Kanan Assets */
.kayon-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

.kayon-gate {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform, opacity;
}

.kayon-left {
  left: 0;
  background-image: url('../generated_assets/gunungan_kiri.png');
  background-position: right center;
  transform-origin: left bottom;
}

.kayon-right {
  right: 0;
  background-image: url('../generated_assets/gunungan_kanan.png');
  background-position: left center;
  transform-origin: right bottom;
}

/* Option B: Using Single Image with CSS clip-path */
.kayon-clip-left {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('../generated_assets/gunungan_wayang_kulit.png');
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 50.1% 0, 50.1% 100%, 0 100%);
  transform-origin: left bottom;
}

.kayon-clip-right {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('../generated_assets/gunungan_wayang_kulit.png');
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  clip-path: polygon(49.9% 0, 100% 0, 100% 100%, 49.9% 100%);
  transform-origin: right bottom;
}