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

.animate-slideIn {
  animation: slideIn 0.3s ease-out;
}

.topo-bg {
  background-color: #FDF8F3;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q25 10 50 20 T100 20' stroke='%232D501610' fill='none'/%3E%3Cpath d='M0 40 Q30 30 60 40 T100 40' stroke='%232D501608' fill='none'/%3E%3Cpath d='M0 60 Q20 50 40 60 T100 60' stroke='%232D501610' fill='none'/%3E%3Cpath d='M0 80 Q35 70 70 80 T100 80' stroke='%232D501608' fill='none'/%3E%3C/svg%3E");
}

.mountain-silhouette {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpolygon points='0,200 150,80 300,150 450,50 600,120 750,30 900,100 1050,60 1200,140 1200,200' fill='%23FDF8F3'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: auto 100%;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #FDF8F3;
}

::-webkit-scrollbar-thumb {
  background: #C4704D;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2D5016;
}

/* Card view page animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-view-enter {
  animation: fadeInUp 0.4s ease-out;
}

/* Smooth transitions for all interactive elements */
button, input, select, textarea {
  transition: all 0.2s ease;
}

/* Focus visible for accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #2D5016;
  outline-offset: 2px;
}