/* VehicleTypeGrid styles — ported from VehicleTypeGrid.vue's scoped <style>. */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.vehicle-type-item {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.vehicle-type-item.animate-in { opacity: 1; transform: translateY(0); }
.vehicle-type-item img { transition: transform 0.3s ease; }
.vehicle-type-item:hover img { transform: scale(1.1) rotate(2deg); }

.vehicle-label {
  color: #fff; font-weight: bold; font-size: 0.875rem; border-radius: 8px;
  padding: 6px 0; width: 80%; text-align: center; letter-spacing: 0.5px;
  margin: 0 auto; transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden;
}
.vehicle-label::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}
.vehicle-label:hover::before { left: 100%; }
.vehicle-label:hover {
  transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  animation: pulse 0.6s ease-in-out;
}
.vehicle-label:active { transform: translateY(0) scale(0.98); transition: all 0.1s ease; }

@media (max-width: 768px) {
  .vehicle-label { font-size: 0.75rem; padding: 6px 0; width: 85%; letter-spacing: 0.5px; }
  .vehicle-type-item:hover img { transform: scale(1.05) rotate(1deg); }
}