@keyframes sd-slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes sd-rainbow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes sd-float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-10px) rotate(120deg);
    }

    66% {
        transform: translateY(5px) rotate(240deg);
    }
}

@keyframes sd-marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes sd-zoomPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.1) rotate(2deg);
    }

    50% {
        transform: scale(1.15) rotate(-2deg);
    }

    75% {
        transform: scale(1.05) rotate(1deg);
    }
}

@keyframes sd-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-15px);
    }

    60% {
        transform: translateY(-8px);
    }
}

@keyframes sd-sparkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 0.6;
        transform: scale(1);
    }
}

@keyframes sd-wave {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes sd-textGlow {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

/* ---------------- Prefixed Animation Classes ---------------- */
.sd-animate-slideInDown {
    animation: sd-slideInDown 0.8s ease-out;
}

.sd-animate-rainbow {
    background: linear-gradient(-45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff1493, #00ffff);
    background-size: 400% 400%;
    animation: sd-rainbow 3s ease infinite;
}

.sd-animate-float {
    animation: sd-float 6s ease-in-out infinite;
}

.sd-animate-marquee {
    animation: sd-marquee 12s linear infinite;
}

.sd-animate-marquee-reverse {
    animation: sd-marquee 15s linear infinite reverse;
}

.sd-animate-zoom-pulse {
    animation: sd-zoomPulse 2s infinite;
}

.sd-animate-bounce {
    animation: sd-bounce 2s infinite;
}

.sd-animate-sparkle {
    animation: sd-sparkle 1.5s infinite;
}

.sd-animate-wave {
    animation: sd-wave 4s linear infinite;
}

.sd-animate-text-glow {
    animation: sd-textGlow 2s infinite;
}

/* ---------------- Prefixed Texture Classes ---------------- */
.sd-texture-dots {
    background-image: radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-size: 20px 20px;
}

.sd-texture-lines {
    background-image: repeating-linear-gradient( 45deg, transparent, transparent 2px, rgba(255,255,255,0.1) 2px, rgba(255,255,255,0.1) 4px );
}

.sd-texture-grid {
    background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 30px 30px;
}


/* ---------------- sd Banner end---------------- */