/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 17 2026 | 16:28:57 */
#title-one,
#subtitle-two,
#first-section,
#second-section,
#third-section,
#first-caption,
#second-caption, 
#third-caption,
#latest-gallery {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  will-change: opacity, transform;
}

.is-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.is-out-down {
  opacity: 0 !important;
  transform: translateY(40px) !important;
}

.is-out-up {
  opacity: 0 !important;
  transform: translateY(-40px) !important;
}

/* IMAGE BASE */
#first-image,
#second-image,
#third-image {
  position: relative;
  overflow: hidden;
  transition:
    filter 0.4s ease 0.35s,
    opacity 0.6s ease,
    transform 0.6s ease;
}

#first-image::after,
#second-image::after,
#third-image::after {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at left center,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.08),
    transparent 60%
  );

  background-size: 200% 100%;
  background-position: 0% 50%;

  opacity: 0;
  pointer-events: none;
}

#first-image:hover::after,
#second-image:hover::after,
#third-image:hover::after {
  animation: ripple-left 0.6s ease-out forwards;
}

#first-image:hover,
#second-image:hover,
#third-image:hover {
  filter: grayscale(100%);
}

/* PARENT WRAPPER WAJIB ADA */
.image-perspective {
  perspective: 900px;
}

/* ENTER STATES */
.enter-flip-left {
  transform: rotateY(-90deg);
}

.enter-flip-down {
  transform: rotateX(90deg);
}

.enter-flip-right {
  transform: rotateY(90deg);
}

/* ACTIVE */
.flip-in {
  opacity: 1 !important;
  transform: rotateX(0) rotateY(0) !important;
}

/* EXIT (REVERSE) */
.exit-flip-right {
  opacity: 0 !important;
  transform: rotateY(90deg) !important;
}

.exit-flip-up {
  opacity: 0 !important;
  transform: rotateX(-90deg) !important;
}

.exit-flip-left {
  opacity: 0 !important;
  transform: rotateY(-90deg) !important;
}

@keyframes ripple-left {
  0% {
    opacity: 0;
    background-position: 0% 50%;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: 100% 50%;
  }
}

/* ============================
   HORIZONTAL FADE SLIDE
   ============================ */
.fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(40px);
}

.is-in-x {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.is-out-left {
  opacity: 0 !important;
  transform: translateX(-40px) !important;
}

.is-out-right {
  opacity: 0 !important;
  transform: translateX(40px) !important;
}