/* page load reveal — stagger from below */
@keyframes reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Only animate cards when they get the .animate class (set via JS after paint) */
.stat-card.animate    { animation: reveal 0.35s cubic-bezier(0.4,0,0.2,1) both; }
.model-card.animate   { animation: reveal 0.35s cubic-bezier(0.4,0,0.2,1) both; }
.news-item.animate    { animation: reveal 0.35s cubic-bezier(0.4,0,0.2,1) both; }
.feature-card.animate { animation: reveal 0.35s cubic-bezier(0.4,0,0.2,1) both; }

.stat-card:nth-child(1) { animation-delay: 0.04s; }
.stat-card:nth-child(2) { animation-delay: 0.08s; }
.stat-card:nth-child(3) { animation-delay: 0.12s; }
.stat-card:nth-child(4) { animation-delay: 0.16s; }

/* nav underline slide */
.nav-link::after { transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }

/* dialog open */
@keyframes dialog-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.dialog-scrim.open .dialog { animation: dialog-in 0.25s cubic-bezier(0.4,0,0.2,1) both; }

/* compare bar slide up */
@keyframes bar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.compare-bar.visible { animation: bar-in 0.25s cubic-bezier(0.4,0,0.2,1) both; }

/* ripple on card click */
@keyframes ripple-out {
  from { width: 0; height: 0; opacity: 0.25; transform: translate(-50%, -50%) scale(0); }
  to   { width: 200px; height: 200px; opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.3);
  pointer-events: none;
  animation: ripple-out 0.5s cubic-bezier(0.4,0,0.2,1) both;
}