.handwave {
  transform-origin: 70% 70%;
  animation: waving-hand 2.5s infinite;
}

.bg-custom-entry {
    background: linear-gradient(135deg, #CCC 25%, transparent 25%) -50px 0, linear-gradient(225deg, #CCC 25%, transparent 25%) -50px 0, linear-gradient(315deg, #CCC 25%, transparent 25%), linear-gradient(45deg, #CCC 25%, transparent 25%);
    background-size: 10px 18px;
    background-color: #707070;
}
.bg-custom-entry-success {
    background: linear-gradient(135deg, #4f4e64 25%, transparent 25%) -50px 0, linear-gradient(225deg, #4f4e64 25%, transparent 25%) -50px 0, linear-gradient(315deg, #4f4e64 25%, transparent 25%), linear-gradient(45deg, #4f4e64 25%, transparent 25%);
    background-size: 20px 20px;
    background-color: #3e3d54;
}
.bg-custom-entry-info {
    background: linear-gradient(135deg, #4f4e64 25%, transparent 25%) -50px 0, linear-gradient(225deg, #4f4e64 25%, transparent 25%) -50px 0, linear-gradient(315deg, #4f4e64 25%, transparent 25%), linear-gradient(45deg, #4f4e64 25%, transparent 25%);
    background-size: 20px 20px;
    background-color: #3e3d54;
}

@keyframes waving-hand {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* -start- NOTIFICATIONS ANIMATION */
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.ping-ring {
    position: absolute;
    width: 120px;
    height: 64px;
    border: 2px solid #fb923c;
    border-radius: 50px;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes slideUpFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDownToBottom {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

.notification-enter {
    animation: slideUpFromBottom 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.notification-exit {
    animation: slideDownToBottom 0.4s ease-in-out;
}

.notification-card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 0 auto;
}

.bell-container {
    transition: all 0.3s ease-in-out;
}

.bell-hidden {
    transform: scale(0.8);
    opacity: 0.3;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.pulse-animation {
    animation: pulse 0.6s ease-in-out;
}

.button-auto-click {
    position: relative;
    overflow: hidden;
}

.button-auto-click::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: scaleX(0);
    transform-origin: left;
    animation: buttonFill var(--duration, 3000ms) linear;
}

@keyframes buttonFill {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}
/* -end- NOTIFICATIONS ANIMATION */


/* -start- WORKFLOW ANIMATION */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-30px);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0);
    }
    40%, 43% {
        transform: translateY(-15px);
    }
    70% {
        transform: translateY(-7px);
    }
    90% {
        transform: translateY(-3px);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.6);
    }
}

@keyframes checkmark {
    0% {
        stroke-dashoffset: 50;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.slide-in-up {
    animation: slideInUp 0.6s ease-out forwards;
}

.slide-out-up {
    animation: slideOutUp 0.4s ease-in forwards;
}

.pulse {
    animation: pulse 2s infinite;
}

.spin {
    animation: spin 1s linear infinite;
}

.bounce {
    animation: bounce 1s ease-in-out;
}

.checkmark-path {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: checkmark 0.8s ease-in-out forwards;
}

.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.success-gradient {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.warning-gradient {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.info-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.card {
    backdrop-filter: blur(10px);
}
/* -end- WORKFLOW ANIMATION */