.page-content-wrapper,
.diary-content-wrapper,
.projects-content-wrapper {
    /* Эти стили будут начальным состоянием для анимации появления */
    opacity: 0;
    transform: scale(0.95); /* Немного уменьшено */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Длительность анимации */
}

/* Класс для схлопывания контента */
.collapsing-out {
    opacity: 0;
    transform: scale(0.01); /* Схлопывается в точку */
    transition: all 0.2s ease-in; /* Плавное схлопывание */
    transform-origin: center center; /* Точка схлопывания - центр */
}

/* Класс для расширения контента (при загрузке новой страницы) */
.expanding-in {
    opacity: 0;
    transform: scale(0.01); /* Начинает как точка */
    transform-origin: center center; /* Точка расширения - центр */
}

/* Конечное состояние для расширения (применяется JS после загрузки) */
.expanding-in.active {
    opacity: 1;
    transform: scale(1);
    transition: all 0.4s ease-out; /* Плавное расширение */
}