:root {
  --cream: #fff8f0;
}

* { font-family: 'Vazirmatn', sans-serif; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(251, 207, 232, 0.55), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(167, 243, 208, 0.5), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(254, 240, 138, 0.4), transparent 55%),
    #fffdf9;
  background-attachment: fixed;
}

.bg-cream { background-color: var(--cream); }
.text-cream { color: var(--cream); }

/* ---- Floating decorations ---- */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(3deg); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-22px) rotate(8deg); }
}
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-slow { animation: floatSlow 5s ease-in-out infinite; }
.animate-float-slower { animation: floatSlow 6.5s ease-in-out infinite; }

/* ---- Entrance ---- */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slideUp 0.7s ease-out both; }

@keyframes floatIn {
  from { opacity: 0; transform: scale(0.8) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-float-in { animation: floatIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ---- Toast ---- */
@keyframes bounceIn {
  0% { opacity: 0; transform: translate(-50%, 30px) scale(0.9); }
  60% { transform: translate(-50%, -6px) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.animate-bounce-in { animation: bounceIn 0.4s ease-out both; }

/* ---- Confetti ---- */
@keyframes fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0.2; }
}
.animate-fall { animation-name: fall; animation-timing-function: linear; animation-fill-mode: forwards; }

/* nicer scrollbar in cart */
aside::-webkit-scrollbar { width: 6px; }
aside::-webkit-scrollbar-thumb { background: #fbcfe8; border-radius: 10px; }