/* CSS for the index page - primarily includes the marquee effect */

/* Variables for re-use */
:root {
    --marquee-animation-duration: 25s;
    --marquee-gradient-size: 24px;
}

/* Right to left sliding animation for marquee effect */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes marquee2 {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}

.animate-marquee {
    animation: marquee var(--marquee-animation-duration) linear infinite;
}

.animate-marquee2 {
    animation: marquee2 var(--marquee-animation-duration) linear infinite;
}

/* Fade effect for left and right edges of the marquee */
/* Currently not used, but can be applied to the marquee (index.html:412) */
.marquee-fade-mask {
    mask-image: linear-gradient(
            to right,
            transparent 0px,
            black var(--marquee-gradient-size),
            black calc(100% - var(--marquee-gradient-size)),
            transparent 100%
    );
    -webkit-mask-image: -webkit-linear-gradient(
            left,
            transparent 0px,
            black var(--marquee-gradient-size),
            black calc(100% - var(--marquee-gradient-size)),
            transparent 100%
    );
}