.animated-text-news {
    font-family: 'Merriweather', serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    opacity: 0;
    transform: translateX(60px); 
    animation: slideInText 2s ease-out forwards;
    margin-bottom: 1.5em; 
}

/* Фото під текстом (обгортка - вертикальне розташування) */
.news-images {
    display: flex;
    flex-direction: column; /* Вертикальний напрямок */
    align-items: center; 
    gap: 25px; 
    margin-top: 25px;
    position: relative;
    overflow: visible; /* Дозволяє анімованим фото виходити за межі */
}

/* Стилі для звичайних фотографій */
.zoomable-image {
    width: 90%; /* Базова ширина */
    max-width: 450px; 
    height: auto; 
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0; /* Буде анімуватися за допомогою slideInPhoto */
    transform: translateX(80px) translateZ(0); /* Для анімації виїзду та уникнення мерехтіння */
    animation: slideInPhoto 1.2s ease-out forwards;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавний перехід */
    cursor: pointer; /* Вказує, що елемент інтерактивний */
    z-index: 1; 
    transform-origin: center center; 
}

/* --- НОВІ СТИЛІ ДЛЯ ЗБІЛЬШЕННЯ ПРИ КЛІКУ --- */

/* Фон-оверлей, що з'являється при кліку */
.modal-overlay {
    position: fixed; /* Фіксоване позиціонування відносно вікна */
    top: 0;
    left: 0;
    width: 100vw; /* Займає всю ширину вікна */
    height: 100vh; /* Займає всю висоту вікна */
    background-color: rgba(0, 0, 0, 0.8); /* Напівпрозорий чорний фон */
    display: flex; /* Для центрування зображення */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Дуже високий z-index, щоб бути над усім */
    opacity: 0; /* Початкова прозорість */
    visibility: hidden; /* Приховано за замовчуванням */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Плавне поява/зникнення */
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Збільшене зображення всередині оверлею */
.zoomed-image {
    max-width: 90vw; /* Максимальна ширина 90% від ширини вікна */
    max-height: 90vh; /* Максимальна висота 90% від висоти вікна */
    object-fit: contain; /* Зберігає пропорції */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    transform: scale(0.5); /* Початковий розмір для анімації збільшення */
    opacity: 0; /* Початкова прозорість для анімації */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Плавне збільшення та поява */
    cursor: zoom-out; /* Курсор для закриття */
}

.modal-overlay.active .zoomed-image {
    transform: scale(1); /* Збільшення до 100% при активному оверлеї */
    opacity: 1;
}

/* Анімації Keyframes */
@keyframes slideInText {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInPhoto {
    from { opacity: 0; transform: translateX(80px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Затримка появи фото по черзі */
.zoomable-image:nth-of-type(1) { animation-delay: 6.3s !important; } 
.zoomable-image:nth-of-type(2) { animation-delay: 6.8s !important; }
.zoomable-image:nth-of-type(3) { animation-delay: 7.3s !important; }