@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 8px rgba(26,189,140,0.4); }
  50% { box-shadow: 0 0 22px rgba(26,189,140,0.7); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.anim-fadein { animation: fadeIn 0.6s ease forwards; }
.anim-fadeup { animation: fadeInUp 0.7s ease forwards; }
.anim-slide { animation: slideInLeft 0.6s ease forwards; }
.anim-glow { animation: glow 2.5s ease infinite; }
.anim-float { animation: float 3.5s ease-in-out infinite; }
.btn--primary { animation: glow 2.8s ease infinite; }
.hero-visual img { animation: float 4s ease-in-out infinite; }
.hero-badge { animation: fadeIn 0.5s ease 0.1s both; }
.hero-title { animation: fadeInUp 0.6s ease 0.18s both; }
.hero-desc { animation: fadeInUp 0.6s ease 0.28s both; }
.hero-promo { animation: fadeInUp 0.6s ease 0.36s both; }
.hero-actions { animation: fadeInUp 0.6s ease 0.44s both; }

.transition-gradient {
  background: linear-gradient(180deg, var(--clr-bg) 0%, rgba(52,58,108,0.15) 50%, var(--clr-bg) 100%);
  height: 60px;
  margin: -1px 0;
}

.skeleton {
  background: linear-gradient(90deg, rgba(52,58,108,0.3) 25%, rgba(52,58,108,0.5) 50%, rgba(52,58,108,0.3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}