@charset "UTF-8";
/* Дополнительные утилиты поверх Tailwind для мелких правок */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Плавные анимации для модальных окон */
.modal-backdrop {
  transition: opacity 0.3s ease-in-out;
}

.modal-backdrop.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-backdrop.flex {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-in-out;
  transform: scale(0.9) translateY(-20px);
  opacity: 0;
}

.modal-backdrop.flex .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal-backdrop.hiding .modal-content {
  transform: scale(0.9) translateY(-20px);
  opacity: 0;
}

/* Плавная анимация переключения темы с View Transitions API */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Анимация исчезновения старой темы */
::view-transition-old(root) {
  animation-name: theme-fade-out;
}

/* Анимация появления новой темы */
::view-transition-new(root) {
  animation-name: theme-fade-in;
}

@keyframes theme-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes theme-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fallback анимация для браузеров без View Transitions API */
@media (prefers-reduced-motion: no-preference) {
  html:not(.dark) {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  }
  
  html.dark {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  }
  
  * {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
  }
}

/* Отключаем анимацию для элементов, которые не должны анимироваться при смене темы */
button, a, input, textarea, select {
  transition-property: background-color, border-color, color, opacity, transform !important;
}