/* Базові стилі для вкладок */
.tab-content:not(.active) {
    display: none !important;
}

.tab-content.active {
    animation: fadeInTab 0.4s ease-out forwards;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Активна кнопка в меню */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #14b8a6;
    transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}
.nav-link.active {
    color: white;
}

/* Анімація появи елементів під час скролу (Intersection Observer) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Плавний зум картинок при наведенні */
.img-zoom-hover {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.group:hover .img-zoom-hover {
    transform: scale(1.06);
}

/* Стилі для інтерактивного повзунка До/Після */
.ba-slider {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.ba-before-layer {
    position: absolute;
    inset: 0;
    clip-path: inset(0 50% 0 0);
    /* Додаємо плавний перехід для випадків скидання повзунка */
    transition: clip-path 0.1s ease-out;
}
.ba-slider.is-dragging .ba-before-layer {
    transition: none; /* Вимикаємо під час перетягування для миттєвої реакції */
}

/* Демонстраційний фільтр (видаліть клас .ba-raw-demo в HTML, коли додасте власні фото) */
.ba-raw-demo {
    filter: saturate(0.55) contrast(0.85) brightness(1.06) sepia(0.08);
}