/* Animations */

/* Appear and fade */
@keyframes appear-then-fade {
  0%, 100% { opacity: 0; }
  5%, 60% { opacity: 1; }
}

/* Scale up with boost effect */
@keyframes boost {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* Pulsing outline animation */
@keyframes pulsing-outline {
  0% { outline-width: 0; }
  33% { outline-width: 4px; }
}

/* Scale down and fade out */
@keyframes scale-fade-out {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* Horizontal shake animation */
@keyframes shake {
  0% { transform: translateX(-2rem); }
  25% { transform: translateX(2rem); }
  50% { transform: translateX(-1rem); }
  75% { transform: translateX(1rem); }
}

/* Loading/submitting animation */
@keyframes submitting {
  0% { -webkit-mask-position: 0% 0%, 50% 0%, 100% 0%; }
  12.5% { -webkit-mask-position: 0% 50%, 50% 0%, 100% 0%; }
  25% { -webkit-mask-position: 0% 100%, 50% 50%, 100% 0%; }
  37.5% { -webkit-mask-position: 0% 100%, 50% 100%, 100% 50%; }
  50% { -webkit-mask-position: 0% 100%, 50% 100%, 100% 100%; }
  62.5% { -webkit-mask-position: 0% 50%, 50% 100%, 100% 100%; }
  75% { -webkit-mask-position: 0% 0%, 50% 50%, 100% 100%; }
  87.5% { -webkit-mask-position: 0% 0%, 50% 0%, 100% 50%; }
  100% { -webkit-mask-position: 0% 0%, 50% 0%, 100% 0%; }
}

/* Success color transition */
@keyframes success {
  0% { background-color: var(--color-border-darker); scale: 0.8; }
  20% { background-color: var(--color-border-darker); scale: 1; }
}

/* Wiggle rotation animation */
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(3deg); }
  40% { transform: rotate(-3deg); }
  60% { transform: rotate(3deg); }
  80% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

/* Zoom up and fade */
@keyframes zoom-fade {
  100% { transform: translateY(-2em); opacity: 0; }
}

/* Border color fade */
@keyframes border-fade-out {
  from { border-color: var(--color-text); }
  to { border-color: transparent; }
}

/* Shake utility class */
.shake {
  animation: shake 400ms both;
}

/* Hamburger menu rotation */
.mobile-menu-toggle img {
  transition: transform 150ms ease-in-out;
}

.app-sidebar-toggle:checked ~ .app-content-area .mobile-menu-toggle img,
.backoffice-sidebar-toggle:checked ~ .app-content-area .mobile-menu-toggle img {
  transform: rotate(90deg);
}

/* Spinner rotation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Success appear animation */
@keyframes success-appear {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Check icon bounce animation */
@keyframes check-bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}