/* Scroll-effecten. Klassen worden pas door JavaScript toegevoegd, zodat content
   zonder JavaScript altijd direct zichtbaar blijft. */
.tt-reveal-ready {
    /* Voorkom dat de eigen hover-transition van een kaart eerst naar de
       verborgen startpositie animeert. De reveal zelf gebruikt keyframes. */
    transition: none !important;
    will-change: opacity, transform;
}

.tt-reveal-ready.tt-motion-fade {
    opacity: 0;
}

.tt-reveal-ready.tt-motion-slide-up {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
}

.tt-reveal-ready.tt-motion-cascade {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
}

.tt-reveal-ready.tt-motion-slide-in {
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
}

.tt-reveal-ready.tt-motion-slide-in[data-tt-direction="right"] {
    transform: translate3d(20px, 0, 0);
}

.tt-reveal-ready.tt-motion-zoom {
    opacity: 0;
    transform: scale(0.94);
}

.tt-reveal-ready.is-visible {
    animation-duration: 620ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: var(--tt-reveal-delay, 0ms);
    animation-fill-mode: both;
}

.tt-reveal-ready.is-visible.tt-motion-fade {
    animation-name: tt-motion-fade-in;
}

.tt-reveal-ready.is-visible.tt-motion-slide-up {
    animation-name: tt-motion-slide-up-in;
}

.tt-reveal-ready.is-visible.tt-motion-cascade {
    animation-name: tt-motion-cascade-in;
}

.tt-reveal-ready.is-visible.tt-motion-slide-in {
    animation-name: tt-motion-slide-left-in;
}

.tt-reveal-ready.is-visible.tt-motion-slide-in[data-tt-direction="right"] {
    animation-name: tt-motion-slide-right-in;
}

.tt-reveal-ready.is-visible.tt-motion-zoom {
    animation-name: tt-motion-zoom-in;
}

@keyframes tt-motion-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tt-motion-slide-up-in {
    from { opacity: 0; transform: translate3d(0, 30px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tt-motion-cascade-in {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tt-motion-slide-left-in {
    from { opacity: 0; transform: translate3d(-20px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tt-motion-slide-right-in {
    from { opacity: 0; transform: translate3d(20px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes tt-motion-zoom-in {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .tt-reveal-ready,
    .tt-reveal-ready.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

@media print {
    .tt-reveal-ready,
    .tt-reveal-ready.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}