/* Animation Styles */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Apply animations */
.pulse {
  animation: pulse 2s infinite;
}

.menu-item {
  animation: slideUp 0.5s ease forwards;
  opacity: 0;
  animation-delay: calc(var(--i, 0) * 0.1s);
}

.menu-item:nth-child(1) { --i: 1; }
.menu-item:nth-child(2) { --i: 2; }
.menu-item:nth-child(3) { --i: 3; }
.menu-item:nth-child(4) { --i: 4; }
.menu-item:nth-child(5) { --i: 5; }
.menu-item:nth-child(6) { --i: 6; }
.menu-item:nth-child(7) { --i: 7; }
.menu-item:nth-child(8) { --i: 8; }

/* Hover effects */
.menu-item h4,
.menu-item .description,
.menu-item .options {
  transition: transform var(--transition-normal);
}

.menu-item:hover h4 {
  transform: translateY(-2px);
  color: var(--color-primary-light);
}

/* For the header - smooth scroll appearance */
@media (min-width: 768px) {
  .header {
    transition: background-color var(--transition-normal),
                box-shadow var(--transition-normal);
  }
  
  .header.scrolled {
    background-color: rgba(10, 10, 10, 0.98);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}