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

@keyframes drift1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(60px, 40px); }
}

@keyframes drift2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-40px, -30px); }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.anim-fade-up {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    transition: opacity 0.8s cubic-bezier(0.2, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.2, 1, 0.3, 1) !important;
    transition-delay: var(--d, 0ms) !important;
    will-change: opacity, transform;
}

.anim-fade-up.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.anim-fade-left {
    opacity: 0;
    animation: fadeLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--d, 0ms);
}

.grid-bg {
    animation: fadeIn 1.2s ease forwards;
}

.navbar {
    animation: navbarDrop 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.orb-1 {
    animation: drift1 12s ease-in-out infinite;
}

.orb-2 {
    animation: drift2 15s ease-in-out infinite;
}

@keyframes iconPulse {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.08); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

.anim-icon-pulse {
    animation: iconPulse 3s infinite ease-in-out;
}

@keyframes footerSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-footer-up {
    animation: footerSlideUp 0.8s cubic-bezier(0.2, 1, 0.3, 1) both !important;
}