/* ========== SCROLL ANIMATIONS ========== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }
.animate-on-scroll.delay-5 { transition-delay: 0.5s; }
.animate-on-scroll.delay-6 { transition-delay: 0.6s; }
.animate-on-scroll.delay-7 { transition-delay: 0.7s; }
.animate-on-scroll.delay-8 { transition-delay: 0.8s; }
.animate-on-scroll.delay-9 { transition-delay: 0.9s; }
.animate-on-scroll.delay-10 { transition-delay: 1s; }

.animate-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-left.animated {
    opacity: 1;
    transform: translateX(0);
}

.animate-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-right.animated {
    opacity: 1;
    transform: translateX(0);
}

/* Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatLogo {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.5; transform: scale(0.95); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes rotateShine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes breathe {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

@keyframes float {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(20px, 20px) rotate(360deg); }
}

@keyframes gradientShift {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

@keyframes gentlePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(200, 106, 165, 0.3); }
    50% { transform: scale(1.02); box-shadow: 0 8px 25px rgba(200, 106, 165, 0.2); }
}

/* Add to animations.css for the registration badge in hero */
.hero .professional-badge.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: 1.3s; /* Appears after other hero elements */
}

.hero .professional-badge.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}