/* ─── Fade-in met richting + zacht stuitertje ─────────────────────────────── */
/*
   Klassen: fade-in--up  fade-in--down  fade-in--left  fade-in--right
*/

@keyframes ts3d-fade-in {
    from { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--rot, 3deg)); }
    40%  { opacity: 1; }
    60%  { transform: translate(calc(var(--fx) * -0.05), calc(var(--fy) * -0.05)) rotate(-0.2deg); }
    75%  { transform: translate(calc(var(--fx) * 0.02),  calc(var(--fy) * 0.02))  rotate(0.05deg); }
    to   { opacity: 1; transform: translate(0px, 0px) rotate(0deg); }
}

.fade-in--up    { --fx:  0px;   --fy:  40px; animation: ts3d-fade-in 1.6s ease-out both paused; }
.fade-in--down  { --fx:  0px;   --fy: -40px; animation: ts3d-fade-in 1.6s ease-out both paused; }
.fade-in--left  { --fx:  40px;  --fy:  0px;  animation: ts3d-fade-in 1.6s ease-out both paused; }
.fade-in--right { --fx: -40px;  --fy:  0px;  animation: ts3d-fade-in 1.6s ease-out both paused; }

:is(.fade-in--up, .fade-in--down, .fade-in--left, .fade-in--right).is-visible {
    animation-play-state: running;
}

/* ─────────────────────────────────────────────────────────────────────────── */

@keyframes flipHorizontal {
    0%   { transform: scaleX(1); }
    50%  { transform: scaleX(-1); }
    100% { transform: scaleX(1); }
}

.flipHover {
    animation: flipHorizontal 0.25s ease-in-out 1;
}

.flipHover:hover {
    animation: flipHorizontal 0.25s ease-in-out infinite;
    cursor: pointer;
}