/* Autoplay for 3 slides + 1 clone Step = 33.333%; hold ≈26.666%, transition ≈6.666% */

@keyframes carousel2 {
    0%,26.666% {
        transform: translateX(0%)
    }
    /* 1 */

    33.333%,60% {
        transform: translateX(-100%)
    }
    /* 2 */

    66.666%,93.333% {
        transform: translateX(-200%)
    }
    /* 3 */

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

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

    33.333%,60% {
        transform: translateX(100%)
    }
    /* dot 2 */

    66.666%,93.333% {
        transform: translateX(200%)
    }
    /* dot 3 */

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

.carousel2:hover .track2 {
    animation-play-state: paused;
}

.carousel2:hover .dots2 .pill2 {
    animation-play-state: paused;
}
/* Manual mode on focus-within: radios take over */

.carousel2:focus-within .track2 {
    animation: none;
}

.carousel2:focus-within .dots2 .pill2 {
    display: none;
}
/* Radio -> slide mapping (manual mode) */

#t1:checked ~ .viewport2 .track2 {
    transform: translateX(0%)
}

#t2:checked ~ .viewport2 .track2 {
    transform: translateX(-100%)
}

#t3:checked ~ .viewport2 .track2 {
    transform: translateX(-200%)
}
/* Radio -> active dot (manual mode) */

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

#t1:checked ~ .dots2 label[for="t1"], #t2:checked ~ .dots2 label[for="t2"], #t3:checked ~ .dots2 label[for="t3"] {
    opacity: 1;
    transform: scale(1.0);
}
/* Reduced motion */

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

    .dots2 .pill2 {
        display: none;
    }
}