/* =========================================
   BLUEBLOT CAROUSEL STYLES
   ========================================= */

/* Container */
.bbhc-swiper { 
    width: 100%; 
    position: relative; 
    overflow: hidden; 
    height: 650px; /* Fallback */
    height: var(--h-d, 650px); 
    transition: height .3s ease; 
}

/* Slides */
.swiper-slide { 
    background-repeat: no-repeat !important; 
    background-size: cover !important; 
    background-position: center center !important; 
    height: 100%; 
    width: 100%; 
    background-image: var(--bg-d) !important; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

/* Overlay & Content */
.bbhc-overlay { 
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6)); 
    z-index: 1; 
}

.bbhc-content { 
    position: relative; z-index: 2; 
    max-width: 800px; width: 90%; padding: 40px; 
    text-align: center; color: #fff; 
    background: rgba(255,255,255,0.1); 
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); 
    border-radius: 20px; border: 1px solid rgba(255,255,255,0.2); 
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37); 
}

.bbhc-content h2 { 
    font-size: 3rem; font-weight: 700; margin-bottom: 1rem; 
    color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); line-height: 1.2;
}

.bbhc-desc { 
    font-size: 1.2rem; margin-bottom: 2rem; color: #f0f0f0; line-height: 1.6;
}


/* ... andere CSS blijft gelijk ... */

.bbhc-btn { 
    display: inline-block; padding: 12px 35px; 
    /* GEBRUIK VARIABELE VAN DE SLIDE */
    background: var(--slide-btn-color, #e4002b); 
    
    color: #fff; 
    text-decoration: none; border-radius: 50px; 
    font-weight: 600; text-transform: uppercase; 
    transition: all .3s ease; border: 2px solid transparent; 
}

.bbhc-btn:hover { 
    background: transparent; 
    border-color: #fff; 
    color: #fff; 
    transform: translateY(-3px); 
}



/* NIEUW: Video Achtergrond */
.bbhc-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zorgt dat video altijd vult */
    z-index: 0; /* Helemaal achteraan */
}

/* Zorg dat content boven video ligt */
.bbhc-overlay { z-index: 1; }
.bbhc-content { z-index: 2; }

/* NIEUW: Verberg content op mobiel */
@media(max-width: 767px){
    .bbhc-hide-mob {
        display: none !important;
    }
    
    /* Als content weg is, misschien overlay ook lichter maken? 
       Optioneel: .bbhc-hide-mob ~ .bbhc-overlay { opacity: 0.2; } */
}

/* Fix voor Vertical Slider Navigatie (pijltjes draaien) */
.bbhc-swiper[data-direction="vertical"] .swiper-button-next { transform: rotate(90deg); right: 50%; margin-right: -10px; bottom: 20px; top: auto; }
.bbhc-swiper[data-direction="vertical"] .swiper-button-prev { transform: rotate(90deg); right: 50%; margin-right: -10px; top: 20px; }
.bbhc-swiper[data-direction="vertical"] .swiper-pagination { right: 20px; top: 50%; transform: translateY(-50%); }

/* ... rest van animaties etc ... */



/* Swiper UI */
.swiper-button-next, .swiper-button-prev { color: #fff !important; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
.swiper-pagination-bullet-active { background: #fff !important; }

/* =========================================
   ANIMATIES (HIER ZAT DE FOUT!)
   ========================================= */

/* 1. De motor: Begin onzichtbaar en wacht op startsein */
[class*="anim-"] { 
    opacity: 0; 
    animation-duration: 0.8s; 
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    animation-fill-mode: forwards; /* Blijf zichtbaar na animatie */
}

/* 2. Het startsein: Als de slide actief is, speel af */
.swiper-slide-active [class*="anim-"] { 
    animation-play-state: running; 
}

/* 3. De reset: Als de slide weggaat, maak weer onzichtbaar voor volgende keer */
.swiper-slide:not(.swiper-slide-active) [class*="anim-"] { 
    opacity: 0; 
    animation: none; 
}

/* 4. DE KOPPELINGEN (Deze ontbraken!) */
.anim-fade-in-up    { animation-name: fadeInUp; }
.anim-fade-in-left  { animation-name: fadeInLeft; }
.anim-zoom-in       { animation-name: zoomIn; }
.anim-bounce        { animation-name: bounceIn; }

/* Keyframes */
@keyframes fadeInUp { from{opacity:0;transform:translate3d(0,40px,0)} to{opacity:1;transform:translate3d(0,0,0)} }
@keyframes fadeInLeft { from{opacity:0;transform:translate3d(-40px,0,0)} to{opacity:1;transform:translate3d(0,0,0)} }
@keyframes zoomIn { from{opacity:0;transform:scale(0.5)} to{opacity:1;transform:scale(1)} }
@keyframes bounceIn { 0%{opacity:0;transform:scale3d(.3,.3,.3)} 20%{transform:scale3d(1.1,1.1,1.1)} 40%{transform:scale3d(.9,.9,.9)} 60%{opacity:1;transform:scale3d(1.03,1.03,1.03)} 80%{transform:scale3d(.97,.97,.97)} to{opacity:1;transform:scale3d(1,1,1)} }

/* Responsive */
@media(max-width: 1024px){ .bbhc-swiper { height: var(--h-t, 500px); } }
@media(max-width: 767px){ 
    .bbhc-swiper { height: var(--h-m, 400px); } 
    .swiper-slide { background-image: var(--bg-m) !important; } 
    .bbhc-content h2 { font-size: 1.8rem !important; } 
    .bbhc-content { width: 95% !important; padding: 20px !important; } 
}