/* ==========================================================================
   HOME MOTION — lapisan animasi & interaksi khusus Beranda
   --------------------------------------------------------------------------
   Hanya menambah gerak (fade/slide saat scroll, animasi masuk hero,
   hover halus, progress bar). TIDAK mengubah warna, font, ukuran, atau
   layout tema. Dimuat hanya di halaman depan (lihat functions.php).
   Aman: efek sembunyi-lalu-muncul hanya aktif jika JS jalan, browser
   mendukung IntersectionObserver, dan pengunjung tidak memilih
   "reduced motion" (class html.fx-on dipasang oleh home-motion.js).
   ========================================================================== */

/* --- 1. Hero: teks masuk bertahap (murni CSS) --------------------------- */
@keyframes fx-rise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes fx-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.hero-full__content > * {
	animation: fx-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-full__content > :nth-child(1) { animation-delay: 0.10s; }
.hero-full__content > :nth-child(2) { animation-delay: 0.25s; }
.hero-full__content > :nth-child(3) { animation-delay: 0.40s; }
.hero-full__content > :nth-child(4) { animation-delay: 0.55s; }
.hero-full__scroll { animation: fx-fade 1s ease 1.3s both; }

/* Efek parallax hero diatur JS lewat variabel ini. */
.hero-full__content { will-change: transform, opacity; }

/* --- 2. Reveal saat scroll ---------------------------------------------- */
html.fx-on .fx-reveal {
	transition:
		opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
		translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
		scale 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--fx-delay, 0s);
}
html.fx-on .fx-reveal:not(.fx-in) { opacity: 0; translate: 0 36px; }
html.fx-on .fx-reveal.fx-left:not(.fx-in)  { translate: -48px 0; }
html.fx-on .fx-reveal.fx-right:not(.fx-in) { translate: 48px 0; }
html.fx-on .fx-reveal.fx-zoom:not(.fx-in)  { translate: 0 24px; scale: 0.92; }

/* --- 3. Hover halus tambahan (tidak mengubah tampilan awal) ------------- */
@keyframes fx-wiggle {
	0%, 100% { transform: rotate(0) scale(1); }
	25%      { transform: rotate(-10deg) scale(1.18); }
	60%      { transform: rotate(8deg) scale(1.18); }
}
.why-us__item:hover .why-us__icon { animation: fx-wiggle 0.6s ease; transform-origin: 50% 60%; }

/* Kilau lewat di tombol utama saat hover */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
	content: '';
	position: absolute; top: 0; left: -80%;
	width: 50%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: skewX(-20deg);
	pointer-events: none;
}
.btn--primary:hover::after { left: 130%; transition: left 0.7s ease; }

/* Gambar produk best seller: zoom pelan saat hover */
.product-card--premium .product-card__media img { transition: transform 0.6s ease; }
.product-card--premium:hover .product-card__media img { transform: scale(1.07); }

/* Logo sertifikasi: sedikit terangkat saat hover */
.certifications__item { transition: transform 0.3s ease; }
.certifications__item:hover { transform: translateY(-4px) scale(1.05); }

/* --- 4. Progress bar scroll di paling atas ------------------------------ */
.fx-progress {
	position: fixed; top: 0; left: 0;
	width: 100%; height: 3px;
	background: linear-gradient(90deg, var(--c-primary), var(--c-gold));
	transform-origin: 0 50%;
	transform: scaleX(0);
	z-index: 9999;
	pointer-events: none;
}

/* --- 5. Reduced motion: matikan semua ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hero-full__content > *, .hero-full__scroll { animation: none; }
	.fx-progress { display: none; }
	.why-us__item:hover .why-us__icon { animation: none; }
	.btn--primary::after { display: none; }
}