/* Custom keyframes for mesh background drift */
@keyframes meshDrift {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(3%, 2%) rotate(3deg); }
}

/* Custom keyframes for toast notifications */
@keyframes slideIn {
  0% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}

.animate-mesh-drift {
  animation: meshDrift 18s ease-in-out infinite alternate;
}

.animate-slide-in {
  animation: slideIn 0.2s ease forwards;
}

/* Card Fan Rotations & Colors */
.card-fan .card:nth-child(1)  { transform: rotate(-75deg); background-color: #f83a3a; }
.card-fan .card:nth-child(2)  { transform: rotate(-60deg); background-color: #f8833a; }
.card-fan .card:nth-child(3)  { transform: rotate(-45deg); background-color: #f8d33a; }
.card-fan .card:nth-child(4)  { transform: rotate(-30deg); background-color: #93f83a; }
.card-fan .card:nth-child(5)  { transform: rotate(-15deg); background-color: #3af863; }
.card-fan .card:nth-child(6)  { transform: rotate(0deg);   background-color: #3af8d3; }
.card-fan .card:nth-child(7)  { transform: rotate(15deg);  background-color: #3a93f8; }
.card-fan .card:nth-child(8)  { transform: rotate(30deg);  background-color: #633af8; }
.card-fan .card:nth-child(9)  { transform: rotate(45deg);  background-color: #c33af8; }
.card-fan .card:nth-child(10) { transform: rotate(60deg);  background-color: #f83ac3; }
.card-fan .card:nth-child(11) { transform: rotate(75deg);  background-color: #f83a63; }

.card-fan .card {
  transform-origin: bottom center;
}

/* Animations */
@keyframes fanReveal {
  0% {
    opacity: 0;
    transform: rotate(0deg) translateY(20px);
  }
  100% {
    opacity: 1;
  }
}

.animate-fan-reveal {
  animation: fanReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeUp 0.6s ease forwards;
}