/**
 * M-Grid — motion (Section 4)
 */

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

.fade-in-up {
  animation: fadeSlideUp 0.5s ease forwards;
}

.stagger > *:nth-child(1) {
  animation-delay: 0s;
}
.stagger > *:nth-child(2) {
  animation-delay: 0.1s;
}
.stagger > *:nth-child(3) {
  animation-delay: 0.2s;
}
.stagger > *:nth-child(4) {
  animation-delay: 0.3s;
}

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

.badge-gold-shimmer {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
  background-size: 200% auto;
  animation: goldShimmer 3s linear infinite;
}

.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

@keyframes scrollBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.mgrid-scroll-hint {
  animation: scrollBounce 1.8s ease-in-out infinite;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}

.is-invalid.shake {
  animation: shake 0.45s ease;
}

@keyframes logoPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.92;
  }
}

.mgrid-logo-pulse {
  animation: logoPulse 2s ease-in-out infinite;
}