/* ── Splide pagination – actieve dot als voetbal ── */
@keyframes voetbal-inkomst {
    0% {
        transform: scale(1.2) translate(-150vw, -200px) rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.3);
    }
    20% {
        /* eerste stuit */
        transform: scale(1.8, 1.1) translate(-48vw, 0) rotate(130deg);
        animation-timing-function: cubic-bezier(0.02, 0.72, 0.3, 1);
    }
    32% {
        transform: scale(1.5) translate(-27vw, -100px) rotate(200deg);
        animation-timing-function: cubic-bezier(0.7, 0, 0.98, 0.28);
    }
    46% {
        /* tweede stuit */
        transform: scale(1.7, 1.15) translate(-12vw, 0) rotate(280deg);
        animation-timing-function: cubic-bezier(0.15, 0.8, 0.5, 1);
    }
    57% {
        transform: scale(1.5) translate(-4vw, -22px) rotate(330deg);
        animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.3);
    }
    70% {
        /* landing op paginatie */
        transform: scale(1.65, 1.2) translate(0, 0) rotate(355deg);
        animation-timing-function: ease-out;
    }
    98% {
        transform: scale(1.5) translate(0, 0) rotate(360deg);
    }
    100% {
        transform: scale(1.5) translate(0, 0) rotate(360deg);
    }
}

.splide__pagination .splide__pagination__page.is-active {
    background-color: transparent;
    background-image: url(../../img/voetbal.svg);
    background-size: 200% auto;
    background-repeat: no-repeat;
    background-position: 35% 0;
    border-radius: 0;
    transform: scale(1.5);
    transition: transform 0.35s ease;
}

.splide__pagination .splide__pagination__page.is-active.tilt-rechts {
    transform: scale(1.5) rotate(45deg);
}

.splide__pagination .splide__pagination__page.is-active.tilt-links {
    transform: scale(1.5) rotate(-45deg);
}

.voetbal-page-load .splide__pagination .splide__pagination__page.is-active {
    animation: voetbal-inkomst 1.2s linear both;
    will-change: transform;
}