/*
	.bouncer // Springt 2x op en neer
*/

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.bouncer {
  animation: bounce 2s ease 2;
}

/*
	.feel-mous-over // Voor het effect alsof er schaduw op de knop valt
*/

.feel-mouse-over {
	
position: relative;
overflow: hidden;
transition: background-color 0.5s;
display: inline-block;
}

.feel-mouse-over::before {

content: '';
position: absolute;
top: 70%; /* Positie verticaal de schaduw terecht gaat komen in de knop */
left: 60%; /* Positie horizontaal waar de schaduw terecht gaat komen in de knop */
width: 540%;
height: 980%;
background: radial-gradient(circle, rgb(0 0 0 / 15%) 0%, #00000000 20%);
transition: all 0.2s ease-out;
border-radius: 50%;
pointer-events: none;
}

.feel-mouse-over:hover::before {
	

transform: translate(-50%, -40%); /* Centreert de gradient op de knop */
}

/*
	.drukken // Voor het effect alsof je op iets drukt
*/

.btn,
.btn-opslaan {
	
transition: all 0.2s ease; /* Snelle transitie voor soepel effect */
box-shadow: 0 3px #999; /* Geeft een schaduw onder de knop voor het "lift" effect */
}

.btn:active,
.btn-opslaan:active {
	
box-shadow: 0 1px #999; /* Maakt de schaduw kleiner om "indrukken" te simuleren */
transform: translateY(3px); /* Verplaatst de knop een beetje naar beneden */
}

/* Fade out naar rechts */

.fade-out-naar-rechts {

animation: fadeAndMoveRight 0.5s forwards;	
}

@keyframes fadeAndMoveRight {
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}