/* Micro-interaction enhancements */
/* Button hover effects */
.btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 255, 136, 0.3);
}

.btn-ghost:hover {
  background: rgba(0, 255, 136, 0.05);
}

/* Card hover effects */
.bento-item {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* Navigation pill effects */
.scene-pill {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Focus states for accessibility */
.btn:focus, 
.control-btn:focus,
.scene-pill:focus {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}