@keyframes logoFloatIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.94);
    }

    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes logoPulse {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.hero-logo {
    animation: logoFloatIn 0.85s ease-out both, logoPulse 4.5s ease-in-out 0.95s infinite;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.22));
}

@media (prefers-reduced-motion: reduce) {
    .hero-logo {
        animation: none;
    }
}