/* static/css/logo.css */
.logo {
    width: 48px;  /* w-12 */
    height: 48px; /* h-12 */
    position: relative;
}

.logo-svg {
    width: 100%;
    height: 100%;
}

.outer-square {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.inner-square {
    animation: spin 10s linear infinite;
}

.main-heart {
    animation: bounce 2s infinite;
}

.small-heart {
    animation: ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-5%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}