:root {
  --gradient-start: #1a472a;
  --gradient-end: #2d8a6e;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f0f7f2;
  transition: background 0.4s ease;
}

body.dark-mode {
  background: #0f1923;
}

.header-gradient {
  background: linear-gradient(135deg, #1a472a 0%, #2d8a6e 60%, #34a07d 100%);
}

.dark .header-gradient {
  background: linear-gradient(135deg, #0a1628 0%, #132e3f 60%, #1a3a4a 100%);
}

@keyframes pawBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(-5deg); }
  50% { transform: translateY(-3px) rotate(0deg); }
  75% { transform: translateY(-6px) rotate(5deg); }
}

.paw-bounce {
  display: inline-block;
  animation: pawBounce 2s ease-in-out infinite;
}

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

.card-enter {
  animation: fadeSlideUp 0.5s ease-out forwards;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-enter {
  animation: modalIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes spotlightPulse {
  0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); }
  50% { box-shadow: 0 0 30px 10px rgba(251, 191, 36, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}

.spotlight {
  animation: spotlightPulse 1.5s ease-in-out 2;
}

@keyframes crossfade {
  0% { opacity: 0; transform: translateY(8px); }
  15% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

.fact-fade {
  animation: crossfade 8s ease-in-out infinite;
}

.pill-active {
  transform: scale(1.08);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(26, 71, 42, 0.15);
}

.dark .card-hover:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.category-border-mammals { border-left: 4px solid #d97706; }
.category-border-birds { border-left: 4px solid #3b82f6; }
.category-border-reptiles { border-left: 4px solid #65a30d; }
.category-border-amphibians { border-left: 4px solid #8b5cf6; }
.category-border-fish { border-left: 4px solid #06b6d4; }
.category-border-insects { border-left: 4px solid #f43f5e; }
.category-border-marine { border-left: 4px solid #0ea5e9; }
.category-border-arachnids { border-left: 4px solid #dc2626; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.search-glow:focus {
  box-shadow: 0 0 0 3px rgba(45, 138, 110, 0.3);
}

.dark .search-glow:focus {
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.3);
}

@keyframes fabPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.fab-hover:hover {
  animation: fabPulse 0.6s ease-in-out;
}

.conservation-lc { background: #16a34a; color: white; }
.conservation-nt { background: #65a30d; color: white; }
.conservation-vu { background: #eab308; color: #1a1a1a; }
.conservation-en { background: #ea580c; color: white; }
.conservation-cr { background: #dc2626; color: white; }

.img-loading {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.dark .img-loading {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}

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

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

.scroll-top-btn {
  animation: scrollTopFade 0.3s ease-out;
}