/* Keyframe Animations & Micro-interactions with Neumorphism */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Skeleton Loading Animation */
.skeleton {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
  border-radius: 0.75rem;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.04);
}

@keyframes skeletonLoading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 0.9rem;
  margin-bottom: 0.5rem;
}

.skeleton-img {
  height: 220px;
  width: 100%;
}

/* Modal Glass & Neumorphic Effect */
.modal-content-glass {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(200, 162, 74, 0.25);
  border-radius: 1.5rem;
  box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.12), -8px -8px 25px rgba(255, 255, 255, 0.95);
}

/* Success Checkmark Animation */
.success-checkmark {
  width: 75px;
  height: 75px;
  margin: 0 auto;
  border-radius: 50%;
  background: #DCFCE7;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  box-shadow: 4px 4px 12px rgba(22, 163, 74, 0.2), -4px -4px 10px rgba(255, 255, 255, 0.9);
  animation: popSuccess 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popSuccess {
  0% { transform: scale(0); }
  80% { transform: scale(1.12); }
  100% { transform: scale(1); }
}