/* animations.css */

/* ===== STAR ANIMATIONS ===== */
@keyframes starTwinkle {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.4); }
}

@keyframes starDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(-100vh); }
}

/* ===== UI ANIMATIONS ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

@keyframes animalReveal {
  0%   { opacity: 0; transform: scale(0.3) rotate(-10deg); }
  60%  { opacity: 1; transform: scale(1.15) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 165, 0, 0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(240, 165, 0, 0); }
}

@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(20px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(240, 165, 0, 0.3); }
  50%       { text-shadow: 0 0 30px rgba(240, 165, 0, 0.8), 0 0 60px rgba(240, 165, 0, 0.3); }
}

/* ===== APPLIED ANIMATIONS ===== */
.animate-fade-in {
  animation: fadeIn 0.6s ease both;
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease both;
}

.animate-float {
  animation: floatUp 0.5s ease both;
}

.hero-title {
  animation: fadeInDown 0.8s ease 0.1s both;
}

.hero-subtitle {
  animation: fadeInUp 0.8s ease 0.3s both;
}

.hero-deco {
  animation: fadeIn 1s ease 0.5s both;
}

.form-card {
  animation: fadeInUp 0.8s ease 0.4s both;
}

/* Gold shimmer for logo */
.logo-main {
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}

/* Pulse on CTA button */
.btn-primary {
  animation: pulse 3s ease-in-out infinite;
}

.btn-primary:hover {
  animation: none;
}

/* Glow on hero title */
.animal-name {
  animation: glowPulse 3s ease-in-out infinite;
}

/* Staggered card animations */
.how-card:nth-child(1) { animation: fadeInUp 0.6s ease 0.1s both; }
.how-card:nth-child(2) { animation: fadeInUp 0.6s ease 0.25s both; }
.how-card:nth-child(3) { animation: fadeInUp 0.6s ease 0.4s both; }

/* Tab transition */
.tab-panel.active {
  animation: fadeIn 0.3s ease both;
}