/* Small hand-written rules that don't come from Tailwind utility classes -
   mainly the active/inactive states for the vanilla-JS-driven tabs
   (these replace the conditional classNames React used to compute). */

.info-tab-btn {
  border-bottom-color: transparent;
  color: #6b7280;
}
.info-tab-btn.is-active {
  border-bottom-color: #d4af37;
  color: #0a4d3c;
  transform: scale(1.05);
}

.era-tab-btn {
  background: #fff;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}
.era-tab-btn.is-active {
  background: #0a4d3c;
  color: #d4af37;
  border-color: transparent;
  box-shadow: 0 10px 15px -3px rgba(10, 77, 60, 0.1);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.fade-in-up {
  animation: fadeInUp 1s ease both;
}