/* ==========================================================================
   Scroll-trigger animation system
   Elemen dengan [data-animate] dimulai tersembunyi (state "siap"), lalu
   class .is-visible ditambahkan oleh scroll-animations.js via
   IntersectionObserver saat elemen masuk viewport.
   ========================================================================== */

[data-animate] {
	transition-property: opacity, transform, clip-path;
	transition-timing-function: cubic-bezier(.22,1,.36,1);
	transition-duration: 700ms;
	transition-delay: var(--jwl-delay, 0ms);
}

/* Fade Up */
[data-animate="fade-up"] { opacity: 0; transform: translateY(36px); }
[data-animate="fade-up"].is-visible { opacity: 1; transform: translateY(0); }

/* Fade In */
[data-animate="fade-in"] { opacity: 0; }
[data-animate="fade-in"].is-visible { opacity: 1; }

/* Zoom In */
[data-animate="zoom-in"] { opacity: 0; transform: scale(.92); }
[data-animate="zoom-in"].is-visible { opacity: 1; transform: scale(1); }

/* Slide Left (masuk dari kanan) */
[data-animate="slide-left"] { opacity: 0; transform: translateX(60px); }
[data-animate="slide-left"].is-visible { opacity: 1; transform: translateX(0); }

/* Slide Right (masuk dari kiri) */
[data-animate="slide-right"] { opacity: 0; transform: translateX(-60px); }
[data-animate="slide-right"].is-visible { opacity: 1; transform: translateX(0); }

/* Drift Up (dekoratif, lebih lambat & halus) */
[data-animate="drift-up"] { opacity: 0; transform: translateY(50px); transition-duration: 1100ms; }
[data-animate="drift-up"].is-visible { opacity: 1; transform: translateY(0); }

/* Pop */
[data-animate="pop"] { opacity: 0; transform: scale(.7); }
[data-animate="pop"].is-visible {
	opacity: 1; transform: scale(1);
	transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}

/* Morph Reveal — clip-path organik yang "membuka" dari bentuk blob ke persegi */
[data-animate="morph-reveal"] {
	opacity: 0;
	clip-path: polygon(50% 30%, 80% 50%, 50% 70%, 20% 50%);
	transform: scale(.9);
	transition-duration: 900ms;
}
[data-animate="morph-reveal"].is-visible {
	opacity: 1;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	transform: scale(1);
}

/* Morph In — untuk media/gambar kecil, blob halus */
[data-animate="morph-in"] {
	opacity: 0;
	border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
	transform: scale(.85);
}
[data-animate="morph-in"].is-visible {
	opacity: 1;
	border-radius: var(--jwl-radius);
	transform: scale(1);
}

/* Section wrapper: opsional beri sedikit gerak pada seluruh section saat masuk viewport,
   sementara children (data-animate lain di dalamnya) beranimasi dengan delay masing2 */
.jwl-section[data-animate] { transition-duration: var(--jwl-duration, 700ms); }

/* Hormati preferensi pengguna yang menonaktifkan animasi */
@media (prefers-reduced-motion: reduce) {
	[data-animate] {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
}