/* Section Background Fade - Animations */

.sbf-section {
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.sbf-section.sbf-visible {
    opacity: 1;
}

/* Fade In Effect */
.sbf-section[data-sbf-effect="fade-in"] {
    opacity: 0;
}

.sbf-section[data-sbf-effect="fade-in"].sbf-visible {
    opacity: 1;
}

/* Fade In Up Effect */
.sbf-section[data-sbf-effect="fade-in-up"] {
    opacity: 0;
    transform: translateY(50px);
}

.sbf-section[data-sbf-effect="fade-in-up"].sbf-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In Down Effect */
.sbf-section[data-sbf-effect="fade-in-down"] {
    opacity: 0;
    transform: translateY(-50px);
}

.sbf-section[data-sbf-effect="fade-in-down"].sbf-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Zoom In Effect */
.sbf-section[data-sbf-effect="zoom-in"] {
    opacity: 0;
    transform: scale(0.95);
}

.sbf-section[data-sbf-effect="zoom-in"].sbf-visible {
    opacity: 1;
    transform: scale(1);
}

/* Background overlay fade support */
.sbf-section .elementor-background-overlay {
    transition: opacity 0.8s ease-in-out;
}

/* Smooth background image transitions */
.sbf-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ========================================
   CIRCULAR REVEAL EFFECT
   Image appears in growing circle
   ======================================== */

/* Container setup for circular reveal */
.sbf-section[data-sbf-effect="circular-reveal"] {
    position: relative;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
    /* Clip-path will be applied dynamically via JS */
}

/* Optional: Background color behind the reveal */
.sbf-section[data-sbf-effect="circular-reveal"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: -1;
}

/* Content stays above */
.sbf-section[data-sbf-effect="circular-reveal"] > .elementor-container,
.sbf-section[data-sbf-effect="circular-reveal"] > .e-con-inner,
.sbf-section[data-sbf-effect="circular-reveal"] > * {
    position: relative;
    z-index: 2;
}

/* Background overlay stays below */
.sbf-section[data-sbf-effect="circular-reveal"] .elementor-background-overlay {
    z-index: 0 !important;
}