@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Появление фонового изображения/цвета */
@keyframes bg-reveal {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Базовый класс для элементов, которые должны анимироваться */
.animate {
  opacity: 0; /* Скрываем до момента появления в зоне видимости */
  will-change: transform, opacity;
}

/* Текстовые элементы (заголовки, параграфы) */
.animate-slide-up {
  animation: slide-up 0.8s ease-out forwards;
}

/* Изображения */
.animate-fade-in {
  animation: fade-in 0.8s ease-out forwards;
}

/* Плавный скролл для всей страницы */
html {
  scroll-behavior: smooth;
}

/* Блоки информации */
.animate-slide-right {
  animation: slide-right 0.8s ease-out forwards;
} 

.animate-slide-left {
  animation: slide-left 0.8s ease-out forwards;
}

/* Более быстрая анимация для project-image */
.projects-grid .project-image.animate-slide-left {
  animation-duration: 0.5s;
}

/* Появление фонового изображения/цвета */
.animate-bg-fade {
  position: relative;
  overflow: hidden;
  opacity: 1; /* Отображаем содержимое сразу, его перекрывает псевдо-элемент */
}

.animate-bg-fade::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Цвет оверлея по умолчанию наследует фон родителя.  
     При необходимости переопределите:  
     style="--reveal-bg:#27282B" или через CSS-правило. */
  background: var(--reveal-bg, inherit);
  transform-origin: left center;
  transform: translateX(0);
  animation: bg-reveal 3s ease-out forwards;
}