/* =====================================================================
   Felistar — animasi UI
   Semua animasi hanya memakai transform/opacity agar ringan di HP, dan
   otomatis dimatikan jika pengguna memilih "kurangi animasi".
   ===================================================================== */
:root { --bounce: cubic-bezier(.2, 1.4, .4, 1); --smooth: cubic-bezier(.2, .8, .2, 1); }

/* perpindahan halaman */
#app.page-enter { animation: pageIn .45s var(--smooth) backwards; }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } }

/* muncul saat di-scroll (kelas diberi oleh app.js) */
.reveal:not(.in) { opacity: 0; transform: translateY(22px) scale(.97); }
.reveal.in { animation: rise .6s var(--bounce) var(--d, 0ms) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.97); } }

/* header */
.topbar { transition: box-shadow .3s, background .3s; }
.topbar.scrolled { background: rgba(255, 250, 253, .97); box-shadow: 0 8px 28px rgba(179, 40, 108, .16); }
.brand-logo img { transition: transform .4s var(--bounce); }
.brand:hover .brand-logo img { transform: rotate(-12deg) scale(1.15); }
.cart-btn { transition: transform .2s var(--bounce); }
.cart-btn:hover { transform: translateY(-2px); }
.badge-count.bump { animation: bump .6s var(--bounce); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.7); } 60% { transform: scale(.85); } 100% { transform: scale(1); } }

/* judul stiker: huruf muncul satu per satu & bergelombang saat disentuh */
.script-title .ch { display: inline-block; animation: chIn .7s var(--bounce) calc(var(--i) * 55ms) backwards; }
.script-title:hover .ch { animation: chWave .7s ease-in-out calc(var(--i) * 45ms); }
@keyframes chIn { from { opacity: 0; transform: translateY(-40px) scale(.3) rotate(-20deg); } }
@keyframes chWave { 30% { transform: translateY(-10px) rotate(-6deg); } 60% { transform: translateY(3px) rotate(3deg); } }
.page-title.script-title { animation: titlePop .6s var(--bounce) backwards; }
@keyframes titlePop { from { opacity: 0; transform: scale(.7) rotate(-3deg); } }

/* banner beranda */
.hero-steps { --rot: -4deg; transform: rotate(var(--rot)); animation: swingIn .9s var(--bounce) .2s backwards; transition: transform .35s var(--bounce); }
.hero-steps:hover { transform: rotate(-1deg) translateY(-6px); }
@keyframes swingIn { from { opacity: 0; transform: translateX(-60px) rotate(-18deg); } }
.hero-steps .heart { animation: heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat { 0%, 60%, 100% { transform: rotate(-12deg) scale(1); } 20% { transform: rotate(-12deg) scale(1.25); } 40% { transform: rotate(-12deg) scale(1.05); } }
.hero-step { animation: fadeRight .5s var(--smooth) backwards; }
.hero-step:nth-of-type(1) { animation-delay: .7s; }
.hero-step:nth-of-type(2) { animation-delay: .85s; }
.hero-step:nth-of-type(3) { animation-delay: 1s; }
@keyframes fadeRight { from { opacity: 0; transform: translateX(-16px); } }
.hero-center .pill-label { animation: popUp .6s var(--bounce) .55s backwards; }
.hero-center p { animation: fadeUp .6s var(--smooth) .7s backwards; }
.hero-actions .btn { animation: popUp .6s var(--bounce) backwards; }
.hero-actions .btn:nth-child(1) { animation-delay: .85s; }
.hero-actions .btn:nth-child(2) { animation-delay: .95s; }
.socials .social { animation: popUp .5s var(--bounce) 1.1s backwards; }
@keyframes popUp { from { opacity: 0; transform: translateY(18px) scale(.6); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }
.hero-panel { animation: slideLeft .8s var(--smooth) .1s backwards; }
@keyframes slideLeft { from { transform: translateX(100%); } }
.hero-side { pointer-events: none; }
.hero-mascot { cursor: pointer; pointer-events: auto; animation: mascotIn 1s var(--bounce) .4s backwards, float 4s ease-in-out 1.4s infinite; }
@keyframes mascotIn { from { opacity: 0; transform: translateY(-50%) translateX(80px) rotate(25deg) scale(.4); } }
.hero-mascot.boing { animation: boing .7s var(--bounce); }
@keyframes boing {
  0% { transform: translateY(-50%) rotate(-6deg) scale(1); }
  30% { transform: translateY(-62%) rotate(6deg) scale(1.12, .9); }
  60% { transform: translateY(-48%) rotate(-8deg) scale(.95, 1.08); }
  100% { transform: translateY(-50%) rotate(-6deg) scale(1); }
}
.spark-deco { position: absolute; pointer-events: none; font-size: 1.1rem; animation: twinkle 2.4s ease-in-out infinite; z-index: 1; }
.spark-deco.s1 { top: 12%; left: 34%; color: #f7a3c8; }
.spark-deco.s2 { top: 70%; left: 30%; color: #8dbbeb; animation-delay: .8s; font-size: .9rem; }
.spark-deco.s3 { top: 18%; right: 30%; color: #ffc94d; animation-delay: 1.5s; }
.spark-deco.s4 { bottom: 10%; right: 36%; color: #f06aae; animation-delay: .4s; font-size: .8rem; }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
.bubble { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .55); pointer-events: none; animation: drift 9s ease-in-out infinite; }
.bubble.b1 { width: 70px; height: 70px; left: -20px; bottom: -20px; }
.bubble.b2 { width: 34px; height: 34px; left: 42%; top: -12px; animation-delay: 2s; animation-duration: 11s; }
.bubble.b3 { width: 22px; height: 22px; left: 60%; bottom: 14%; animation-delay: 4s; animation-duration: 7s; background: rgba(247, 163, 200, .45); }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(14px, -18px); } 66% { transform: translate(-10px, 10px); } }
.fly-heart { position: fixed; pointer-events: none; z-index: 300; font-size: 1.4rem; }

/* tombol: kilau, tekan, riak */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--smooth);
}
.btn:hover::before { transform: translateX(120%); }
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: scale(.95); }
.btn-shine::before { animation: shine 3.2s ease-in-out 2s infinite; }
@keyframes shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
.chip { position: relative; overflow: hidden; transition: background .25s, color .25s, box-shadow .25s, transform .2s var(--bounce); }
.chip:hover { transform: translateY(-2px); }
.chip.active { animation: pop .35s var(--bounce); }
@keyframes pop { 50% { transform: scale(1.1); } }

/* kartu produk */
.product-card:hover .logo-badge { animation: wiggle .6s ease-in-out; }
@keyframes wiggle { 20% { transform: rotate(-10deg) scale(1.08); } 40% { transform: rotate(8deg) scale(1.08); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
.product-card .see-btn { transition: transform .25s var(--bounce), background .25s; }
.product-card:hover .see-btn { transform: translateX(4px); }
.tag-popular { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px) rotate(-3deg); } }
.cat-head .cat-icon { transition: transform .4s var(--bounce); }
.cat-head:hover .cat-icon { transform: rotate(-12deg) scale(1.15); }
.search input { transition: box-shadow .3s, transform .3s var(--bounce); }
.search input:focus { transform: scale(1.01); box-shadow: 0 0 0 2px var(--blue-300), 0 0 0 7px var(--blue-50); }

/* detail produk */
.plan { transition: border-color .2s, background .2s, transform .2s var(--bounce), box-shadow .2s; }
.plan:hover { transform: translateX(3px); }
.plan.selected { animation: pop .35s var(--bounce); }
.plan .radio { transition: border-width .25s var(--bounce); }
.qty button { transition: background .2s, transform .15s; }
.qty button:active { transform: scale(.85); }
.total-box b { display: inline-block; }
.total-box b.tick { animation: pop .35s var(--bounce); }
.agree input { transition: transform .2s var(--bounce); }
.agree input:checked { transform: scale(1.15); }
.features li { transition: transform .25s var(--bounce); }
.features li:hover { transform: translateX(4px); }

/* langkah pembelian */
.flow-step { transition: background .3s, color .3s; }
.flow-step.current .n { position: relative; }
.flow-step.current .n::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #fff; animation: ring 1.6s ease-out infinite; }
@keyframes ring { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* halaman pembayaran & pesanan */
.qr-frame { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue-200), 0 0 26px 6px rgba(240, 106, 174, .35); } }
.amount-big { display: inline-block; transition: transform .2s var(--bounce); }
.amount-big:hover { transform: scale(1.06); }
.status.pending::before, .status.processing::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: blinkDot 1.2s ease-in-out infinite; }
@keyframes blinkDot { 50% { opacity: .25; } }
.access-box { animation: popUp .55s var(--bounce) backwards; }
.confetti { position: fixed; top: 55vh; width: 9px; height: 14px; border-radius: 3px; z-index: 300; pointer-events: none; }

/* toast, tombol WA, loading, lain-lain */
.toast { transition: opacity .3s, transform .45s var(--bounce); }
.toast.show { transform: translateX(-50%) translateY(0) scale(1); }
.toast:not(.show) { transform: translateX(-50%) translateY(30px) scale(.8); }
.floating-wa::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid #1c8a4a; animation: ring 2s ease-out infinite; }
.floating-wa { transition: transform .3s var(--bounce); }
.floating-wa:hover { transform: scale(1.12) rotate(-8deg); }
.loading::before { content: ""; display: block; width: 72px; height: 72px; margin: 0 auto 12px; background: url(/img/mascot.svg?v=3) center / contain no-repeat; animation: hop .55s ease-in-out infinite alternate; }
@keyframes hop { from { transform: translateY(0) scale(1, .95); } to { transform: translateY(-16px) scale(.97, 1.03); } }
details.faq[open] p { animation: fadeUp .35s var(--smooth); }
.vote-btn { transition: transform .2s var(--bounce); }
.vote-btn:hover:not(:disabled) { transform: translateY(-3px); }
.contact-card .ic { transition: transform .4s var(--bounce); }
.contact-card:hover .ic { transform: rotate(-12deg) scale(1.15); }

/* panel admin */
.admin-main.page-enter { animation: pageIn .35s var(--smooth) backwards; }
.admin-main.page-enter .stat, .admin-main.page-enter .order-card { animation: rise .5s var(--bounce) backwards; }
.admin-main.page-enter .stat:nth-child(2), .admin-main.page-enter .order-card:nth-child(2) { animation-delay: 50ms; }
.admin-main.page-enter .stat:nth-child(3), .admin-main.page-enter .order-card:nth-child(3) { animation-delay: 100ms; }
.admin-main.page-enter .stat:nth-child(4), .admin-main.page-enter .order-card:nth-child(4) { animation-delay: 150ms; }
.admin-main.page-enter .stat:nth-child(5), .admin-main.page-enter .order-card:nth-child(5) { animation-delay: 200ms; }
.admin-main.page-enter .stat:nth-child(6), .admin-main.page-enter .order-card:nth-child(6) { animation-delay: 250ms; }
#tabs button { transition: background .2s, color .2s, transform .2s var(--bounce); }
#tabs button:hover { transform: translateX(4px); }
.modal:not(.hidden) .modal-card { animation: popUp .4s var(--bounce); }

@media (max-width: 900px) { .hero-steps { --rot: 0deg; } }

/* hormati pengaturan "kurangi animasi" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal:not(.in) { opacity: 1; transform: none; }
}