@keyframes spin { to { transform: rotate(360deg); } }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
        @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
        @keyframes rotate3d { 0% { transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg); } 100% { transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg); } }
        @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } }
        @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
        @keyframes reveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } }
        @keyframes rotate { to { transform: rotate(360deg); } }
        @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
        @keyframes pulse-glow { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 0.8; } }
        @keyframes slideIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(4); opacity: 0; } }
        @keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
        
        .animate-spin { animation: spin 1s linear infinite; }
        .animate-pulse { animation: pulse 1.5s ease-in-out infinite; }
        .animate-float { animation: float 3s ease-in-out infinite; }
        .animate-rotate3d { animation: rotate3d 20s linear infinite; }
        .animate-bounce-custom { animation: bounce 2s infinite; }
        .animate-blink { animation: blink 0.7s infinite; }
        .animate-reveal { animation: reveal 1s ease-out; }
        .animate-pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
        .animate-rotate { animation: rotate 10s linear infinite; }
        .animate-shimmer { animation: shimmer 2s infinite; }
        .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
        .animate-slideIn { animation: slideIn 0.6s ease-out; }
        .animate-fadeInUp { animation: fadeInUp 0.8s ease-out; }
        
        body { cursor: auto; overflow-x: hidden; }
        
        #bgCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.3; }
        
        .box-face { position: absolute; width: 200px; height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: 2px solid #00d4ff; opacity: 0.2; box-shadow: 0 0 40px rgba(0, 212, 255, 0.5); }
        .front { transform: translateZ(100px); }
        .back { transform: rotateY(180deg) translateZ(100px); }
        .right { transform: rotateY(90deg) translateZ(100px); }
        .left { transform: rotateY(-90deg) translateZ(100px); }
        .top { transform: rotateX(90deg) translateZ(100px); }
        .bottom { transform: rotateX(-90deg) translateZ(100px); }
        
        .input-wrapper { position: relative; }
        .input-wrapper input:focus + label,
        .input-wrapper textarea:focus + label,
        .input-wrapper input:not(:placeholder-shown) + label,
        .input-wrapper textarea:not(:placeholder-shown) + label {
            top: -10px;
            left: 16px;
            font-size: 12px;
            color: #00d4ff;
            background: #050816;
            padding: 0 8px;
        }
        
        .success-animation {
            animation: ripple 0.6s ease-out;
        }