/* === POOLBAAS MOTION SYSTEM V1 === */

:root {
    --pb-motion-instant: 90ms;
    --pb-motion-fast: 150ms;
    --pb-motion-normal: 260ms;
    --pb-motion-slow: 430ms;

    --pb-motion-ease:
        cubic-bezier(.22, 1, .36, 1);

    --pb-motion-ease-soft:
        cubic-bezier(.2, .75, .25, 1);

    --pb-motion-ease-press:
        cubic-bezier(.2, .8, .2, 1);
}


/* Algemene interactie */

html.pb-motion-capable {
    scroll-behavior: smooth;
}

html.pb-motion-capable body {
    -webkit-tap-highlight-color: transparent;
}

html.pb-motion-capable
a,
html.pb-motion-capable
button,
html.pb-motion-capable
input,
html.pb-motion-capable
select,
html.pb-motion-capable
textarea {
    touch-action: manipulation;
}

html.pb-motion-capable
a,
html.pb-motion-capable
button,
html.pb-motion-capable
[role="button"] {
    transition:
        scale var(--pb-motion-instant)
            var(--pb-motion-ease-press),
        filter var(--pb-motion-fast)
            ease,
        opacity var(--pb-motion-fast)
            ease;
}

html.pb-motion-capable
.pb-is-pressed {
    scale: .965;
    filter: brightness(.97);
}

html.pb-motion-capable
a:focus-visible,
html.pb-motion-capable
button:focus-visible,
html.pb-motion-capable
input:focus-visible,
html.pb-motion-capable
select:focus-visible,
html.pb-motion-capable
textarea:focus-visible,
html.pb-motion-capable
[role="button"]:focus-visible {
    outline: 3px solid
        rgba(107, 76, 210, .35);
    outline-offset: 3px;
}


/* Page entrance */

.pb-motion-page {
    opacity: 0;
    transform: translate3d(
        0,
        5px,
        0
    );
}

.pb-motion-page.is-visible {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--pb-motion-normal)
            ease,
        transform var(--pb-motion-normal)
            var(--pb-motion-ease);
}


/* Element reveal */

.pb-reveal {
    opacity: 0;
    transform:
        translate3d(
            0,
            12px,
            0
        );

    transition:
        opacity var(--pb-motion-normal)
            ease,
        transform var(--pb-motion-slow)
            var(--pb-motion-ease);

    transition-delay:
        calc(
            min(
                var(--pb-reveal-order, 0),
                8
            )
            * 38ms
        );

    will-change:
        opacity,
        transform;
}

.pb-reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}


/* Kleine statistiekkaarten */

.pah-summary > article.pb-reveal {
    transform:
        translate3d(
            0,
            9px,
            0
        )
        scale(.985);
}

.pah-summary
> article.pb-reveal.is-visible {
    transform: none;
}


/* Wedstrijdkaarten */

.pah-match.pb-reveal {
    transform:
        translate3d(
            0,
            11px,
            0
        )
        scale(.992);
}

.pah-match.pb-reveal.is-visible {
    transform: none;
}

@media (
    hover: hover
)
and (
    pointer: fine
) {
    .pah-match {
        transition:
            transform var(--pb-motion-fast)
                var(--pb-motion-ease),
            border-color var(--pb-motion-fast)
                ease,
            box-shadow var(--pb-motion-fast)
                ease;
    }

    .pah-match:hover {
        transform:
            translate3d(
                0,
                -2px,
                0
            );

        box-shadow:
            0 13px 28px
            rgba(36, 25, 78, .09);
    }
}


/* Speelweek compleet */

.pah-action-banner.is-complete
.pah-action-banner__icon.pb-motion-success {
    animation:
        pb-motion-success-pop
        620ms
        var(--pb-motion-ease)
        both;
}

@keyframes pb-motion-success-pop {
    0% {
        opacity: .2;
        scale: .65;
        rotate: -12deg;
    }

    55% {
        opacity: 1;
        scale: 1.12;
        rotate: 4deg;
    }

    100% {
        opacity: 1;
        scale: 1;
        rotate: 0deg;
    }
}


/* Voortgangscirkel */

.pah-progress.pb-motion-progress {
    animation:
        pb-motion-progress-in
        720ms
        var(--pb-motion-ease)
        both;
}

@keyframes pb-motion-progress-in {
    0% {
        opacity: .25;
        scale: .86;
    }

    65% {
        opacity: 1;
        scale: 1.035;
    }

    100% {
        opacity: 1;
        scale: 1;
    }
}

.pah-progress
strong.pb-motion-number {
    animation:
        pb-motion-number-pop
        520ms
        170ms
        var(--pb-motion-ease)
        both;
}

@keyframes pb-motion-number-pop {
    0% {
        opacity: 0;
        transform:
            translateY(5px)
            scale(.82);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}


/* Actieve mobiele dockknop */

.pb-motion-dock-active {
    animation:
        pb-motion-dock-active
        460ms
        var(--pb-motion-ease)
        both;
}

@keyframes pb-motion-dock-active {
    0% {
        scale: .88;
    }

    65% {
        scale: 1.045;
    }

    100% {
        scale: 1;
    }
}


/* Flashmeldingen */

.flash,
.pb-flash {
    transition:
        opacity var(--pb-motion-normal)
            ease,
        transform var(--pb-motion-normal)
            var(--pb-motion-ease);
}

.flash.pb-motion-flash,
.pb-flash.pb-motion-flash {
    animation:
        pb-motion-flash-in
        380ms
        var(--pb-motion-ease)
        both;
}

@keyframes pb-motion-flash-in {
    0% {
        opacity: 0;
        transform:
            translate3d(
                0,
                -8px,
                0
            )
            scale(.985);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}


/* Mobiele interactie-afwerking */

@media (max-width: 760px) {
    body.pb-pool-home-v1
    .pah-page {
        width:
            calc(
                100%
                - 16px
            );

        padding-top: 8px;

        padding-bottom:
            calc(
                108px
                + env(
                    safe-area-inset-bottom
                )
            );
    }

    body.pb-pool-home-v1
    .pah-primary-link,
    body.pb-pool-home-v1
    .pah-secondary-link,
    body.pb-pool-home-v1
    .pah-action-banner > a,
    body.pb-pool-home-v1
    .pah-section-head > a {
        min-height: 44px;
    }

    body.pb-pool-home-v1
    .pah-action-banner > a,
    body.pb-pool-home-v1
    .pah-primary-link,
    body.pb-pool-home-v1
    .pah-secondary-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.pb-pool-home-v1
    .pah-match__teams {
        min-height: 82px;
    }

    body.pb-pool-home-v1
    .pah-hero__copy > p {
        font-size: 12px;
        line-height: 1.45;
    }

    body.pb-pool-home-v1
    .pah-action-banner strong {
        font-size: 13px;
        line-height: 1.25;
    }

    body.pb-pool-home-v1
    .pah-action-banner p {
        font-size: 11px;
        line-height: 1.4;
    }

    body.pb-pool-home-v1
    .pah-summary article > span {
        font-size: 9px;
    }

    body.pb-pool-home-v1
    .pah-summary article > p {
        font-size: 10px;
        line-height: 1.3;
    }

    body.pb-pool-home-v1
    .pah-match__meta {
        font-size: 9px;
    }

    body.pb-pool-home-v1
    .pah-next-team > strong {
        font-size: 11px;
        line-height: 1.2;
    }

    body.pb-pool-home-v1
    .pah-next-team > small {
        font-size: 9px;
    }

    body.pb-pool-home-v1
    .pah-section-head p {
        font-size: 11px;
        line-height: 1.4;
    }
}


/* Geen animatie zonder toestemming */

@media (
    prefers-reduced-motion: reduce
) {
    html.pb-motion-capable {
        scroll-behavior: auto;
    }

    html.pb-motion-capable *,
    html.pb-motion-capable *::before,
    html.pb-motion-capable *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0ms !important;
    }

    .pb-motion-page,
    .pb-reveal,
    .pah-summary > article.pb-reveal,
    .pah-match.pb-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .pb-is-pressed {
        scale: 1 !important;
        filter: none !important;
    }
}