/* Дополнительные стили для виртуальной лаборатории */

/* Анимации для интерактивных элементов */
.experiment-btn {
  transition: all 0.3s ease;
}

.experiment-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.experiment-btn.active {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

/* Стили для шагов экспериментов */
.cutting-step, .layering-step, .grafting-step, .tissue-step {
  transition: all 0.3s ease;
  position: relative;
}

.cutting-step:hover:not(:disabled),
.layering-step:hover:not(:disabled),
.grafting-step:hover:not(:disabled),
.tissue-step:hover:not(:disabled) {
  transform: translateX(5px);
}

.cutting-step:disabled,
.layering-step:disabled,
.grafting-step:disabled,
.tissue-step:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Анимация появления результатов */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#cutting-results, #layering-results, #grafting-results, #tissue-results {
  animation: fadeInUp 0.5s ease-out;
}

/* Стили для визуализации экспериментов */
#cutting-visualization, #layering-visualization, #grafting-visualization, #tissue-visualization {
  transition: all 0.3s ease;
}

/* Пульсация для активных элементов */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Стили для модального окна */
#theory-modal {
  backdrop-filter: blur(4px);
}

/* Кастомные стили для радиокнопок */
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: #3b82f6;
}

/* Стили для протокола */
#work-process, #conclusions {
  font-family: 'Courier New', monospace;
  line-height: 1.5;
}

/* Адаптивные стили */
@media (max-width: 768px) {
  .experiment-btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
  
  .grid {
    gap: 1rem;
  }
}

/* Стили для печати */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    background: white !important;
  }
  
  .shadow-lg, .shadow-xl {
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .bg-gradient-to-br {
    background: white !important;
  }
}

/* Улучшения доступности */
button:focus, 
input:focus, 
textarea:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Индикатор загрузки */
.loading {
  position: relative;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Стили для успешного завершения */
.success-indicator {
  position: relative;
}

.success-indicator::before {
  content: '✓';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #10b981;
  font-weight: bold;
}