/* ========================================= */
/* Стили для страницы проектов */
/* (Можно сохранить как projects.css и подключить только для этой страницы) */
/* ========================================= */

/* Ключевые кадры для анимации "погружения" основного контента */
@keyframes diveIn {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(50px); /* Начинаем чуть уменьшенными и снизу */
    filter: blur(5px); /* Легкое размытие в начале */
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0); /* Заканчиваем в нормальном состоянии */
    filter: blur(0); /* Без размытия в конце */
  }
}

/* Ключевые кадры для анимации "выплывания" отдельных карточек */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Применяем анимацию ко всему основному контенту страницы проектов */
/* Убедитесь, что ваш основной контент обернут в <article class="page-content"> или аналогичный тег */
body.page-projects .page-content {
  animation: diveIn 1.0s ease-out forwards; /* 1 секунда, плавное замедление, остаемся в конечном состоянии */
  opacity: 0; /* Изначально скрываем контент, чтобы он появился с анимацией */
  /* padding и прочие общие стили для .page-content должны быть в main.css или layout */
}

/* Стили для заголовка страницы проектов */
body.page-projects .page-content h2 {
  text-align: center;
  font-size: 2.5em; /* Можно настроить размер */
  margin-top: 1em;
  margin-bottom: 1.5em;
}

/* Если у вас есть отдельные карточки проектов, примените эти стили */
/* Замените '.project-card' на ваш фактический класс для карточек проектов */
.project-card {
  opacity: 0; /* Изначально скрываем каждую карточку */
  transform: translateY(20px); /* Смещаем их немного вниз */
  animation: fadeUp 0.6s ease-out forwards; /* Анимация выплывания */
  
  /* Пример базовых стилей для карточек, если их нет в основном CSS */
  background-color: #ffffff;
  border-radius: 0.8em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5em;
  margin-bottom: 2em; /* Отступ между карточками */
  text-align: left; /* Или center, в зависимости от дизайна */
}

.project-card h3 {
  font-size: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.8em;
  text-align: left; /* Или center */
}

.project-card p {
  font-size: 1em;
  line-height: 1.5;
  margin-bottom: 1em;
}

.project-card .project-link { /* Если есть ссылки внутри карточек */
  display: inline-block;
  margin-top: 1em;
  font-size: 0.9em;
  font-weight: bold;
}

/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
  body.page-projects .page-content {
    /* На мобильных можно сделать анимацию чуть менее выраженной или короче */
    animation: diveIn 0.8s ease-out forwards;
  }
  body.page-projects .page-content h2 {
    font-size: 2em;
    margin-top: 0.8em;
    margin-bottom: 1em;
  }
  .project-card {
    animation: fadeUp 0.5s ease-out forwards; /* Быстрее на мобильных */
    padding: 1em;
    margin-bottom: 1.5em;
  }
}