.jb-slider-container {
    position: relative;
    width: 100%;
    height: var(--desktop-height, 600px); 
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background-color: #111;
}

.jb-slides-wrapper { width: 100%; height: 100%; position: relative; }

.jb-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s ease;
}

.jb-slide.active { opacity: 1; visibility: visible; z-index: 1; }

/* СОЗДАЕМ АНИМАЦИЮ ОТДАЛЕНИЯ */
@keyframes jbZoomOut {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.jb-slide-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    /* По умолчанию картинка в нормальном масштабе */
    transform: scale(1); 
}

/* ЗАПУСКАЕМ АНИМАЦИЮ ПРИ ПОЯВЛЕНИИ КЛАССА ACTIVE (работает и при первой загрузке) */
.jb-slide.active .jb-slide-bg { 
    animation: jbZoomOut 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ДИНАМИЧЕСКОЕ ЗАТЕМНЕНИЕ */
.jb-slide-bg::after {
    content: ''; 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, var(--overlay-color, #0f0f0f) 0%, rgba(15,15,15,0.4) 50%, transparent 100%);
    opacity: var(--overlay-opacity, 0.6);
    display: var(--overlay-display, block);
    pointer-events: none; 
}

.jb-slide-content {
    position: absolute; top: 50%; left: 8%; transform: translateY(-50%);
    max-width: 600px; color: #ffffff; z-index: 2;
}

.jb-title, .jb-subtitle, .jb-btn {
    opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.jb-title { font-size: 48px; font-weight: 700; line-height: 1.1; margin: 0 0 15px 0; letter-spacing: -1px; }
.jb-subtitle { font-size: 18px; font-weight: 300; margin: 0 0 40px 0; color: #e0e0e0; }

.jb-btn {
    display: inline-block; background-color: #ffffff; color: #000000;
    padding: 16px 36px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 16px; transition: all 0.3s ease;
}

.jb-btn:hover { background-color: #f0f0f0; transform: scale(1.05); box-shadow: 0 5px 15px rgba(255,255,255,0.3); }

.jb-slide.active .jb-title { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.jb-slide.active .jb-subtitle { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.jb-slide.active .jb-btn { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }

.jb-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px;
    background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); border-radius: 50%;
    display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 10; color: white; transition: all 0.3s ease;
}

.jb-arrow svg { width: 24px; height: 24px; }
.jb-arrow:hover { background-color: rgba(255, 255, 255, 0.9); color: black; }
.jb-prev { left: 20px; }
.jb-next { right: 20px; }

.jb-dots {
    position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10;
}

.jb-dot {
    width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; cursor: pointer; transition: all 0.3s ease;
}

.jb-dot.active { background-color: #ffffff; transform: scale(1.3); }

/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 768px) {
    .jb-slider-container { 
        height: var(--mobile-height, 450px); 
        border-radius: 10px; 
    }
    .jb-title { font-size: 28px; }
    .jb-slide-content { left: 5%; right: 5%; text-align: center; max-width: 100%; top: 42%; }
    .jb-arrow { display: none; }
    
    .jb-slide-bg::after { 
        background: linear-gradient(0deg, var(--overlay-color, #0f0f0f) 0%, rgba(15,15,15,0.4) 60%, transparent 100%); 
    }

    .jb-subtitle {
        font-size: 14px;
        margin: 0px 0 20px 0;
    }

    .jb-btn {
        padding: 8px 16px;
        font-size: 14px;
    }
}