/* =====================================================================
   MODERN UI — BUMDes Desa Dawung
   Animasi & micro-interaction ringan. Identitas hijau dipertahankan.
   ===================================================================== */

/* ---------- page enter ---------- */
@keyframes pageFadeIn { from{opacity:0;} to{opacity:1;} }
body{ animation: pageFadeIn .35s ease both; }

html{ scroll-behavior:smooth; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; }
.reveal.in-view{ opacity:1; transform:none; }

/* ---------- product card ---------- */
.produk-item .block2{
	transition:transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
	border-radius:14px;
}
.produk-item:hover .block2{
	transform:translateY(-6px);
	box-shadow:0 16px 34px rgba(20,60,40,.14);
}
.product-image-wrap{ overflow:hidden; border-radius:12px 12px 0 0; }
.product-image-wrap img, .block2-img img{
	transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.produk-item:hover .product-image-wrap img,
.produk-item:hover .block2-img img{ transform:scale(1.06); }

.product-name{ transition:color .2s ease; }
.produk-item:hover .product-name{ color:#1e9150; }

/* quick view muncul halus */
.product-quick-view{ transition:opacity .25s ease, transform .25s ease; }

/* ---------- tombol ---------- */
.btn, .btn-cart, .qris-btn{
	transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover, .btn-cart:hover{ transform:translateY(-2px); }
.btn:active, .btn-cart:active, .btn-wishlist:active{ transform:scale(.96); }
.btn-cart{ position:relative; overflow:hidden; }
.btn-wishlist{ transition:transform .18s ease, background-color .2s ease; }
.btn-wishlist:hover{ transform:scale(1.12); }

/* ---------- navbar link underline ---------- */
.nav-link{ position:relative; }
.nav-link::after{
	content:""; position:absolute; left:12px; right:100%; bottom:4px; height:2px;
	background:#27ae60; border-radius:2px;
	transition:right .28s cubic-bezier(.22,.61,.36,1);
}
.nav-link:hover::after{ right:12px; }

/* ---------- badge keranjang pulse ---------- */
@keyframes badgePulse{
	0%{ box-shadow:0 0 0 0 rgba(220,53,69,.45); }
	70%{ box-shadow:0 0 0 8px rgba(220,53,69,0); }
	100%{ box-shadow:0 0 0 0 rgba(220,53,69,0); }
}
.jmlkeranjang, .wishlistcount{ animation:badgePulse 2.4s ease-out infinite; border-radius:999px; }

/* pop saat jumlah berubah (dipicu JS) */
@keyframes badgePop{ 0%{transform:scale(1);} 40%{transform:scale(1.45);} 100%{transform:scale(1);} }
.badge-pop{ animation:badgePop .45s cubic-bezier(.22,.61,.36,1); display:inline-block; }

/* ---------- section card ---------- */
.modern-section-card{ transition:box-shadow .3s ease; }
.modern-section-card:hover{ box-shadow:0 12px 32px rgba(20,45,80,.09); }

/* ---------- skeleton shimmer utk gambar lazy ---------- */
@keyframes shimmer{ 0%{background-position:-400px 0;} 100%{background-position:400px 0;} }

/* ---------- form checkout: label & error ---------- */
.checkout-label{
	display:block; font-size:12.5px; font-weight:700; color:#33415c;
	margin-bottom:6px; letter-spacing:.2px;
}
.checkout-label .req{ color:#d0464f; }
.field-error{
	display:none; color:#d0464f; font-size:11.5px; margin-top:5px; font-weight:600;
}
.field-error.show{ display:block; animation:errSlide .25s ease both; }
@keyframes errSlide{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;} }
.is-invalid-field{
	border-color:#e37b82 !important;
	box-shadow:0 0 0 3px rgba(224,90,98,.12) !important;
}
.checkout-field .form-control{
	transition:border-color .2s ease, box-shadow .2s ease;
}
.checkout-field .form-control:focus{
	border-color:#27ae60; box-shadow:0 0 0 3px rgba(39,174,96,.14);
}

/* ---------- input umum lebih halus ---------- */
.form-control{ transition:border-color .2s ease, box-shadow .2s ease; }

/* ---------- footer & misc ---------- */
.clip, .cursor-pointer{ transition:opacity .2s ease; }
.clip:hover{ opacity:.7; }

/* ---------- kurangi animasi bila user memintanya ---------- */
@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{ animation:none !important; transition:none !important; }
	.reveal{ opacity:1; transform:none; }
	html{ scroll-behavior:auto; }
}