/* ───── Hero Page-Load Entrance Animations ───── */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes heroSlideRight {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heroSlideLeft {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes heroPulseIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    60% {
        opacity: 1;
        transform: scale(1.04);
    }
    100% {
        transform: scale(1);
    }
}

/* Element-level entrance classes */
.hero-enter-badge {
    animation: heroFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.hero-enter-name {
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.hero-enter-roles {
    animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

.hero-enter-desc {
    animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

.hero-enter-cta {
    animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
}

.hero-enter-social {
    animation: heroFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}

.hero-enter-image {
    animation: heroSlideLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.hero-enter-chip {
    animation: heroPulseIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both;
}

.hero-enter-floatbio {
    animation: heroPulseIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}