.form-notification { margin-top: 1rem; padding: 1rem 1.5rem; border-radius: 0.5rem; display: none; align-items: center; gap: 0.75rem; animation: slideIn 0.3s ease-out; font-weight: 500; position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .form-notification.success { background-color: var(--success); color: white; border: none; } .form-notification.error { background-color: var(--error); color: white; border: none; } .form-notification i { font-size: 1.25rem; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } .form-notification.hiding { animation: slideOut 0.3s ease-in forwards; } @keyframes float-particle { 0% { transform: translate(0, 0); } 25% { transform: translate(20px, -20px); } 50% { transform: translate(40px, 0); } 75% { transform: translate(20px, 20px); } 100% { transform: translate(0, 0); } } :root { --success: #10b981; --error: #ef4444; } .logo-text-glow { font-weight: 800; font-size: 1.6rem; background: linear-gradient(90deg, var(--accent), var(--accent-darker)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 6px rgba(59, 130, 246, 0.5); transition: all 0.3s ease-in-out; letter-spacing: -0.02em; } .logo-dot-glow { color: white; font-weight: 600; font-size: 1.6rem; margin-left: -1px; text-shadow: 0 0 3px rgba(255, 255, 255, 0.3); transition: all 0.3s ease-in-out; }