pedidos-express/public/main/animations.css

    @keyframes slideRight {
      from {
        transform: translateX(0%);
        position:absolute;
      }
      to {
        transform: translateX(100%);
        position:absolute;
          }    }
    @keyframes slideRightIn {
      from {
        transform: translateX(100%);
        position:absolute;
      }
      to {
        transform: translateX(0%);
        position:absolute;
      }
    }
    @keyframes slideLeft {
      from {
        transform: translateX(0%);
        position:absolute;
      }
      to {
        transform: translateX(-100%);
        position:absolute;
          }    }
    @keyframes slideLeftIn {
      from {
        transform: translateX(-100%);
        position:absolute;
      }
      to {
        transform: translateX(-0%);
        position:absolute;
      }
    }
    @keyframes popup {
      0% {
        transform: scale(0) translateX(-50%);
      }
      15% {
        transform: scale(1) translateX(-50%);
      }
      85% {
        transform: scale(1) translateX(-50%);
      }
      100% {
        transform: scale(0) translateX(-50%);
      }
    }

    @keyframes confetti-fall {
            0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }
        
        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            animation: confetti-fall 3s linear infinite;
        }
        
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
            50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.8); }
        }
        
        .glow-effect {
            animation: pulse-glow 2s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(5deg); }
        }

        .float-animation {
            animation: float 3s ease-in-out infinite;
        }

        @keyframes sparkle {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.2); }
        }

        .sparkle {
            animation: sparkle 1.5s ease-in-out infinite;
        }

        @keyframes bg-loaded {
            0% { transform: scale(0); filter: blur(10px);}
            100% { transform: scale(1); filter: blur(0);}
        }

        .bg-loaded {
            animation: bg-loaded 200ms ease-in-out;
        }