/*Carousel*/
.carousel-header {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 10px;
    background-color: #fff;
    transition: height 0.3s ease;
}

.carousel-inner {
    display: flex;
    width: 500%;
    height: 100%;
    animation: slide-carousel 50s infinite ease-in-out;
    animation-delay: 0s;
}

.carousel-item {
    width: 20%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    background-color: var(--bg-tertiary); 
}

.carousel-1 {
    background-image: url('https://cdn.jsdelivr.net/gh/thebookmakers/reversedhorizonstudio-cdncollection/cdnfiles/images/carousel/carousel-1.png');
}

.carousel-2 {
    background-image: url('https://cdn.jsdelivr.net/gh/thebookmakers/reversedhorizonstudio-cdncollection/cdnfiles/images/carousel/carousel-2.png');
}

.carousel-3 {
    background-image: url('https://cdn.jsdelivr.net/gh/thebookmakers/reversedhorizonstudio-cdncollection/cdnfiles/images/carousel/carousel-3.png');
}

.carousel-4 {
    background-image: url('https://cdn.jsdelivr.net/gh/thebookmakers/reversedhorizonstudio-cdncollection/cdnfiles/images/carousel/carousel-4.png');
}

.carousel-5 {
    background-image: url('https://cdn.jsdelivr.net/gh/thebookmakers/reversedhorizonstudio-cdncollection/cdnfiles/images/carousel/carousel-5.png');
}

@keyframes slide-carousel {
    0% {
        transform: translateX(0%);
    }

    18% {
        transform: translateX(0%);
    }

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

    38% {
        transform: translateX(-20%);
    }

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

    58% {
        transform: translateX(-40%);
    }

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

    78% {
        transform: translateX(-60%);
    }

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

    98% {
        transform: translateX(-80%);
    }

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

.carousel-dots {
    position: absolute;
    bottom: 1rem;
    left: calc(50% + 160px); /*100% + carousel overlay width / 2*/
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

@keyframes highlight-dot-1 {
    0%, 18% {
        background-color: rgba(255, 255, 255, 1);
    }

    19%, 97.9% {
        background-color: rgba(255, 255, 255, 0.5);
    }

    98%, 100% {
        background-color: rgba(255, 255, 255, 1);
    }
}

@keyframes highlight-dot-2 {
    0%, 19%, 39%, 99% {
        background-color: rgba(255, 255, 255, 0.5);
    }

    20%, 38% {
        background-color: rgba(255, 255, 255, 1);
    }
}

@keyframes highlight-dot-3 {
    0%, 39%, 59%, 99% {
        background-color: rgba(255, 255, 255, 0.5);
    }

    40%, 58% {
        background-color: rgba(255, 255, 255, 1);
    }
}

@keyframes highlight-dot-4 {
    0%, 59%, 79%, 99% {
        background-color: rgba(255, 255, 255, 0.5);
    }

    60%, 78% {
        background-color: rgba(255, 255, 255, 1);
    }
}

@keyframes highlight-dot-5 {
    0%, 79%, 99% {
        background-color: rgba(255, 255, 255, 0.5);
    }

    80%, 98% {
        background-color: rgba(255, 255, 255, 1);
    }
}

.dot-1 {
    animation: highlight-dot-1 50s infinite ease-in-out;
}

.dot-2 {
    animation: highlight-dot-2 50s infinite ease-in-out;
}

.dot-3 {
    animation: highlight-dot-3 50s infinite ease-in-out;
}

.dot-4 {
    animation: highlight-dot-4 50s infinite ease-in-out;
}

.dot-5 {
    animation: highlight-dot-5 50s infinite ease-in-out;
}

.carousel-overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 90%; /*100% if want full height*/
    border-radius: 0 0 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    z-index: 5;
    padding: 20px;
    background-color: rgba(0,0,0,0.8);
    user-select: none;
    text-align: right;
    font-family: 'asapcondensedregular';
}

@keyframes rotateText {
    0% {
        content: ".NET WebAssembly";
    }

    20% {
        content: "Mild Existential Dread";
    }

    40% {
        content: "Caffeinated Regret";
    }

    60% {
        content: "Poor Life Choices";
    }

    80% {
        content: "Industrial-Grade Instant Noodles";
    }

    100% {
        content: ".NET WebAssembly";
    }
}

.dynamic-text::after {
    content: ".NET WebAssembly";
    animation: rotateText 9s infinite steps(1, end);
    white-space: nowrap;
    background: linear-gradient(90deg, #BE2EDD, #C44569, #A29BFE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-weight: bold;
}

@media (max-width: 900px) {
    .carousel-overlay-content {
        display: none;
    }

    .carousel-dots {
        left: 50%;
    }

    .carousel-header {
        height: 200px;
    }

    .dot {
        width: 8px;
        height: 8px;
    }
}