/* Basis class voor de animatie duur en state */
.wplt-animating {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

/* FRENKIE STIJL */
.wplt-frenkie-entrance { 
    animation-name: wpltFrenkieEntrance; 
    animation-duration: 1s; /* Deze is wat trager en eleganter (1 seconde) */
    animation-timing-function: ease; /* Zachte afremming aan het eind */
}
.wplt-frenkie-exit { 
    animation-name: wpltFrenkieExit; 
    animation-duration: 0.4s; /* Exit mag altijd iets sneller aanvoelen */
}

@keyframes wpltFrenkieEntrance {
    from { 
        opacity: 0; 
        transform: translateY(1.6875rem); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes wpltFrenkieExit {
    from { 
        opacity: 1; 
        transform: scale(1); 
    }
    to { 
        opacity: 0; 
        transform: scale(0.94375); 
    }
}

/* eind Frankie stijl */

/* FADING */
.wplt-fade-in { animation-name: wpltFadeIn; }
.wplt-fade-out { animation-name: wpltFadeOut; }
.wplt-fade-in-up { animation-name: wpltFadeInUp; }
.wplt-fade-out-up { animation-name: wpltFadeOutUp; }

@keyframes wpltFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes wpltFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes wpltFadeInUp {
    from { opacity: 0; transform: translate3d(0, 40px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes wpltFadeOutUp {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(0, -40px, 0); }
}

/* ZOOMING */
.wplt-zoom-in { animation-name: wpltZoomIn; }
.wplt-zoom-out { animation-name: wpltZoomOut; }

@keyframes wpltZoomIn {
    from { opacity: 0; transform: scale3d(0.9, 0.9, 0.9); }
    50% { opacity: 1; }
}
@keyframes wpltZoomOut {
    from { opacity: 1; }
    50% { opacity: 0; transform: scale3d(0.9, 0.9, 0.9); }
    to { opacity: 0; }
}

/* SLIDING */
.wplt-slide-in-right { animation-name: wpltSlideInRight; }
.wplt-slide-out-left { animation-name: wpltSlideOutLeft; }

@keyframes wpltSlideInRight {
    from { transform: translate3d(100%, 0, 0); visibility: visible; }
    to { transform: translate3d(0, 0, 0); }
}
@keyframes wpltSlideOutLeft {
    from { transform: translate3d(0, 0, 0); }
    to { visibility: hidden; transform: translate3d(-100%, 0, 0); }
}

/* SPECIALS (Roll in) */
.wplt-roll-in { animation-name: wpltRollIn; }
.wplt-roll-out { animation-name: wpltRollOut; }

@keyframes wpltRollIn {
    from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes wpltRollOut {
    from { opacity: 1; }
    to { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); }
}