/* Custom Pastel Theme & Micro-animations for "مشاعري - My Mood" */

:root {
  --color-pink: #FFC9D6;
  --color-lavender: #CDB4F2;
  --color-yellow: #FFE89A;
  --color-mint: #A8E6CF;
  --color-sky: #AEDFF7;
  --color-bg: #FFF9F5;
  --color-text: #4A3E4D;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Baloo Bhaijaan 2', 'Tajawal', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Floating background particles */
.deco-item {
  position: absolute;
  user-select: none;
  animation: floatGentle 7s ease-in-out infinite alternate;
}
.deco-heart { animation-duration: 6s; }
.deco-star { animation-duration: 8s; animation-delay: 1s; }
.deco-sparkle { animation-duration: 9s; animation-delay: 2s; }

@keyframes floatGentle {
  0% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }
  100% { transform: translateY(-16px) rotate(8deg); opacity: 0.9; }
}

/* Mascot Cards */
.mascot-card {
  border-radius: 26px;
  padding: 12px 6px;
  text-align: center;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(205, 180, 242, 0.15);
}

.mood-btn.selected .mascot-card {
  transform: scale(1.06);
  border-width: 3px;
  box-shadow: 0 8px 24px rgba(255, 143, 163, 0.45);
  background-color: rgba(255, 255, 255, 0.95);
}

/* Mascot subtle idle bounce */
.mascot-avatar svg {
  animation: mascotBreathe 3.5s ease-in-out infinite;
}

@keyframes mascotBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04) translateY(-2px); }
}

/* Bottom Nav active pill styling */
.nav-tab.active-nav-tab {
  color: #73273B;
  background-color: #FFC9D6;
  padding: 4px 12px;
  border-radius: 9999px;
  transition: all 0.2s ease;
}

/* Suggestion tabs */
.sug-tab.active-sug-tab {
  background-color: #FFC9D6;
  color: #73273B;
  box-shadow: 0 2px 8px rgba(255, 201, 214, 0.6);
}

/* Numpad button */
.numpad-btn {
  width: 100%;
  height: 52px;
  border-radius: 20px;
  background-color: #FFFFFF;
  border: 1.5px solid #FFC9D6;
  font-size: 1.25rem;
  font-weight: 800;
  color: #4A3E4D;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(205, 180, 242, 0.15);
  transition: all 0.12s ease;
}
.numpad-btn:active {
  transform: scale(0.92);
  background-color: #FFE89A;
  border-color: #FFE89A;
}

/* PIN Dot active state */
.pin-dot.filled {
  background-color: #FF4D6D;
  border-color: #FF4D6D;
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(255, 77, 109, 0.5);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.animate-scale-up {
  animation: scaleUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.animate-pop {
  animation: pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.animate-slide-up {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Shake animation for invalid PIN */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.shake {
  animation: shake 0.4s ease-in-out;
}

/* Color Picker Ring */
.color-btn.selected {
  outline: 3px solid #4A3E4D;
  outline-offset: 2px;
}

/* Scrollbar polish */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: #FFC9D6;
  border-radius: 9999px;
}