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

@keyframes cc-panel-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes stat-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
  }
}

@keyframes hero-line {
  0% {
    stroke-dashoffset: 120;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.cc-animate-banner {
  animation: cc-fade-in 420ms ease-out both;
}

.cc-animate-panel {
  animation: cc-panel-in 380ms ease-out both;
}

.stat-card-highlight {
  animation: stat-glow 2.4s ease-in-out infinite;
}

.hero-accent-line {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: hero-line 1.6s ease forwards 0.2s;
}

.fade-up-observe {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.fade-up-observe.is-visible {
  opacity: 1;
  transform: translateY(0);
}