/* Autoplay for 8 slides + 1 clone Hold ≈10% per slide, transition ≈2.5% */

@keyframes carousel {
    0%,10% {
        transform: translateX(0%)
    }
    /* 1 */

    12.5%,22.5% {
        transform: translateX(-100%)
    }
    /* 2 */

    25%,35% {
        transform: translateX(-200%)
    }
    /* 3 */

    37.5%,47.5% {
        transform: translateX(-300%)
    }
    /* 4 */

    50%,60% {
        transform: translateX(-400%)
    }
    /* 5 */

    62.5%,72.5% {
        transform: translateX(-500%)
    }
    /* 6 */

    75%,85% {
        transform: translateX(-600%)
    }
    /* 7 */

    87.5%,97.5% {
        transform: translateX(-700%)
    }
    /* 8 */

    100% {
        transform: translateX(-800%)
    }
    /* clone of 1 */
}
/* Dots indicator follows same timing (wraps at 100%) */

@keyframes indicator {
    0%,10% {
        transform: translateX(0%)
    }
    /* dot 1 */

    12.5%,22.5% {
        transform: translateX(100%)
    }
    /* dot 2 */

    25%,35% {
        transform: translateX(200%)
    }
    /* dot 3 */

    37.5%,47.5% {
        transform: translateX(300%)
    }
    /* dot 4 */

    50%,60% {
        transform: translateX(400%)
    }
    /* dot 5 */

    62.5%,72.5% {
        transform: translateX(500%)
    }
    /* dot 6 */

    75%,85% {
        transform: translateX(600%)
    }
    /* dot 7 */

    87.5%,97.5% {
        transform: translateX(700%)
    }
    /* dot 8 */

    100% {
        transform: translateX(0%)
    }
    /* reset */
}
/* Pause on hover */

.carousel:hover .track {
    animation-play-state: paused;
}

.carousel:hover .dots .pill {
    animation-play-state: paused;
}
/* Manual mode on focus-within: radios take over */

.carousel:focus-within .track {
    animation: none;
}

.carousel:focus-within .dots .pill {
    display: none;
}
/* Radio -> slide mapping (manual mode) */

#s1:checked ~ .viewport .track {
    transform: translateX(0%)
}

#s2:checked ~ .viewport .track {
    transform: translateX(-100%)
}

#s3:checked ~ .viewport .track {
    transform: translateX(-200%)
}

#s4:checked ~ .viewport .track {
    transform: translateX(-300%)
}

#s5:checked ~ .viewport .track {
    transform: translateX(-400%)
}

#s6:checked ~ .viewport .track {
    transform: translateX(-500%)
}

#s7:checked ~ .viewport .track {
    transform: translateX(-600%)
}

#s8:checked ~ .viewport .track {
    transform: translateX(-700%)
}
/* Radio -> active dot (manual mode) */

.dots label {
    opacity: .4;
    transition: opacity .2s, transform .2s;
}

#s1:checked ~ .dots label[for="s1"], #s2:checked ~ .dots label[for="s2"], #s3:checked ~ .dots label[for="s3"], #s4:checked ~ .dots label[for="s4"], #s5:checked ~ .dots label[for="s5"], #s6:checked ~ .dots label[for="s6"], #s7:checked ~ .dots label[for="s7"], #s8:checked ~ .dots label[for="s8"] {
    opacity: 1;
    transform: scale(1.0);
}
/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .track {
        animation: none !important;
    }

    .dots .pill {
        display: none;
    }
}