/* Animations and motion — layout and colors via Tailwind */

@keyframes cc-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cc-slide-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cc-animate-in {
  animation: cc-fade-in 0.45s ease-out both;
}

.cc-banner-enter {
  animation: cc-slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

.stat-card {
  animation: stat-rise 0.65s ease-out both;
}

.stat-card:nth-child(1) {
  animation-delay: 0.05s;
}
.stat-card:nth-child(2) {
  animation-delay: 0.15s;
}
.stat-card:nth-child(3) {
  animation-delay: 0.25s;
}

@keyframes hero-pan {
  0% {
    transform: scale(1.02) translate(0, 0);
  }
  50% {
    transform: scale(1.05) translate(-1%, -0.5%);
  }
  100% {
    transform: scale(1.02) translate(0, 0);
  }
}

.hero-bg-motion {
  animation: hero-pan 28s ease-in-out infinite;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast-visible {
  animation: toast-in 0.35s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .cc-animate-in,
  .cc-banner-enter,
  .stat-card,
  .hero-bg-motion,
  .toast-visible {
    animation: none !important;
  }
}