.animated-logo {
    width: 4.5rem;
    height: 4.5rem;
    transform: scale(0.6);
    opacity: 0;
    animation: logoIn 0.6s ease-out forwards;
}

.animated-logo .dot {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    animation: pop 0.8s cubic-bezier(0.25, 1.4, 0.5, 1) forwards;
}

.animated-logo .d1 {
    animation-delay: 0.4s;
}

.animated-logo .d2 {
    animation-delay: 0.5s;
}

.animated-logo .d3 {
    animation-delay: 0.6s;
}

.animated-logo .d4 {
    animation-delay: 0.7s;
}

.animated-logo .d5 {
    animation-delay: 0.8s;
}

@keyframes logoIn {
    0% {
        transform: scale(0.6);
        opacity: 0;
        filter: blur(6px);
    }

    60% {
        transform: scale(1.05);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0);

    }
}

@keyframes pop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    70% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .animated-logo {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }

    .animated-logo .dot {
        animation: none;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}