/* Animated Divider Styles */
.svs-animated-divider {
    display: block;
    margin: 20px auto;
    opacity: 0;
    animation-fill-mode: both;
    position: relative;
    background-size: 200% 200%;
    transition: all 0.3s ease;
}

/* Base animation properties */
.svs-animated-divider.fade-in {
    animation-name: fadeIn;
}

.svs-animated-divider.slide-in {
    animation-name: slideIn;
}

.svs-animated-divider.pulse {
    animation-name: pulse;
}

/* Fade In Animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        background-position: 100% 50%;
    }
}

/* Slide In Animation */
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-100%);
        background-position: 0% 50%;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        background-position: 100% 50%;
    }
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0.5);
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
    }
    50% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(255, 107, 107, 0);
        background-position: 100% 50%;
    }
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
        background-position: 0% 50%;
    }
}

/* Animation delays for different templates */
.svs-animated-divider.fade-in {
    animation-timing-function: ease-in-out;
}

.svs-animated-divider.slide-in {
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.svs-animated-divider.pulse {
    animation-timing-function: ease-in-out;
}

/* Linear gradient specific styles */
.svs-animated-divider.linear {
    background-size: 200% 100%;
}

/* Radial gradient specific styles */
.svs-animated-divider.radial {
    background-size: 200% 200%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .svs-animated-divider {
        margin: 15px auto;
    }
}

@media (max-width: 480px) {
    .svs-animated-divider {
        margin: 10px auto;
    }
}