/* Autoplay for 6 slides + 1 clone Step = 16.666%; hold ≈13.333%, transition ≈3.333% */

@keyframes carousel3 {
    0%,13.333% {
        transform: translateX(0%)
    }
    /* 1 */

    16.666%,30% {
        transform: translateX(-100%)
    }
    /* 2 */

    33.333%,46.666% {
        transform: translateX(-200%)
    }
    /* 3 */

    50%,63.333% {
        transform: translateX(-300%)
    }
    /* 4 */

    66.666%,80% {
        transform: translateX(-400%)
    }
    /* 5 */

    83.333%,96.666% {
        transform: translateX(-500%)
    }
    /* 6 */

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

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

    16.666%,30% {
        transform: translateX(100%)
    }
    /* dot 2 */

    33.333%,46.666% {
        transform: translateX(200%)
    }
    /* dot 3 */

    50%,63.333% {
        transform: translateX(300%)
    }
    /* dot 4 */

    66.666%,80% {
        transform: translateX(400%)
    }
    /* dot 5 */

    83.333%,96.666% {
        transform: translateX(500%)
    }
    /* dot 6 */

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

.carousel3:hover .track3 {
    animation-play-state: paused;
}

.carousel3:hover .dots3 .pill3 {
    animation-play-state: paused;
}
/* Manual mode on focus-within: radios take over */

.carousel3:focus-within .track3 {
    animation: none;
}

.carousel3:focus-within .dots3 .pill3 {
    display: none;
}
/* Radio -> slide mapping (manual mode) */

#w1:checked ~ .viewport3 .track3 {
    transform: translateX(0%)
}

#w2:checked ~ .viewport3 .track3 {
    transform: translateX(-100%)
}

#w3:checked ~ .viewport3 .track3 {
    transform: translateX(-200%)
}

#w4:checked ~ .viewport3 .track3 {
    transform: translateX(-300%)
}

#w5:checked ~ .viewport3 .track3 {
    transform: translateX(-400%)
}

#w6:checked ~ .viewport3 .track3 {
    transform: translateX(-500%)
}
/* Radio -> active dot (manual mode) */

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

#w1:checked ~ .dots3 label[for="w1"], #w2:checked ~ .dots3 label[for="w2"], #w3:checked ~ .dots3 label[for="w3"], #w4:checked ~ .dots3 label[for="w4"], #w5:checked ~ .dots3 label[for="w5"], #w6:checked ~ .dots3 label[for="w6"] {
    opacity: 1;
    transform: scale(1.0);
}
/* Reduced motion */

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

    .dots3 .pill3 {
        display: none;
    }
}